-
-
Save htmlstrap/ceea321fdef9366032b7 to your computer and use it in GitHub Desktop.
BOOTSTRAP: DATA- ATTRIBUTE EXAMPLES
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
var dismiss = '[data-dismiss="alert"]' | |
// ALERT DATA-API | |
var buttons = '[data-toggle="buttons"]' | |
// BUTTON DATA-API | |
var button ='[data-toggle="button"]' | |
// CAROUSEL DATA-API | |
var slide ='[data-slide="slide"]' | |
var slideTo ='[data-slide-to="slide"]' | |
var ride = '[data-ride="carousel"]' | |
// COLLAPSE DATA-API | |
var collapse = '[data-toggle="collapse"]' | |
var target = '[data-target="target"]' | |
var parent = '[data-parent="#parentElementID"]' | |
var dropDown = '[data-toggle = "dropdown"]' | |
var dismiss = '[data-dismiss="modal"]' | |
// MODAL DATA-API | |
var toggleModal = '[data-toggle="modal"]' | |
var originalTitle = '[data-original-title="title"]' | |
var content = '[data-content="content"]' | |
// SCROLLSPY DATA-API | |
var spy = '[data-spy="scroll"]' | |
var anotherTarget = '[data-target="target"]' | |
// TAB DATA-API | |
var toggleTab = '[data-toggle="tab"]' | |
var togglePill = '[data-toggle="pill"]' | |
// AFFIX DATA-API | |
var anotherSpy = '[data-spy="spy"]' | |
//examples: | |
data-target=".navbar-collapse" | |
</script> | |
//ALERT DISMISS data-dismiss="alert" | |
<a class="close" data-dismiss="alert">×</a> | |
//BUTTONS data-toggle="buttons" example | |
<div class="btn-group btn-group-sm btn" data-toggle="buttons"> | |
//DISMISS EXAMPLE data-dismiss-modal | |
<button class="btn btn-success" data-dismiss="modal">Close</button> | |
//DROPDOWN EXAMPLE data-toggle="dropdown" | |
<button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button> | |
//MODAL EXAMPLE data-toggle="modal" data-dismiss="modal" | |
<a href="#sentDialog" class="btn btn-info" data-toggle="modal">Show Dialog</a> | |
<button class="btn btn-success" data-dismiss="modal">Close</button> | |
//EXAMPLE ORIGINAL TITLE data-original-title | |
<!-- Stay Connected --> | |
<div class="headline"> | |
<h3>Stay Connected</h3> | |
</div> | |
<ul class="social-icons"> | |
<li> | |
<a href="http://feeds.feedburner.com/ShawnWildermuth" data-original-title="Feed" class="rss"></a> | |
</li> | |
<li> | |
<a href="https://twitter.com/ShawnWildermuth" data-original-title="Twitter" class="twitter"></a> | |
</li> | |
<li> | |
<a href="http://github.com/shawnwildermuth" data-original-title="GitHub" class="github"></a> | |
</li> | |
<li> | |
<a href="http://www.amazon.com/-/e/B001H6ME46" data-original-title="Amazon Author" class="amazon"></a> | |
</li> | |
<li> | |
<a href="https://www.facebook.com/ShawnWildermuth" data-original-title="Facebook" class="facebook"></a> | |
</li> | |
<li> | |
<a href="//plus.google.com/111559350021454363997?prsrc=3" rel="publisher" data-original-title="Google Plus" class="googleplus"></a> | |
</li> | |
<li> | |
<a href="http://www.linkedin.com/in/shawnwildermuth/" data-original-title="Linkedin" class="linkedin"></a> | |
</li> | |
</ul> | |
</div> | |
//PROGRESSBAR data-percentage example | |
<div class="progress-bar progress-bar-danger" role="progressbar" data-percentage="90"></div> | |
//TOOLTIP PLACEMENT EXAMPLE data-placement | |
<a href="#" class="tooltip-test" data-placement="top" title="Default tooltip">Tooltip on top</a> | |
<a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</a> | |
<li><a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment