Skip to content

Instantly share code, notes, and snippets.

@htmlstrap
Forked from lnickers2004/gist:8425994
Created February 9, 2016 11:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save htmlstrap/ceea321fdef9366032b7 to your computer and use it in GitHub Desktop.
Save htmlstrap/ceea321fdef9366032b7 to your computer and use it in GitHub Desktop.
BOOTSTRAP: DATA- ATTRIBUTE EXAMPLES
<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