This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.
Click the tabs below to toggle between hidden panes, even via dropdown menus.
+Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.
-Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.
Hover over the links below to see tooltips:
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral. @@ -843,12 +841,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
+Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.
* Requires Tooltip to be included
- -Hover over the button to trigger the popover.
@@ -958,11 +953,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {The alert plugin is a tiny class for adding close functionality to alerts.
The alerts plugin works on regular alert messages, and block messages.
+Add dismiss functionality to all alerge messages with this plugin.
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
-Use the buttons plugin for states and toggles.
-Add data-loading-text="Loading..." to use a loading state on a button.
+<button class="btn btn-primary" data-loading-text="Loading...">Loading state</button> +
Add data-toggle="button" to activate toggling on a single button.
+<button class="btn" data-toggle="button">Single Toggle</button> +
Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.
+<div class="btn-group" data-toggle="buttons-checkbox"> + <button class="btn">Left</button> + <button class="btn">Middle</button> + <button class="btn">Right</button> +</div> +
Add data-toggle="buttons-radio" for radio style toggling on btn-group.
+<div class="btn-group" data-toggle="buttons-radio"> + <button class="btn">Left</button> + <button class="btn">Middle</button> + <button class="btn">Right</button> +</div> +
Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
--<!-- Add data-toggle="button" to activate toggling on a single button --> -<button class="btn" data-toggle="button">Single Toggle</button> - -<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group --> -<div class="btn-group" data-toggle="buttons-checkbox"> - <button class="btn">Left</button> - <button class="btn">Middle</button> - <button class="btn">Right</button> -</div> - -<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group --> -<div class="btn-group" data-toggle="buttons-radio"> - <button class="btn">Left</button> - <button class="btn">Middle</button> - <button class="btn">Right</button> -</div> -
None
@@ -1186,13 +1182,26 @@ $('#my-alert').bind('closed', function () {+<button class="btn btn-danger" data-toggle="collapse" data-target="#demo"> + simple collapsible +</button> + +<div id="demo" class="collapse in"> … </div> +
Enable via javascript:
+ +Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.
Enable manually with:
$(".collapse").collapse()
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
-<button class="btn btn-danger" data-toggle="collapse" data-target="#demo"> - simple collapsible -</button> -<div id="demo" class="collapse in"> … </div>-
data-parent="#selector". Refer to the demo to see this in action.
- A generic plugin for cycling through elements. A merry-go-round.
-Watch the slideshow below.
- +The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
+<div id="myCarousel" class="carousel slide"> + <!-- 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> +-
Call via javascript:
+ +...
+ +Call carousel manually with:
$('.carousel').carousel()
Data attributes are used for the previous and next conrols. Check out the example markup below.
--<div id="myCarousel" class="carousel slide"> - <!-- 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> --
Initializes the carousel with an optional options object and starts cycling through items.
{{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}
{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}
+{{_i}}Add quick, dynamic tab functionality to transiton through panes of local content, even via dropdown menus.{{/i}}
{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}
-{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.{{/i}}
{{_i}}Hover over the links below to see tooltips:{{/i}}
{{_i}}Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.{{/i}} @@ -768,12 +766,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}
+{{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information. Hover over the button to trigger the popover.{{/i}}
* {{_i}}Requires Tooltip to be included{{/i}}
- -{{_i}}Hover over the button to trigger the popover.{{/i}}
@@ -883,11 +878,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {{{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}
{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}
+{{_i}}Add dismiss functionality to all alerge messages with this plugin.{{/i}}
{{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}
-{{_i}}Use the buttons plugin for states and toggles.{{/i}}
-{{_i}}Add data-loading-text="Loading..." to use a loading state on a button.{{/i}}
+<button class="btn btn-primary" data-loading-text="Loading...">Loading state</button> +
{{_i}}Add data-toggle="button" to activate toggling on a single button.{{/i}}
+<button class="btn" data-toggle="button">Single Toggle</button> +
{{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.{{/i}}
+<div class="btn-group" data-toggle="buttons-checkbox"> + <button class="btn">Left</button> + <button class="btn">Middle</button> + <button class="btn">Right</button> +</div> +
{{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group.{{/i}}
+<div class="btn-group" data-toggle="buttons-radio"> + <button class="btn">Left</button> + <button class="btn">Middle</button> + <button class="btn">Right</button> +</div> +
{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}
-
-<!-- {{_i}}Add data-toggle="button" to activate toggling on a single button{{/i}} -->
-<button class="btn" data-toggle="button">Single Toggle</button>
-
-<!-- {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group{{/i}} -->
-<div class="btn-group" data-toggle="buttons-checkbox">
- <button class="btn">Left</button>
- <button class="btn">Middle</button>
- <button class="btn">Right</button>
-</div>
-
-<!-- {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group{{/i}} -->
-<div class="btn-group" data-toggle="buttons-radio">
- <button class="btn">Left</button>
- <button class="btn">Middle</button>
- <button class="btn">Right</button>
-</div>
-
{{_i}}None{{/i}}
@@ -1111,13 +1107,26 @@ $('#my-alert').bind('closed', function () {
+<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
+ {{_i}}simple collapsible{{/i}}
+</button>
+
+<div id="demo" class="collapse in"> … </div>
+
{{_i}}Enable via javascript:{{/i}}
+ +{{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}
{{_i}}To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.{{/i}}
{{_i}}Enable manually with:{{/i}}
$(".collapse").collapse()
{{_i}}Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.{{/i}}
-<button class="btn btn-danger" data-toggle="collapse" data-target="#demo">
- {{_i}}simple collapsible{{/i}}
-</button>
-<div id="demo" class="collapse in"> … </div>
- data-parent="#selector". Refer to the demo to see this in action.{{/i}}
- {{_i}}A generic plugin for cycling through elements. A merry-go-round.{{/i}}
-{{_i}}Watch the slideshow below.{{/i}}
- +{{_i}}The slideshow below shows a generic plugin and component for cycling through elements like a carousel.{{/i}}
+<div id="myCarousel" class="carousel slide">
+ <!-- {{_i}}Carousel items{{/i}} -->
+ <div class="carousel-inner">
+ <div class="active item">…</div>
+ <div class="item">…</div>
+ <div class="item">…</div>
+ </div>
+ <!-- {{_i}}Carousel nav{{/i}} -->
+ <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
+ <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
+</div>
+
- {{_i}}Call via javascript:{{/i}}
+ +{{_i}}...{{/i}}
+ +{{_i}}Call carousel manually with:{{/i}}
$('.carousel').carousel()
{{_i}}Data attributes are used for the previous and next conrols. Check out the example markup below.{{/i}}
-
-<div id="myCarousel" class="carousel slide">
- <!-- {{_i}}Carousel items{{/i}} -->
- <div class="carousel-inner">
- <div class="active item">…</div>
- <div class="item">…</div>
- <div class="item">…</div>
- </div>
- <!-- {{_i}}Carousel nav{{/i}} -->
- <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
- <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
-</div>
-
-
{{_i}}Initializes the carousel with an optional options object and starts cycling through items.{{/i}}