</div>
<h3 id="js-individual-compiled">Individual or compiled</h3>
- <p>Plugins can be included individually (using bootstrap's individual <code>*.js</code> files, or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>.</p>
+ <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p>
<div class="bs-callout bs-callout-danger">
<h4>Do not attempt to include both.</h4>
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependencies</h4>
- <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.</p>
+ <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files).</p>
</div>
<h3 id="js-data-attrs">Data attributes</h3>
- <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
+ <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
{% highlight js %}
<p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
{% highlight js %}
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
-$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality
+$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
{% endhighlight %}
<h3 id="js-events">Events</h3>
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
- <p>As of 3.0.0, all bootstrap events are namespaced.</p>
+ <p>As of 3.0.0, all Bootstrap events are namespaced.</p>
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
{% highlight js %}
$('#myModal').on('show.bs.modal', function (e) {
<h3>About transitions</h3>
<p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this—it's already there.</p>
<h3>What's inside</h3>
- <p>Transition.js is a basic helper for transitionEnd events as well as a css transition emulator. It's used by the other plugins to check for css transition support and to catch hanging transitions.</p>
+ <p>Transition.js is a basic helper for <code>transitionEnd</code> events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
</div>
<hr>
- <h4>Overflowing text to show optional scrollbar</h4>
+ <h4>Overflowing text to show scroll behavior</h4>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div><!-- /.modal -->
<div class="bs-example" style="padding-bottom: 24px;">
- <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
+ <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
</div><!-- /example -->
{% highlight html %}
<!-- Button trigger modal -->
- <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
+ <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
- <div class="modal" id="myModal">
+ <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
</div>
<div class="modal-footer">
- <a href="#" class="btn">Close</a>
- <a href="#" class="btn btn-primary">Save changes</a>
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endhighlight %}
+
+ <div class="bs-callout bs-callout-warning">
+ <h4>Make modals accessible</h4>
+ <p>
+ Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br>
+ Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br>
+ Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br>
+ Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code><div></code> to point to this description (this is not shown in the above example).
+ </p>
+ </div>
+
<h2 id="modals-usage">Usage</h2>
<h3>Via data attributes</h3>
<td>remote</td>
<td>path</td>
<td>false</td>
- <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
+ <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
{% highlight html %}
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
{% endhighlight %}
</thead>
<tbody>
<tr>
- <td>show</td>
+ <td>show.bs.modal</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
- <td>shown</td>
+ <td>shown.bs.modal</td>
<td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
- <td>hide</td>
+ <td>hide.bs.modal</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
- <td>hidden</td>
+ <td>hidden.bs.modal</td>
<td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
<h3>Within a navbar</h3>
<div class="bs-example">
- <div id="navbar-example" class="navbar navbar-static">
- <div class="container" style="width: auto;">
- <a class="navbar-brand" href="#">Project Name</a>
+ <nav id="navbar-example" class="navbar navbar-static" role="navigation">
+ <div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
- <div class="nav-collapse collapse bs-js-navbar-collapse">
- <ul class="nav navbar-nav" role="navigation">
- <li class="dropdown">
- <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
- </ul>
- </li>
- <li class="dropdown">
- <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
- </ul>
- </li>
- </ul>
- <ul class="nav navbar-nav pull-right">
- <li id="fat-menu" class="dropdown">
- <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
- <li role="presentation" class="divider"></li>
- <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
- </ul>
- </li>
- </ul>
- </div><!-- /.nav-collapse -->
- </div><!-- /.container -->
- </div> <!-- /navbar-example -->
+ <a class="navbar-brand" href="#">Project Name</a>
+ </div>
+ <div class="collapse navbar-collapse bs-js-navbar-collapse">
+ <ul class="nav navbar-nav">
+ <li class="dropdown">
+ <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right">
+ <li id="fat-menu" class="dropdown">
+ <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div><!-- /.nav-collapse -->
+ </nav> <!-- /navbar-example -->
</div> <!-- /example -->
<h3>Within tabs</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">Regular link</a></li>
<li class="dropdown">
- <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+ <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
</ul>
</li>
<li class="dropdown">
- <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
+ <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
</ul>
</li>
<li class="dropdown">
- <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
+ <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
<ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
{% highlight html %}
<div class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
+ <a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
<p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
{% highlight html %}
<div class="dropdown">
- <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+ <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<h3>Methods</h3>
<h4>$().dropdown('toggle')</h4>
- <p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
- </div>
-
+ <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
+ <h3>Events</h3>
+ <div class="bs-table-scrollable">
+ <table class="table table-bordered table-striped">
+ <thead>
+ <tr>
+ <th style="width: 150px;">Event Type</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>show.bs.dropdown</td>
+ <td>This event fires immediately when the show instance method is called.</td>
+ </tr>
+ <tr>
+ <td>shown.bs.dropdown</td>
+ <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
+ </tr>
+ <tr>
+ <td>hide.bs.dropdown</td>
+ <td>This event is fired immediately when the hide instance method has been called.</td>
+ </tr>
+ <tr>
+ <td>hidden.bs.dropdown</td>
+ <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
+ </tr>
+ </tbody>
+ </table>
+ </div><!-- ./bs-table-scrollable -->
+{% highlight js %}
+$('#myDropdown').on('show.bs.dropdown', function () {
+ // do something…
+})
+{% endhighlight %}
+ </div>
<!-- ScrollSpy
================================================== -->
<h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example">
- <div id="navbar-example2" class="navbar navbar-static">
- <div class="navbar-inner">
- <div class="container" style="width: auto;">
- <a class="navbar-brand" href="#">Project Name</a>
- <ul class="nav navbar-nav">
- <li><a href="#fat">@fat</a></li>
- <li><a href="#mdo">@mdo</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#one">one</a></li>
- <li><a href="#two">two</a></li>
- <li class="divider"></li>
- <li><a href="#three">three</a></li>
- </ul>
- </li>
- </ul>
- </div>
+ <nav id="navbar-example2" class="navbar navbar-static" role="navigation">
+ <div class="navbar-header">
+ <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <a class="navbar-brand" href="#">Project Name</a>
</div>
- </div>
+ <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
+ <ul class="nav navbar-nav">
+ <li><a href="#fat">@fat</a></li>
+ <li><a href="#mdo">@mdo</a></li>
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#one">one</a></li>
+ <li><a href="#two">two</a></li>
+ <li class="divider"></li>
+ <li><a href="#three">three</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
<h4 id="fat">@fat</h4>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
<h3>Via JavaScript</h3>
<p>Call the scrollspy via JavaScript:</p>
{% highlight js %}
-$('#navbar-example').scrollspy()
+$('body').scrollspy({ target: '#navbar-example' })
{% endhighlight %}
<div class="bs-callout bs-callout-danger">
{% highlight js %}
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
-});
+})
{% endhighlight %}
</thead>
<tbody>
<tr>
- <td>activate</td>
+ <td>activate.bs.scrollspy</td>
<td>This event fires whenever a new item becomes activated by the scrollspy.</td>
</tr>
</tbody>
<p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
{% highlight js %}
$('#myTab a').click(function (e) {
- e.preventDefault();
- $(this).tab('show');
+ e.preventDefault()
+ $(this).tab('show')
})
{% endhighlight %}
<p>You can activate individual tabs in several ways:</p>
{% highlight js %}
-$('#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)
+$('#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 %}
<h3>Markup</h3>
<script>
$(function () {
- $('#myTab a:last').tab('show');
+ $('#myTab a:last').tab('show')
})
</script>
{% endhighlight %}
</thead>
<tbody>
<tr>
- <td>show</td>
+ <td>show.bs.tab</td>
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
<tr>
- <td>shown</td>
+ <td>shown.bs.tab</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
</tr>
</tbody>
<h3>Four directions</h3>
<div class="bs-example tooltip-demo">
<div class="bs-example-tooltips">
+ <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
- <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
+ <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div><!-- /example -->
<td>placement</td>
<td>string | function</td>
<td>'top'</td>
- <td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
+ <td>how to position the tooltip - top | bottom | left | right | auto. <br> When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
</tr>
<tr>
<td>selector</td>
<td>title</td>
<td>string | function</td>
<td>''</td>
- <td>default title value if <code>title</code> tag isn't present</td>
+ <td>default title value if <code>title</code> attribute isn't present</td>
</tr>
<tr>
<td>trigger</td>
</thead>
<tbody>
<tr>
- <td>show</td>
+ <td>show.bs.tooltip</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
- <td>shown</td>
+ <td>shown.bs.tooltip</td>
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
- <td>hide</td>
+ <td>hide.bs.tooltip</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
- <td>hidden</td>
+ <td>hidden.bs.tooltip</td>
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</div><!-- /.bs-table-scrollable -->
{% highlight js %}
$('#myTooltip').on('hidden.bs.tooltip', function () {
-// do something…
+ // do something…
})
{% endhighlight %}
</div>
<h3>Live demo</h3>
<div class="bs-example" style="padding-bottom: 24px;">
- <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
+ <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
<h4>Four directions</h4>
<div class="bs-example tooltip-demo">
<div class="bs-example-tooltips">
- <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on top
+ <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on left
</button>
- <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on right
+ <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on top
</button>
- <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
- <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on left
+ <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on right
</button>
</div>
</div><!-- /example -->
<td>placement</td>
<td>string | function</td>
<td>'right'</td>
- <td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placment is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
+ <td>how to position the popover - top | bottom | left | right | auto.<br> When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right.</td>
</tr>
<tr>
<td>selector</td>
</thead>
<tbody>
<tr>
- <td>show</td>
+ <td>show.bs.popover</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
- <td>shown</td>
+ <td>shown.bs.popover</td>
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
- <td>hide</td>
+ <td>hide.bs.popover</td>
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
</tr>
<tr>
- <td>hidden</td>
+ <td>hidden.bs.popover</td>
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
<p>Add dismiss functionality to all alert messages with this plugin.</p>
<div class="bs-example">
<div class="alert fade in">
- <button type="button" class="close" data-dismiss="alert">×</button>
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
</div><!-- /example -->
<div class="bs-example">
- <div class="alert alert-block alert-error fade in">
- <button type="button" class="close" data-dismiss="alert">×</button>
+ <div class="alert alert-block alert-danger fade in">
+ <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<h3>Markup</h3>
<p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
- {% highlight html %}<a class="close" data-dismiss="alert" href="#">×</a>{% endhighlight %}
+ {% highlight html %}<a class="close" data-dismiss="alert" href="#" aria-hidden="true">×</a>{% endhighlight %}
<h3>Methods</h3>
</thead>
<tbody>
<tr>
- <td>close</td>
+ <td>close.bs.alert</td>
<td>This event fires immediately when the <code>close</code> instance method is called.</td>
</tr>
<tr>
- <td>closed</td>
+ <td>closed.bs.alert</td>
<td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</button>
</div><!-- /example -->
{% highlight html %}
-<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
+<button type="button" data-loading-text="Loading..." class="btn btn-primary">
Loading state
</button>
{% endhighlight %}
</div>
<h2 id="collapse-examples">Example accordion</h2>
- <p>Using the collapse plugin, we built a simple accordion style widget:</p>
+ <p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
<div class="bs-example">
- <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">
- Collapsible Group Item #1
- </a>
+ <div class="panel-group" id="accordion">
+ <div class="panel">
+ <div class="panel-heading">
+ <h3 class="panel-title">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+ Collapsible Group Item #1
+ </a>
+ </h3>
</div>
- <div id="collapseOne" class="accordion-body collapse in">
- <div class="accordion-inner">
+ <div id="collapseOne" class="panel-collapse collapse in">
+ <div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
- Collapsible Group Item #2
- </a>
+ <div class="panel">
+ <div class="panel-heading">
+ <h3 class="panel-title">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+ Collapsible Group Item #2
+ </a>
+ </h3>
</div>
- <div id="collapseTwo" class="accordion-body collapse">
- <div class="accordion-inner">
+ <div id="collapseTwo" class="panel-collapse collapse">
+ <div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
- Collapsible Group Item #3
- </a>
+ <div class="panel">
+ <div class="panel-heading">
+ <h3 class="panel-title">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+ Collapsible Group Item #3
+ </a>
+ </h3>
</div>
- <div id="collapseThree" class="accordion-body collapse">
- <div class="accordion-inner">
+ <div id="collapseThree" class="panel-collapse collapse">
+ <div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div><!-- /example -->
{% highlight html %}
-<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">
- Collapsible Group Item #1
- </a>
+<div class="panel-group" id="accordion">
+ <div class="panel">
+ <div class="panel-heading">
+ <h3 class="panel-title">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+ Collapsible Group Item #1
+ </a>
+ </h3>
</div>
- <div id="collapseOne" class="accordion-body collapse in">
- <div class="accordion-inner">
- ...
+ <div id="collapseOne" class="panel-collapse collapse in">
+ <div class="panel-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
- Collapsible Group Item #2
- </a>
+ <div class="panel">
+ <div class="panel-heading">
+ <h3 class="panel-title">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+ Collapsible Group Item #2
+ </a>
+ </h3>
</div>
- <div id="collapseTwo" class="accordion-body collapse">
- <div class="accordion-inner">
- ...
+ <div id="collapseTwo" class="panel-collapse collapse">
+ <div class="panel-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
- <div class="accordion-group">
- <div class="accordion-heading">
- <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
- Collapsible Group Item #3
- </a>
+ <div class="panel">
+ <div class="panel-heading">
+ <h3 class="panel-title">
+ <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+ Collapsible Group Item #3
+ </a>
+ </h3>
</div>
- <div id="collapseThree" class="accordion-body collapse">
- <div class="accordion-inner">
- ...
+ <div id="collapseThree" class="panel-collapse collapse">
+ <div class="panel-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<td>parent</td>
<td>selector</td>
<td>false</td>
- <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
+ <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this dependent on the <code>accordion-group</code> class)</td>
</tr>
<tr>
<td>toggle</td>
</thead>
<tbody>
<tr>
- <td>show</td>
+ <td>show.bs.collapse</td>
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
</tr>
<tr>
- <td>shown</td>
+ <td>shown.bs.collapse</td>
<td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
</tr>
<tr>
- <td>hide</td>
+ <td>hide.bs.collapse</td>
<td>
This event is fired immediately when the <code>hide</code> method has been called.
</td>
</tr>
<tr>
- <td>hidden</td>
+ <td>hidden.bs.collapse</td>
<td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
</tr>
</tbody>
</ol>
<div class="carousel-inner">
<div class="item active">
- <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="">
+ <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
</div>
<div class="item">
- <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="">
+ <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
</div>
<div class="item">
- <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="">
+ <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
- <img src="..." alt="">
+ <img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</ol>
<div class="carousel-inner">
<div class="item active">
- <img data-src="holder.js/900x500/auto/#777:#777" alt="">
+ <img data-src="holder.js/900x500/auto/#777:#777" src="data:image/png;base64," alt="First slide image">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
- <img data-src="holder.js/900x500/auto/#666:#666" alt="">
+ <img data-src="holder.js/900x500/auto/#666:#666" src="data:image/png;base64," alt="Second slide image">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
- <img data-src="holder.js/900x500/auto/#555:#5555" alt="">
+ <img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64," alt="Third slide image">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div><!-- /example -->
{% highlight html %}
<div class="item active">
- <img src="..." alt="">
+ <img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
{% endhighlight %}
+<div class="bs-callout bs-callout-danger">
+ <h4>Accessibility issue</h4>
+ <p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
+</div>
<h2 id="carousel-usage">Usage</h2>
<td>"hover"</td>
<td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
</tr>
+ <tr>
+ <td>wrap</td>
+ <td>boolean</td>
+ <td>true</td>
+ <td>Whether the carousel should cycle continuously or have hard stops.</td>
+ </tr>
</tbody>
</table>
</div><!-- /.bs-table-scrollable -->
<h4>.carousel(options)</h4>
<p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
-{% highlight html %}
+{% highlight js %}
$('.carousel').carousel({
interval: 2000
})
</thead>
<tbody>
<tr>
- <td>slide</td>
+ <td>slide.bs.carousel</td>
<td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
</tr>
<tr>
- <td>slid</td>
+ <td>slid.bs.carousel</td>
<td>This event is fired when the carousel has completed its slide transition.</td>
</tr>
</tbody>
<h4>Requires independent styling ;)</h4>
<p>
Affix toggles between three states/classes: <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin).
- The <code>affix-top</code> class should be in the regular flow of the document. The <code>affix</code> class should be fixed to the page. And <code>affix-bottom</code> should be positioned absolute. Note, <code>affix-bottom</code> is special in that the plugin will place the element with js relative to the <code>offset: { bottom: number }</code> option you've provided.
+ The <code>affix-top</code> class should be in the regular flow of the document. The <code>affix</code> class should be fixed to the page. And <code>affix-bottom</code> should be positioned absolute. Note, <code>affix-bottom</code> is special in that the plugin will place the element with JS relative to the <code>offset: { bottom: number }</code> option you've provided.
</p>
</div>
projects / bootswatch / blobdiff