To keep URLs intact, use the data-target attribute instead of href="#".
-<div class="dropdown">
- <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
- Dropdown
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+{% highlight html linenos %}
+
+
+ Dropdown
+
+
+
+{% endhighlight %}
Via JavaScript
Call the dropdowns via JavaScript:
- $('.dropdown-toggle').dropdown()
+{% highlight js linenos %}
+$('.dropdown-toggle').dropdown()
+{% endhighlight %}
Options
None
@@ -531,11 +545,17 @@ $('#myModal').on('hidden', function () {
Via data attributes
To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.
- <body data-spy="scroll" data-target=".navbar">...</body>
+{% highlight html linenos %}
+
+ ...
+
+{% endhighlight %}
Via JavaScript
Call the scrollspy via JavaScript:
- $('#navbar').scrollspy()
+{% highlight js linenos %}
+$('#navbar').scrollspy()
+{% endhighlight %}
Heads up!
@@ -545,11 +565,12 @@ $('#myModal').on('hidden', function () {
Methods
.scrollspy('refresh')
When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
-
+{% highlight js linenos %}
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
-
+{% endhighlight %}
+
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".
@@ -635,28 +656,32 @@ $('[data-spy="scroll"]').each(function () {
Usage
Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
-
+{% highlight js linenos %}
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
-})
+})
+{% endhighlight %}
+
You can activate individual tabs in several ways:
-
+{% highlight js linenos %}
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
-
+{% endhighlight %}
Markup
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.
-
-<ul class="nav nav-tabs">
- <li><a href="#home" data-toggle="tab">Home</a></li>
- <li><a href="#profile" data-toggle="tab">Profile</a></li>
- <li><a href="#messages" data-toggle="tab">Messages</a></li>
- <li><a href="#settings" data-toggle="tab">Settings</a></li>
-</ul>
+{% highlight html linenos %}
+
+{% endhighlight %}
+
To make tabs fade in, add .fade to each .tab-pane.
Methods
@@ -664,27 +689,27 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.
-
-<ul class="nav nav-tabs" id="myTab">
- <li class="active"><a href="#home">Home</a></li>
- <li><a href="#profile">Profile</a></li>
- <li><a href="#messages">Messages</a></li>
- <li><a href="#settings">Settings</a></li>
-</ul>
+{% highlight html linenos %}
+
-<div class="tab-content">
- <div class="tab-pane active" id="home">...</div>
- <div class="tab-pane" id="profile">...</div>
- <div class="tab-pane" id="messages">...</div>
- <div class="tab-pane" id="settings">...</div>
-</div>
+
+ ...
+ ...
+ ...
+ ...
+
-<script>
+
+{% endhighlight %}
Events
@@ -705,12 +730,12 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
-
+{% highlight js linenos %}
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
-
+{% endhighlight %}
@@ -749,7 +774,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Usage
Trigger the tooltip via JavaScript:
- $('#example').tooltip(options)
+{% highlight js linenos %}
+$('#example').tooltip(options)
+{% endhighlight %}
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
@@ -825,23 +852,30 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Markup
- <a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>
+{% highlight html linenos %}
+Hover over me
+{% endhighlight %}
Methods
+
$().tooltip(options)
Attaches a tooltip handler to an element collection.
+
.tooltip('show')
Reveals an element's tooltip.
- $('#element').tooltip('show')
+ {% highlight js linenos %}$('#element').tooltip('show'){% endhighlight %}
+
.tooltip('hide')
Hides an element's tooltip.
- $('#element').tooltip('hide')
+ {% highlight js linenos %}$('#element').tooltip('hide'){% endhighlight %}
+
.tooltip('toggle')
Toggles an element's tooltip.
- $('#element').tooltip('toggle')
+ {% highlight js linenos %}$('#element').tooltip('toggle'){% endhighlight %}
+
.tooltip('destroy')
Hides and destroys an element's tooltip.
- $('#element').tooltip('destroy')
+ {% highlight js linenos %}$('#element').tooltip('destroy'){% endhighlight %}
@@ -916,7 +950,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Usage
Enable popovers via JavaScript:
- $('#example').popover(options)
+ {% highlight js linenos %}$('#example').popover(options){% endhighlight %}
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".
@@ -1003,18 +1037,22 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Methods
$().popover(options)
Initializes popovers for an element collection.
+
.popover('show')
Reveals an elements popover.
- $('#element').popover('show')
+ {% highlight js linenos %}$('#element').popover('show'){% endhighlight %}
+
.popover('hide')
Hides an elements popover.
- $('#element').popover('hide')
+ {% highlight js linenos %}$('#element').popover('hide'){% endhighlight %}
+
.popover('toggle')
Toggles an elements popover.
- $('#element').popover('toggle')
+ {% highlight js linenos %}$('#element').popover('toggle'){% endhighlight %}
+
.popover('destroy')
Hides and destroys an element's popover.
- $('#element').popover('destroy')
+ {% highlight js linenos %}$('#element').popover('destroy'){% endhighlight %}
@@ -1053,18 +1091,20 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Usage
Enable dismissal of an alert via JavaScript:
- $(".alert").alert()
+ {% highlight js linenos %}$(".alert").alert(){% endhighlight %}
Markup
Just add data-dismiss="alert" to your close button to automatically give an alert close functionality.
- <a class="close" data-dismiss="alert" href="#">×</a>
+ {% highlight html linenos %}×{% endhighlight %}
Methods
+
$().alert()
Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.
+
.alert('close')
Closes an alert.
- $(".alert").alert('close')
+ {% highlight js linenos %}$(".alert").alert('close'){% endhighlight %}
Events
@@ -1087,11 +1127,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
-
+{% highlight js linenos %}
$('#my-alert').bind('closed', function () {
// do something…
})
-
+{% endhighlight %}
@@ -1109,18 +1149,24 @@ $('#my-alert').bind('closed', function () {
Stateful
Add data-loading-text="Loading..." to use a loading state on a button.
-
- <button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
+{% highlight html linenos %}
+
+{% endhighlight %}
Single toggle
Add data-toggle="button" to activate toggling on a single button.
-
+
- <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
+{% highlight html linenos %}
+
+{% endhighlight %}
Checkbox
Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.
@@ -1131,13 +1177,13 @@ $('#my-alert').bind('closed', function () {
-
-<div class="btn-group" data-toggle="buttons-checkbox">
- <button type="button" class="btn btn-primary">Left</button>
- <button type="button" class="btn btn-primary">Middle</button>
- <button type="button" class="btn btn-primary">Right</button>
-</div>
-
+{% highlight html linenos %}
+
+
+
+
+
+{% endhighlight %}
Radio
Add data-toggle="buttons-radio" for radio style toggling on btn-group.
@@ -1148,13 +1194,13 @@ $('#my-alert').bind('closed', function () {
-
-<div class="btn-group" data-toggle="buttons-radio">
- <button type="button" class="btn btn-primary">Left</button>
- <button type="button" class="btn btn-primary">Middle</button>
- <button type="button" class="btn btn-primary">Right</button>
-</div>
-
+{% highlight html linenos %}
+
+
+
+
+
+{% endhighlight %}
@@ -1162,7 +1208,9 @@ $('#my-alert').bind('closed', function () {
Usage
Enable buttons via JavaScript:
- $('.nav-tabs').button()
+{% highlight js linenos %}
+$('.nav-tabs').button()
+{% endhighlight %}
Markup
Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
@@ -1171,30 +1219,40 @@ $('#my-alert').bind('closed', function () {
None
Methods
+
$().button('toggle')
Toggles push state. Gives the button the appearance that it has been activated.
Heads up!
You can enable auto toggling of a button by using the data-toggle attribute.
- <button type="button" class="btn" data-toggle="button" >…</button>
+{% highlight html linenos %}
+
+{% endhighlight %}
+
$().button('loading')
Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.
- <button type="button" class="btn" data-loading-text="loading stuff..." >...</button>
+{% highlight html linenos %}
+
+{% endhighlight %}
+
Heads up!
Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".
+
$().button('reset')
Resets button state - swaps text to original text.
+
$().button(string)
Resets button state - swaps text to any data defined text state.
-<button type="button" class="btn" data-complete-text="finished!" >...</button>
-<script>
+{% highlight html linenos %}
+
+
+{% endhighlight %}
@@ -1253,43 +1311,55 @@ $('#my-alert').bind('closed', function () {
-
-<div class="accordion" id="accordion2">
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
+{% highlight html linenos %}
+
+
+
+
+
+
+
+ ...
+
+
+
+
+{% endhighlight %}
-<div id="demo" class="collapse in"> … </div>
-
+ You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
+{% highlight html linenos %}
+
+
+...
+{% endhighlight %}
@@ -1303,7 +1373,9 @@ $('#my-alert').bind('closed', function () {
Via JavaScript
Enable manually with:
- $(".collapse").collapse()
+{% highlight js linenos %}
+$(".collapse").collapse()
+{% endhighlight %}
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent="".
@@ -1334,17 +1406,21 @@ $('#my-alert').bind('closed', function () {
Methods
+
.collapse(options)
Activates your content as a collapsible element. Accepts an optional options object.
-
+{% highlight js linenos %}
$('#myCollapsible').collapse({
toggle: false
})
-
+{% endhighlight %}
+
.collapse('toggle')
Toggles a collapsible element to shown or hidden.
+
.collapse('show')
Shows a collapsible element.
+
.collapse('hide')
Hides a collapsible element.
@@ -1378,10 +1454,11 @@ $('#myCollapsible').collapse({
-
+{% highlight js linenos %}
$('#myCollapsible').on('hidden', function () {
// do something…
-})
+})
+{% endhighlight %}
@@ -1433,24 +1510,35 @@ $('#myCollapsible').on('hidden', function () {
-
-<div id="myCarousel" class="carousel slide">
- <ol class="carousel-indicators">
- <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
- <li data-target="#myCarousel" data-slide-to="1"></li>
- <li data-target="#myCarousel" data-slide-to="2"></li>
- </ol>
- <!-- Carousel items -->
- <div class="carousel-inner">
- <div class="active item">…</div>
- <div class="item">…</div>
- <div class="item">…</div>
- </div>
- <!-- Carousel nav -->
- <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
- <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
-</div>
-
+{% highlight html linenos %}
+
+{% endhighlight %}
Heads up!
@@ -1468,7 +1556,9 @@ $('#myCollapsible').on('hidden', function () {
Via JavaScript
Call carousel manually with:
- $('.carousel').carousel()
+{% highlight js linenos %}
+$('.carousel').carousel()
+{% endhighlight %}
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-interval="".
@@ -1498,21 +1588,27 @@ $('#myCollapsible').on('hidden', function () {
Methods
+
.carousel(options)
Initializes the carousel with an optional options object and starts cycling through items.
-
+{% highlight html linenos %}
$('.carousel').carousel({
interval: 2000
})
-
+{% endhighlight %}
+
.carousel('cycle')
Cycles through the carousel items from left to right.
+
.carousel('pause')
Stops the carousel from cycling through items.
+
.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).
+
.carousel('prev')
Cycles to the previous item.
+
.carousel('next')
Cycles to the next item.
@@ -1553,7 +1649,10 @@ $('.carousel').carousel({
- <input type="text" data-provide="typeahead">
+{% highlight html linenos %}
+
+{% endhighlight %}
+
You'll want to set autocomplete="off" to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.
@@ -1566,7 +1665,9 @@ $('.carousel').carousel({
Via JavaScript
Call the typeahead manually with:
- $('.typeahead').typeahead()
+{% highlight js linenos %}
+$('.typeahead').typeahead()
+{% endhighlight %}
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-source="".
@@ -1649,7 +1750,9 @@ $('.carousel').carousel({
Via data attributes
To easily add affix behavior to any element, just add data-spy="affix" to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.
- <div data-spy="affix" data-offset-top="200">...</div>
+{% highlight html linenos %}
+...
+{% endhighlight %}
Heads up!
@@ -1658,16 +1761,19 @@ $('.carousel').carousel({
Via JavaScript
Call the affix plugin via JavaScript:
- $('#navbar').affix()
+{% highlight js linenos %}
+$('#navbar').affix()
+{% endhighlight %}
Methods
.affix('refresh')
When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:
-
+{% highlight js linenos %}
$('[data-spy="affix"]').each(function () {
$(this).affix('refresh')
});
-
+{% endhighlight %}
+
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset-top="200".