diff options
| author | Mark Otto <[email protected]> | 2014-06-26 09:46:59 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-06-26 09:46:59 -0700 |
| commit | 2c3d8ce13473e2938798c48cef355fdbfa44bcbf (patch) | |
| tree | 56d2b72dea5bb0a08524730ef9a7a11b7069fb84 /javascript | |
| parent | ed14e5132b73a4a1594997a2e2392a214281046e (diff) | |
| download | bootstrap-2c3d8ce13473e2938798c48cef355fdbfa44bcbf.tar.xz bootstrap-2c3d8ce13473e2938798c48cef355fdbfa44bcbf.zip | |
merge in v3.2.0 changes; nuke a dupe _gh_pages dir
Diffstat (limited to 'javascript')
| -rw-r--r-- | javascript/index.html | 652 |
1 files changed, 326 insertions, 326 deletions
diff --git a/javascript/index.html b/javascript/index.html index 9fefa17c7..7c831a8ef 100644 --- a/javascript/index.html +++ b/javascript/index.html @@ -18,34 +18,39 @@ <!-- Bootstrap core CSS --> <link href="../dist/css/bootstrap.min.css" rel="stylesheet"> + <!-- Optional Bootstrap Theme --> + <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet"> + + <!-- Documentation extras --> <link href="../assets/css/docs.min.css" rel="stylesheet"> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> +<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> +<script src="../assets/js/ie10-viewport-bug-workaround.js"></script> +<script src="../assets/js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> - <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> - <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> + <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Favicons --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png"> - <link rel="shortcut icon" href="../assets/ico/favicon.ico"> +<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"> +<link rel="icon" href="/favicon.ico"> <script> - var _gaq = _gaq || []; - _gaq.push(['_setAccount', 'UA-146052-10']); - _gaq.push(['_trackPageview']); - (function() { - var ga = document.createElement('script'); ga.async = true; - ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; - var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); - })(); + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-146052-10', 'getbootstrap.com'); + ga('send', 'pageview'); </script> </head> <body> - <a class="sr-only" href="#content">Skip to main content</a> + <a class="sr-only sr-only-focusable" href="#content">Skip to main content</a> <!-- Docs master nav --> <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner"> @@ -78,8 +83,8 @@ </li> </ul> <ul class="nav navbar-nav navbar-right"> - <li><a href="http://expo.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Expo']);">Expo</a></li> - <li><a href="http://blog.getbootstrap.com" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li> + <li><a href="http://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li> + <li><a href="http://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li> </ul> </nav> </div> @@ -100,9 +105,7 @@ <div class="row"> <div class="col-md-9" role="main"> - <!-- Overview -================================================== --> -<div class="bs-docs-section"> + <div class="bs-docs-section"> <h1 id="js-overview" class="page-header">Overview</h1> <h3 id="js-individual-compiled">Individual or compiled</h3> @@ -120,47 +123,41 @@ <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. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files). <a href="https://github.com/twbs/bootstrap/blob/v3.1.1/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</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). <a href="https://github.com/twbs/bootstrap/blob/v3.2.0/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</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>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:</p> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.data-api'</span><span class="p">)</span> -</code></pre></div> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.data-api'</span><span class="p">)</span></code></pre></div> <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.alert.data-api'</span><span class="p">)</span> -</code></pre></div> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">off</span><span class="p">(</span><span class="s1">'.alert.data-api'</span><span class="p">)</span></code></pre></div> <h3 id="js-programmatic-api">Programmatic API</h3> <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.btn.danger'</span><span class="p">).</span><span class="nx">button</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'fat'</span><span class="p">)</span> -</code></pre></div> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.btn.danger'</span><span class="p">).</span><span class="nx">button</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s1">'fat'</span><span class="p">)</span></code></pre></div> <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">()</span> <span class="c1">// initialized with defaults</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> <span class="nx">keyboard</span><span class="o">:</span> <span class="kc">false</span> <span class="p">})</span> <span class="c1">// initialized with no keyboard</span> -<span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// initializes and invokes show immediately</span> -</code></pre></div> +<span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// initializes and invokes show immediately</span></code></pre></div> - <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p> + <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p> <h3 id="js-noconflict">No conflict</h3> <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> <div class="highlight"><pre><code class="js"><span class="kd">var</span> <span class="nx">bootstrapButton</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">button</span><span class="p">.</span><span class="nx">noConflict</span><span class="p">()</span> <span class="c1">// return $.fn.button to previously assigned value</span> -<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// give $().bootstrapBtn the Bootstrap functionality</span> -</code></pre></div> +<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">bootstrapBtn</span> <span class="o">=</span> <span class="nx">bootstrapButton</span> <span class="c1">// give $().bootstrapBtn the Bootstrap functionality</span></code></pre></div> <h3 id="js-events">Events</h3> - <p>Bootstrap provides custom events for most plugins' 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>Bootstrap provides custom events for most plugins' 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 triggered on the completion of an action.</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> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">data</span><span class="p">)</span> <span class="k">return</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="c1">// stops modal from being shown</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> <div class="bs-callout bs-callout-warning" id="callout-third-party-libs"> <h4>Third-party libraries</h4> @@ -168,10 +165,6 @@ </div> </div> - - -<!-- Transitions -================================================== --> <div class="bs-docs-section"> <h1 id="transitions" class="page-header">Transitions <small>transition.js</small></h1> @@ -181,10 +174,6 @@ <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> - - -<!-- Modal -================================================== --> <div class="bs-docs-section"> <h1 id="modals" class="page-header">Modals <small>modal.js</small></h1> @@ -211,7 +200,7 @@ <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> @@ -229,7 +218,7 @@ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span> - <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></button></span> + <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></button></span> <span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">></span>Modal title<span class="nt"></h4></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span> @@ -241,8 +230,7 @@ <span class="nt"></div></span> <span class="nt"></div></span><span class="c"><!-- /.modal-content --></span> <span class="nt"></div></span><span class="c"><!-- /.modal-dialog --></span> -<span class="nt"></div></span><span class="c"><!-- /.modal --></span> -</code></pre></div> +<span class="nt"></div></span><span class="c"><!-- /.modal --></span></code></pre></div> <h3>Live demo</h3> <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p> @@ -252,7 +240,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Modal Heading</h4> </div> <div class="modal-body"> @@ -302,7 +290,7 @@ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-dialog"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">></span> - <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></button></span> + <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></button></span> <span class="nt"><h4</span> <span class="na">class=</span><span class="s">"modal-title"</span> <span class="na">id=</span><span class="s">"myModalLabel"</span><span class="nt">></span>Modal title<span class="nt"></h4></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">></span> @@ -314,9 +302,7 @@ <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> -<span class="nt"></div></span> -</code></pre></div> - +<span class="nt"></div></span></code></pre></div> <div class="bs-callout bs-callout-warning"> <h4>Make modals accessible</h4> @@ -324,6 +310,11 @@ <p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p> </div> + <div class="bs-callout bs-callout-info"> + <h4>Embedding YouTube videos</h4> + <p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <a href="http://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p> + </div> + <h2 id="modals-sizes">Optional sizes</h2> <p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p> <div class="bs-example"> @@ -350,8 +341,7 @@ ... <span class="nt"></div></span> <span class="nt"></div></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <!-- Modal content for the above example --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> @@ -359,7 +349,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> </div> <div class="modal-body"> @@ -373,7 +363,7 @@ <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4> </div> <div class="modal-body"> @@ -383,19 +373,22 @@ </div><!-- /.modal-dialog --> </div><!-- /.modal --> + <h2 id="modals-remove-animation">Remove animation</h2> + <p>For modals that simply appear rather than fade in to view, remove the <code>.fade</code> class from your modal markup.</p> +<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"modal"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">role=</span><span class="s">"dialog"</span> <span class="na">aria-labelledby=</span><span class="s">""</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span> + ... +<span class="nt"></div></span></code></pre></div> <h2 id="modals-usage">Usage</h2> <p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.modal-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p> <h3>Via data attributes</h3> <p>Activate a modal without writing JavaScript. Set <code>data-toggle="modal"</code> on a controller element, like a button, along with a <code>data-target="#foo"</code> or <code>href="#foo"</code> to target a specific modal to toggle.</p> -<div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">></span>Launch modal<span class="nt"></button></span> -</code></pre></div> +<div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">data-target=</span><span class="s">"#myModal"</span><span class="nt">></span>Launch modal<span class="nt"></button></span></code></pre></div> <h3>Via JavaScript</h3> <p>Call a modal with id <code>myModal</code> with a single line of JavaScript:</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre></div> <h3>Options</h3> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-backdrop=""</code>.</p> @@ -433,8 +426,7 @@ <td>path</td> <td>false</td> <td><p>If a remote URL is provided, <strong>content will be loaded one time</strong> via jQuery's <code>load</code> method and injected into the <code>.modal-content</code> div. 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> -<div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">href=</span><span class="s">"remote.html"</span> <span class="na">data-target=</span><span class="s">"#modal"</span><span class="nt">></span>Click me<span class="nt"></a></span> -</code></pre></div> +<div class="highlight"><pre><code class="html"><span class="nt"><a</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">href=</span><span class="s">"remote.html"</span> <span class="na">data-target=</span><span class="s">"#modal"</span><span class="nt">></span>Click me<span class="nt"></a></span></code></pre></div> </td> </tr> </tbody> @@ -447,23 +439,19 @@ <p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">({</span> <span class="nx">keyboard</span><span class="o">:</span> <span class="kc">false</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> <h4>.modal('toggle')</h4> <p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.modal</code> or <code>hidden.bs.modal</code> event occurs).</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></div> <h4>.modal('show')</h4> <p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <code>shown.bs.modal</code> event occurs).</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></div> <h4>.modal('hide')</h4> <p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <code>hidden.bs.modal</code> event occurs).</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">modal</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></div> <h3>Events</h3> <p>Bootstrap's modal class exposes a few events for hooking into modal functionality.</p> @@ -501,14 +489,9 @@ </div><!-- /.table-responsive --> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myModal'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.modal'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// do something...</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> </div> - - -<!-- Dropdowns -================================================== --> <div class="bs-docs-section"> <h1 id="dropdowns" class="page-header">Dropdowns <small>dropdown.js</small></h1> @@ -531,7 +514,7 @@ <div class="collapse navbar-collapse bs-example-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> + <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></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> @@ -541,7 +524,7 @@ </ul> </li> <li class="dropdown"> - <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> + <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></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> @@ -553,7 +536,7 @@ </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> + <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></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> @@ -573,7 +556,7 @@ <ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> - <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> + <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></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> @@ -583,7 +566,7 @@ </ul> </li> <li class="dropdown"> - <a 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 <span class="caret"></span></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> @@ -593,7 +576,7 @@ </ul> </li> <li class="dropdown"> - <a 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 <span class="caret"></span></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> @@ -616,8 +599,7 @@ <span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dLabel"</span><span class="nt">></span> ... <span class="nt"></ul></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p> <div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span> <span class="nt"><a</span> <span class="na">id=</span><span class="s">"dLabel"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">data-target=</span><span class="s">"#"</span> <span class="na">href=</span><span class="s">"/page.html"</span><span class="nt">></span> @@ -628,13 +610,11 @@ <span class="nt"><ul</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span> <span class="na">role=</span><span class="s">"menu"</span> <span class="na">aria-labelledby=</span><span class="s">"dLabel"</span><span class="nt">></span> ... <span class="nt"></ul></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <h3>Via JavaScript</h3> <p>Call the dropdowns via JavaScript:</p> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.dropdown-toggle'</span><span class="p">).</span><span class="nx">dropdown</span><span class="p">()</span> -</code></pre></div> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.dropdown-toggle'</span><span class="p">).</span><span class="nx">dropdown</span><span class="p">()</span></code></pre></div> <div class="bs-callout bs-callout-info"> <h4><code>data-toggle="dropdown"</code> still required</h4> <p>Regardless of whether you call your dropdown via JavaScript or instead use the data-api, <code>data-toggle="dropdown"</code> is always required to be present on the dropdown's trigger element.</p> @@ -679,13 +659,9 @@ </div><!-- ./bs-table-responsive --> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myDropdown'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'show.bs.dropdown'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// do something…</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> </div> - -<!-- ScrollSpy -================================================== --> <div class="bs-docs-section"> <h1 id="scrollspy" class="page-header">ScrollSpy <small>scrollspy.js</small></h1> @@ -708,7 +684,7 @@ <li><a href="#fat">@fat</a></li> <li><a href="#mdo">@mdo</a></li> <li class="dropdown"> - <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#one" tabindex="-1">one</a></li> <li><a href="#two" tabindex="-1">two</a></li> @@ -739,36 +715,43 @@ <h2 id="scrollspy-usage">Usage</h2> + <h3>Requires relative positioning</h3> + <p>No matter the implementation method, scrollspy requires the use of <code>position: relative;</code> on the element you're spying on. In most cases this is the <code><body></code>.</p> + <h3>Via data attributes</h3> <p>To easily add scrollspy behavior to your topbar navigation, add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the <code><body></code>). Then add the <code>data-target</code> attribute with the ID or class of the parent element of any Bootstrap <code>.nav</code> component.</p> +<div class="highlight"><pre><code class="css"><span class="nt">body</span> <span class="p">{</span> + <span class="k">position</span><span class="o">:</span> <span class="k">relative</span><span class="p">;</span> +<span class="p">}</span></code></pre></div> <div class="highlight"><pre><code class="html"><span class="nt"><body</span> <span class="na">data-spy=</span><span class="s">"scroll"</span> <span class="na">data-target=</span><span class="s">".navbar-example"</span><span class="nt">></span> ... <span class="nt"><div</span> <span class="na">class=</span><span class="s">"navbar-example"</span><span class="nt">></span> - <span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">></span> + <span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span> ... <span class="nt"></ul></span> <span class="nt"></div></span> ... -<span class="nt"></body></span> -</code></pre></div> +<span class="nt"></body></span></code></pre></div> <h3>Via JavaScript</h3> - <p>Call the scrollspy via JavaScript:</p> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span> <span class="nx">target</span><span class="o">:</span> <span class="s1">'.navbar-example'</span> <span class="p">})</span> -</code></pre></div> + <p>After adding <code>position: relative;</code> in your CSS, call the scrollspy via JavaScript:</p> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">({</span> <span class="nx">target</span><span class="o">:</span> <span class="s1">'.navbar-example'</span> <span class="p">})</span></code></pre></div> <div class="bs-callout bs-callout-danger"> <h4>Resolvable ID targets required</h4> <p>Navbar links must have resolvable id targets. For example, a <code><a href="#home">home</a></code> must correspond to something in the DOM like <code><div id="home"></div></code>.</p> </div> + <div class="bs-callout bs-callout-info"> + <h4>Non-<code>:visible</code> target elements ignored</h4> + <p>Target elements that are not <a href="http://api.jquery.com/visible-selector/"><code>:visible</code> according to jQuery</a> will be ignored and their corresponding nav items will never be highlighted.</p> + </div> <h3>Methods</h3> <h4>.scrollspy('refresh')</h4> <p>When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'[data-spy="scroll"]'</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">$spy</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">scrollspy</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">)</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> <h3>Options</h3> @@ -813,28 +796,23 @@ </div><!-- ./bs-table-responsive --> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myScrollspy'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'activate.bs.scrollspy'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// do something…</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> </div> - - -<!-- Tabs -================================================== --> <div class="bs-docs-section"> <h1 id="tabs" class="page-header">Togglable tabs <small>tab.js</small></h1> <h2 id="tabs-examples">Example tabs</h2> <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p> <div class="bs-example bs-example-tabs"> - <ul id="myTab" class="nav nav-tabs"> - <li class="active"><a href="#home" data-toggle="tab">Home</a></li> - <li><a href="#profile" data-toggle="tab">Profile</a></li> + <ul id="myTab" class="nav nav-tabs" role="tablist"> + <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> + <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li class="dropdown"> - <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> - <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> - <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> + <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li> + <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li> </ul> </li> </ul> @@ -866,25 +844,23 @@ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a'</span><span class="p">).</span><span class="nx">click</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> <p>You can activate individual tabs in several ways:</p> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a[href="#profile"]'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select tab by name</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a:first'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select first tab</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a:last'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select last tab</span> -<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:eq(2) a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab (0-indexed)</span> -</code></pre></div> +<span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab li:eq(2) a'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="c1">// Select third tab (0-indexed)</span></code></pre></div> <h3>Markup</h3> <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p> <div class="highlight"><pre><code class="html"><span class="c"><!-- Nav tabs --></span> -<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">></span> - <span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></li></span> - <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></li></span> - <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></li></span> - <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></li></span> +<span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span><span class="nt">></span> + <span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></li></span> + <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></li></span> + <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></li></span> + <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="c"><!-- Tab panes --></span> @@ -893,8 +869,7 @@ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"profile"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"messages"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane"</span> <span class="na">id=</span><span class="s">"settings"</span><span class="nt">></span>...<span class="nt"></div></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <h3>Fade effect</h3> <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>. The first tab pane must also have <code>.in</code> to properly fade in initial content.</p> @@ -903,19 +878,18 @@ <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"profile"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"messages"</span><span class="nt">></span>...<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-pane fade"</span> <span class="na">id=</span><span class="s">"settings"</span><span class="nt">></span>...<span class="nt"></div></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <h3>Methods</h3> <h4>$().tab</h4> <p> Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM. </p> -<div class="highlight"><pre><code class="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">id=</span><span class="s">"myTab"</span><span class="nt">></span> - <span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></li></span> - <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></li></span> - <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></li></span> - <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></li></span> +<div class="highlight"><pre><code class="html"><span class="nt"><ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">role=</span><span class="s">"tablist"</span> <span class="na">id=</span><span class="s">"myTab"</span><span class="nt">></span> + <span class="nt"><li</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#home"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Home<span class="nt"></a></li></span> + <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#profile"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Profile<span class="nt"></a></li></span> + <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#messages"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Messages<span class="nt"></a></li></span> + <span class="nt"><li><a</span> <span class="na">href=</span><span class="s">"#settings"</span> <span class="na">role=</span><span class="s">"tab"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">></span>Settings<span class="nt"></a></li></span> <span class="nt"></ul></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">></span> @@ -929,8 +903,7 @@ <span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#myTab a:last'</span><span class="p">).</span><span class="nx">tab</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> <span class="p">})</span> -<span class="nt"></script></span> -</code></pre></div> +<span class="nt"></script></span></code></pre></div> <h3>Events</h3> <div class="table-responsive"> @@ -956,14 +929,9 @@ <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'a[data-toggle="tab"]'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'shown.bs.tab'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span> <span class="c1">// activated tab</span> <span class="nx">e</span><span class="p">.</span><span class="nx">relatedTarget</span> <span class="c1">// previous tab</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> </div> - - -<!-- Tooltips -================================================== --> <div class="bs-docs-section"> <h1 id="tooltips" class="page-header">Tooltips <small>tooltip.js</small></h1> @@ -990,8 +958,7 @@ <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Tooltip on bottom"</span><span class="nt">></span>Tooltip on bottom<span class="nt"></button></span> -<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">title=</span><span class="s">"Tooltip on right"</span><span class="nt">></span>Tooltip on right<span class="nt"></button></span> -</code></pre></div> +<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">title=</span><span class="s">"Tooltip on right"</span><span class="nt">></span>Tooltip on right<span class="nt"></button></span></code></pre></div> <div class="bs-callout bs-callout-danger"> <h4>Opt-in functionality</h4> @@ -1001,6 +968,10 @@ <h4>Tooltips in button groups and input groups require special setting</h4> <p>When using tooltips on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip is triggered).</p> </div> + <div class="bs-callout bs-callout-warning"> + <h4>Don't try to show tooltips on hidden elements</h4> + <p>Invoking <code>$(...).tooltip('show')</code> when the target element is <code>display: none;</code> will cause the tooltip to be incorrectly positioned.</p> + </div> <div class="bs-callout bs-callout-info"> <h4>Tooltips on disabled elements require wrapper elements</h4> <p>To add a tooltip to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the tooltip to that <code><div></code> instead.</p> @@ -1009,8 +980,7 @@ <h2 id="tooltips-usage">Usage</h2> <p>The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.</p> <p>Trigger the tooltip via JavaScript:</p> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> -</code></pre></div> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre></div> <h3>Markup</h3> <p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p> @@ -1022,13 +992,12 @@ <span class="lineno"> 2</span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Some tooltip text!"</span><span class="nt">></span>Hover over me<span class="nt"></a></span> <span class="lineno"> 3</span> <span class="lineno"> 4</span> <span class="c"><!-- Generated markup by the plugin --></span> -<span class="lineno"> 5</span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tooltip top"</span><span class="nt">></span> -<span class="lineno"> 6</span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tooltip-inner"</span><span class="nt">></span> -<span class="lineno"> 7</span> Some tooltip text! -<span class="lineno"> 8</span> <span class="nt"></div></span> -<span class="lineno"> 9</span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tooltip-arrow"</span><span class="nt">></div></span> -<span class="lineno">10</span> <span class="nt"></div></span> -</code></pre></div> +<span class="lineno"> 5</span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tooltip top"</span> <span class="na">role=</span><span class="s">"tooltip"</span><span class="nt">></span> +<span class="lineno"> 6</span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tooltip-arrow"</span><span class="nt">></div></span> +<span class="lineno"> 7</span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"tooltip-inner"</span><span class="nt">></span> +<span class="lineno"> 8</span> Some tooltip text! +<span class="lineno"> 9</span> <span class="nt"></div></span> +<span class="lineno">10</span> <span class="nt"></div></span></code></pre></div> <h3>Options</h3> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> @@ -1037,9 +1006,9 @@ <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 100px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 100px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> @@ -1047,7 +1016,25 @@ <td>animation</td> <td>boolean</td> <td>true</td> - <td>apply a CSS fade transition to the tooltip</td> + <td>Apply a CSS fade transition to the tooltip</td> + </tr> + <tr> + <td>container</td> + <td>string | false</td> + <td>false</td> + <td> + <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p> + </td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> + <p>If a number is supplied, delay is applied to both hide/show</p> + <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> + </td> </tr> <tr> <td>html</td> @@ -1059,42 +1046,43 @@ <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 placement 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>string</td> <td>false</td> - <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td> + <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> + </tr> + <tr> + <td>template</td> + <td>string</td> + <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td> + <td> + <p>Base HTML to use when creating the tooltip.</p> + <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p> + <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> + <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p> + </td> </tr> <tr> <td>title</td> <td>string | function</td> <td>''</td> - <td>default title value if <code>title</code> attribute isn't present</td> + <td>Default title value if <code>title</code> attribute isn't present</td> </tr> <tr> <td>trigger</td> <td>string</td> <td>'hover focus'</td> - <td>how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> + <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> </tr> <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> + <td>viewport</td> + <td>string | object</td> + <td>{ selector: 'body', padding: 0 }</td> <td> - <p>delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> - <p>If a number is supplied, delay is applied to both hide/show</p> - <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> - </td> - </tr> - <tr> - <td>container</td> - <td>string | false</td> - <td>false</td> - <td> - <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p> + <p>Keeps the tooltip within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ selector: '#viewport', padding: 0 }</code></p> </td> </tr> </tbody> @@ -1112,23 +1100,19 @@ <h4>.tooltip('show')</h4> <p>Reveals an element's tooltip.</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></div> <h4>.tooltip('hide')</h4> <p>Hides an element's tooltip.</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></div> <h4>.tooltip('toggle')</h4> <p>Toggles an element's tooltip.</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></div> <h4>.tooltip('destroy')</h4> <p>Hides and destroys an element's tooltip.</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">)</span></code></pre></div> <h3>Events</h3> <div class="table-responsive"> @@ -1161,12 +1145,9 @@ </div><!-- /.table-responsive --> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myTooltip'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.tooltip'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// do something…</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> </div> -<!-- Popovers -================================================== --> <div class="bs-docs-section"> <h1 id="popovers" class="page-header">Popovers <small>popover.js</small></h1> @@ -1185,6 +1166,10 @@ <h4>Popovers in button groups and input groups require special setting</h4> <p>When using popovers on elements within a <code>.btn-group</code> or an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> (documented below) to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the popover is triggered).</p> </div> + <div class="bs-callout bs-callout-warning"> + <h4>Don't try to show popovers on hidden elements</h4> + <p>Invoking <code>$(...).popover('show')</code> when the target element is <code>display: none;</code> will cause the popover to be incorrectly positioned.</p> + </div> <div class="bs-callout bs-callout-info"> <h4>Popovers on disabled elements require wrapper elements</h4> <p>To add a popover to a <code>disabled</code> or <code>.disabled</code> element, put the element inside of a <code><div></code> and apply the popover to that <code><div></code> instead.</p> @@ -1231,8 +1216,9 @@ <h3>Live demo</h3> <div class="bs-example" style="padding-bottom: 24px;"> - <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?" role="button">Click to toggle popover</a> + <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> </div> +<div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-danger"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">title=</span><span class="s">"Popover title"</span> <span class="na">data-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">></span>Click to toggle popover<span class="nt"></button></span></code></pre></div> <h4>Four directions</h4> <div class="bs-example tooltip-demo"> @@ -1266,8 +1252,17 @@ <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-container=</span><span class="s">"body"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">data-content=</span><span class="s">"Vivamus sagittis lacus vel augue laoreet rutrum faucibus."</span><span class="nt">></span> Popover on right -<span class="nt"></button></span> -</code></pre></div> +<span class="nt"></button></span></code></pre></div> + + <h4>Dismiss on next click</h4> + <p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p> + <div class="bs-example" style="padding-bottom: 24px;"> + <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button> + </div> +<div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-lg btn-danger popover-dismiss"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">title=</span><span class="s">"Dismissible popover"</span> <span class="na">data-content=</span><span class="s">"And here's some amazing content. It's very engaging. Right?"</span><span class="nt">></span>Dismissible popover<span class="nt"></button></span></code></pre></div> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.popover-dismiss'</span><span class="p">).</span><span class="nx">popover</span><span class="p">({</span> + <span class="nx">trigger</span><span class="o">:</span> <span class="s1">'focus'</span> +<span class="p">})</span></code></pre></div> <div class="bs-callout bs-callout-warning"> <h4>Multiple-line links</h4> @@ -1277,8 +1272,7 @@ <h2 id="popovers-usage">Usage</h2> <p>Enable popovers via JavaScript:</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#example'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span></code></pre></div> <h3>Options</h3> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p> @@ -1287,9 +1281,9 @@ <thead> <tr> <th style="width: 100px;">Name</th> - <th style="width: 100px;">type</th> - <th style="width: 50px;">default</th> - <th>description</th> + <th style="width: 100px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> </tr> </thead> <tbody> @@ -1297,7 +1291,34 @@ <td>animation</td> <td>boolean</td> <td>true</td> - <td>apply a CSS fade transition to the popover</td> + <td>Apply a CSS fade transition to the popover</td> + </tr> + <tr> + <td>container</td> + <td>string | false</td> + <td>false</td> + <td> + <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> + </td> + </tr> + <tr> + <td>content</td> + <td>string | function</td> + <td>''</td> + <td> + <p>Default content value if <code>data-content</code> attribute isn't present.</p> + <p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p> + </td> + </tr> + <tr> + <td>delay</td> + <td>number | object</td> + <td>0</td> + <td> + <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p> + <p>If a number is supplied, delay is applied to both hide/show</p> + <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> + </td> </tr> <tr> <td>html</td> @@ -1309,50 +1330,46 @@ <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 placement is "auto left", the popover 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 popover will display to the left when possible, otherwise it will display right.</td> </tr> <tr> <td>selector</td> <td>string</td> <td>false</td> - <td>if a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> + <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td> </tr> <tr> - <td>trigger</td> + <td>template</td> <td>string</td> - <td>'click'</td> - <td>how popover is triggered - click | hover | focus | manual</td> + <td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td> + <td> + <p>Base HTML to use when creating the popover.</p> + <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p> + <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p> + <p><code>.arrow</code> will become the popover's arrow.</p> + <p>The outermost wrapper element should have the <code>.popover</code> class.</p> + </td> </tr> <tr> <td>title</td> <td>string | function</td> <td>''</td> - <td>default title value if <code>title</code> attribute isn't present</td> + <td>Default title value if <code>title</code> attribute isn't present</td> </tr> <tr> - <td>content</td> - <td>string | function</td> - <td>''</td> - <td>default content value if <code>data-content</code> attribute isn't present</td> - </tr> - <tr> - <td>delay</td> - <td>number | object</td> - <td>0</td> - <td> - <p>delay showing and hiding the popover (ms) - does not apply to manual trigger type</p> - <p>If a number is supplied, delay is applied to both hide/show</p> - <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p> - </td> + <td>trigger</td> + <td>string</td> + <td>'click'</td> + <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td> </tr> <tr> - <td>container</td> - <td>string | false</td> - <td>false</td> - <td> - <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p> - </td> - </tr> + <td>viewport</td> + <td>string | object</td> + <td>{ selector: 'body', padding: 0 }</td> + <td> + <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ selector: '#viewport', padding: 0 }</code></p> + </td> + </tr> </tbody> </table> </div><!-- /.table-responsive --> @@ -1367,23 +1384,19 @@ <h4>.popover('show')</h4> <p>Reveals an elements popover.</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'show'</span><span class="p">)</span></code></pre></div> <h4>.popover('hide')</h4> <p>Hides an elements popover.</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'hide'</span><span class="p">)</span></code></pre></div> <h4>.popover('toggle')</h4> <p>Toggles an elements popover.</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'toggle'</span><span class="p">)</span></code></pre></div> <h4>.popover('destroy')</h4> <p>Hides and destroys an element's popover.</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#element'</span><span class="p">).</span><span class="nx">popover</span><span class="p">(</span><span class="s1">'destroy'</span><span class="p">)</span></code></pre></div> <h3>Events</h3> <div class="table-responsive"> <table class="table table-bordered table-striped"> @@ -1415,29 +1428,24 @@ </div><!-- /.table-responsive --> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myPopover'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.popover'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// do something…</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> </div> - - -<!-- Alert -================================================== --> <div class="bs-docs-section"> <h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1> <h2 id="alerts-examples">Example alerts</h2> <p>Add dismiss functionality to all alert messages with this plugin.</p> <div class="bs-example"> - <div class="alert alert-warning fade in"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <div class="alert alert-warning fade in" role="alert"> + <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></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-danger fade in"> - <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <div class="alert alert-danger fade in" role="alert"> + <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></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> @@ -1450,13 +1458,11 @@ <h2 id="alerts-usage">Usage</h2> <p>Enable dismissal of an alert via JavaScript:</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s2">".alert"</span><span class="p">).</span><span class="nx">alert</span><span class="p">()</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s2">".alert"</span><span class="p">).</span><span class="nx">alert</span><span class="p">()</span></code></pre></div> <h3>Markup</h3> <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p> - <div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></button></span> -</code></pre></div> + <div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span><span class="nt">><span</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">></span><span class="ni">&times;</span><span class="nt"></span><span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">></span>Close<span class="nt"></span></button></span></code></pre></div> <h3>Methods</h3> @@ -1465,8 +1471,7 @@ <h4>.alert('close')</h4> <p>Closes an alert.</p> - <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s2">".alert"</span><span class="p">).</span><span class="nx">alert</span><span class="p">(</span><span class="s1">'close'</span><span class="p">)</span> -</code></pre></div> + <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s2">".alert"</span><span class="p">).</span><span class="nx">alert</span><span class="p">(</span><span class="s1">'close'</span><span class="p">)</span></code></pre></div> <h3>Events</h3> @@ -1491,16 +1496,11 @@ </tbody> </table> </div><!-- /.table-responsive --> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#my-alert'</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'closed.bs.alert'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#my-alert'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'closed.bs.alert'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// do something…</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> </div> - - -<!-- Buttons -================================================== --> <div class="bs-docs-section"> <h1 id="buttons" class="page-header">Buttons <small>button.js</small></h1> @@ -1525,23 +1525,25 @@ <span class="nx">btn</span><span class="p">.</span><span class="nx">button</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">)</span> <span class="p">});</span> <span class="p">});</span> -<span class="nt"></script></span> -</code></pre></div> +<span class="nt"></script></span></code></pre></div> <h4>Single toggle</h4> <p>Add <code>data-toggle="button"</code> to activate toggling on a single button.</p> <div class="bs-example" style="padding-bottom: 24px;"> <button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button> </div><!-- /example --> -<div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"button"</span><span class="nt">></span>Single toggle<span class="nt"></button></span> -</code></pre></div> +<div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"button"</span><span class="nt">></span>Single toggle<span class="nt"></button></span></code></pre></div> <h4>Checkbox</h4> <p>Add <code>data-toggle="buttons"</code> to a group of checkboxes for checkbox style toggling on btn-group.</p> + <div class="bs-callout bs-callout-warning"> + <h4>Pre-checked options need <code>.active</code></h4> + <p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p> + </div> <div class="bs-example" style="padding-bottom: 24px;"> <div class="btn-group" data-toggle="buttons"> - <label class="btn btn-primary"> - <input type="checkbox"> Option 1 + <label class="btn btn-primary active"> + <input type="checkbox" checked> Option 1 (pre-checked) </label> <label class="btn btn-primary"> <input type="checkbox"> Option 2 @@ -1552,8 +1554,8 @@ </div> </div><!-- /example --> <div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span> - <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span> - <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span> Option 1 + <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-primary active"</span><span class="nt">></span> + <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span><span class="nt">></span> Option 1 (pre-checked) <span class="nt"></label></span> <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span> Option 2 @@ -1561,15 +1563,18 @@ <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">></span> Option 3 <span class="nt"></label></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <h4>Radio</h4> <p>Add <code>data-toggle="buttons"</code> to a group of radio inputs for radio style toggling on btn-group.</p> + <div class="bs-callout bs-callout-warning"> + <h4>Preselected options need <code>.active</code></h4> + <p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p> + </div> <div class="bs-example" style="padding-bottom: 24px;"> <div class="btn-group" data-toggle="buttons"> - <label class="btn btn-primary"> - <input type="radio" name="options" id="option1"> Option 1 + <label class="btn btn-primary active"> + <input type="radio" name="options" id="option1" checked> Option 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Option 2 @@ -1580,8 +1585,8 @@ </div> </div><!-- /example --> <div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-group"</span> <span class="na">data-toggle=</span><span class="s">"buttons"</span><span class="nt">></span> - <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span> - <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span><span class="nt">></span> Option 1 + <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-primary active"</span><span class="nt">></span> + <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option1"</span> <span class="na">checked</span><span class="nt">></span> Option 1 (preselected) <span class="nt"></label></span> <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option2"</span><span class="nt">></span> Option 2 @@ -1589,14 +1594,12 @@ <span class="nt"><label</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span> <span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"options"</span> <span class="na">id=</span><span class="s">"option3"</span><span class="nt">></span> Option 3 <span class="nt"></label></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <h2 id="buttons-usage">Usage</h2> <p>Enable buttons via JavaScript:</p> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.btn'</span><span class="p">).</span><span class="nx">button</span><span class="p">()</span> -</code></pre></div> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.btn'</span><span class="p">).</span><span class="nx">button</span><span class="p">()</span></code></pre></div> <h3>Markup</h3> <p>Data attributes are integral to the button plugin. Check out the example code below for the various markup types.</p> @@ -1612,8 +1615,7 @@ <h4>Auto toggling</h4> <p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p> </div> -<div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"button"</span><span class="nt">></span>...<span class="nt"></button></span> -</code></pre></div> +<div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-toggle=</span><span class="s">"button"</span><span class="nt">></span>...<span class="nt"></button></span></code></pre></div> <h4>$().button('loading')</h4> <p>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 <code>data-loading-text</code>. @@ -1627,12 +1629,11 @@ <span class="nx">btn</span><span class="p">.</span><span class="nx">button</span><span class="p">(</span><span class="s1">'reset'</span><span class="p">)</span> <span class="p">});</span> <span class="p">});</span> -<span class="nt"></script></span> -</code></pre></div> +<span class="nt"></script></span></code></pre></div> <div class="bs-callout bs-callout-danger"> <h4>Cross-browser compatibility</h4> - <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p> + <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p> </div> <h4>$().button('reset')</h4> @@ -1643,14 +1644,9 @@ <div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-complete-text=</span><span class="s">"finished!"</span> <span class="nt">></span>...<span class="nt"></button></span> <span class="nt"><script></span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.btn'</span><span class="p">).</span><span class="nx">button</span><span class="p">(</span><span class="s1">'complete'</span><span class="p">)</span> -<span class="nt"></script></span> -</code></pre></div> +<span class="nt"></script></span></code></pre></div> </div> - - -<!-- Collapse -================================================== --> <div class="bs-docs-section"> <h1 id="collapse" class="page-header">Collapse <small>collapse.js</small></h1> @@ -1754,16 +1750,14 @@ <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <p>You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.</p> <div class="highlight"><pre><code class="html"><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span> <span class="na">data-toggle=</span><span class="s">"collapse"</span> <span class="na">data-target=</span><span class="s">"#demo"</span><span class="nt">></span> simple collapsible <span class="nt"></button></span> -<span class="nt"><div</span> <span class="na">id=</span><span class="s">"demo"</span> <span class="na">class=</span><span class="s">"collapse in"</span><span class="nt">></span>...<span class="nt"></div></span> -</code></pre></div> +<span class="nt"><div</span> <span class="na">id=</span><span class="s">"demo"</span> <span class="na">class=</span><span class="s">"collapse in"</span><span class="nt">></span>...<span class="nt"></div></span></code></pre></div> <h2 id="collapse-usage">Usage</h2> @@ -1781,8 +1775,7 @@ <h3>Via JavaScript</h3> <p>Enable manually with:</p> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.collapse'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">()</span> -</code></pre></div> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.collapse'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">()</span></code></pre></div> <h3>Options</h3> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-parent=""</code>.</p> @@ -1819,8 +1812,7 @@ <p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>. <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapsible'</span><span class="p">).</span><span class="nx">collapse</span><span class="p">({</span> <span class="nx">toggle</span><span class="o">:</span> <span class="kc">false</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> <h4>.collapse('toggle')</h4> <p>Toggles a collapsible element to shown or hidden.</p> @@ -1865,14 +1857,9 @@ </div><!-- /.table-responsive --> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCollapsible'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'hidden.bs.collapse'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// do something…</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> </div> - - -<!-- Carousel -================================================== --> <div class="bs-docs-section"> <h1 id="carousel" class="page-header">Carousel <small>carousel.js</small></h1> @@ -1896,10 +1883,10 @@ <img 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"> + <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> - <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> @@ -1920,18 +1907,23 @@ ... <span class="nt"></div></span> <span class="nt"></div></span> + <span class="nt"><div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">></span> + <span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span> + <span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-caption"</span><span class="nt">></span> + ... + <span class="nt"></div></span> + <span class="nt"></div></span> ... <span class="nt"></div></span> <span class="c"><!-- Controls --></span> - <span class="nt"><a</span> <span class="na">class=</span><span class="s">"left carousel-control"</span> <span class="na">href=</span><span class="s">"#carousel-example-generic"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">></span> + <span class="nt"><a</span> <span class="na">class=</span><span class="s">"left carousel-control"</span> <span class="na">href=</span><span class="s">"#carousel-example-generic"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-chevron-left"</span><span class="nt">></span></span> <span class="nt"></a></span> - <span class="nt"><a</span> <span class="na">class=</span><span class="s">"right carousel-control"</span> <span class="na">href=</span><span class="s">"#carousel-example-generic"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">></span> + <span class="nt"><a</span> <span class="na">class=</span><span class="s">"right carousel-control"</span> <span class="na">href=</span><span class="s">"#carousel-example-generic"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"glyphicon glyphicon-chevron-right"</span><span class="nt">></span></span> <span class="nt"></a></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <div class="bs-callout bs-callout-warning" id="callout-carousel-transitions"> <h4>Transition animations not supported in Internet Explorer 8 & 9</h4> @@ -1970,22 +1962,21 @@ </div> </div> </div> - <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev"> + <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> - <a class="right carousel-control" href="#carousel-example-captions" data-slide="next"> + <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div><!-- /example --> -<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"item active"</span><span class="nt">></span> +<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"item"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"carousel-caption"</span><span class="nt">></span> <span class="nt"><h3></span>...<span class="nt"></h3></span> <span class="nt"><p></span>...<span class="nt"></p></span> <span class="nt"></div></span> -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <div class="bs-callout bs-callout-danger"> <h4>Accessibility issue</h4> @@ -1995,7 +1986,7 @@ <h2 id="carousel-usage">Usage</h2> <h3>Multiple carousels</h3> - <p>Carousels require the use of an <code>id</code> on the outermost container, <code>.carousel</code>, for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p> + <p>Carousels require the use of an <code>id</code> on the outermost container (the <code>.carousel</code>) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's <code>id</code>, be sure to update the relevant controls.</p> <h3>Via data attributes</h3> <p>Use data attributes to easily control the position of the carousel. <code>data-slide</code> accepts the keywords <code>prev</code> or <code>next</code>, which alters the slide position relative to its current position. Alternatively, use <code>data-slide-to</code> to pass a raw slide index to the carousel <code>data-slide-to="2"</code>, which shifts the slide position to a particular index beginning with <code>0</code>.</p> @@ -2003,8 +1994,7 @@ <h3>Via JavaScript</h3> <p>Call carousel manually with:</p> -<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.carousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">()</span> -</code></pre></div> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.carousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">()</span></code></pre></div> <h3>Options</h3> <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-interval=""</code>.</p> @@ -2047,8 +2037,7 @@ <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'.carousel'</span><span class="p">).</span><span class="nx">carousel</span><span class="p">({</span> <span class="nx">interval</span><span class="o">:</span> <span class="mi">2000</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> <h4>.carousel('cycle')</h4> <p>Cycles through the carousel items from left to right.</p> @@ -2068,6 +2057,11 @@ <h3>Events</h3> <p>Bootstrap's carousel class exposes two events for hooking into carousel functionality.</p> + <p>Both events have the following additional properties:</p> + <ul> + <li><code>direction</code>: The direction in which the carousel is sliding (either <code>"left"</code> or <code>"right"</code>).</li> + <li><code>relatedTarget</code>: The DOM element that is being slid into place as the active item.</li> + </ul> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> @@ -2090,14 +2084,9 @@ </div><!-- /.table-responsive --> <div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#myCarousel'</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s1">'slide.bs.carousel'</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="c1">// do something…</span> -<span class="p">})</span> -</code></pre></div> +<span class="p">})</span></code></pre></div> </div> - - -<!-- Affix -================================================== --> <div class="bs-docs-section"> <h1 id="affix" class="page-header">Affix <small>affix.js</small></h1> @@ -2107,7 +2096,7 @@ <hr class="bs-docs-separator"> <h2 id="affix-usage">Usage</h2> - <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong>In both situations, you must provide CSS for the positioning of your content.</strong></p> + <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p> <h3>Positioning via CSS</h3> <p>The affix plugin toggles between three classes, each representing a particular state: <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) to handle the actual positions.</p> @@ -2124,20 +2113,18 @@ <div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">data-spy=</span><span class="s">"affix"</span> <span class="na">data-offset-top=</span><span class="s">"60"</span> <span class="na">data-offset-bottom=</span><span class="s">"200"</span><span class="nt">></span> ... -<span class="nt"></div></span> -</code></pre></div> +<span class="nt"></div></span></code></pre></div> <h3>Via JavaScript</h3> <p>Call the affix plugin via JavaScript:</p> -<div class="highlight"><pre><code class="js"> <span class="nx">$</span><span class="p">(</span><span class="s1">'#my-affix'</span><span class="p">).</span><span class="nx">affix</span><span class="p">({</span> +<div class="highlight"><pre><code class="js"><span class="nx">$</span><span class="p">(</span><span class="s1">'#my-affix'</span><span class="p">).</span><span class="nx">affix</span><span class="p">({</span> <span class="nx">offset</span><span class="o">:</span> <span class="p">{</span> <span class="nx">top</span><span class="o">:</span> <span class="mi">100</span> <span class="p">,</span> <span class="nx">bottom</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">bottom</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'.footer'</span><span class="p">).</span><span class="nx">outerHeight</span><span class="p">(</span><span class="kc">true</span><span class="p">))</span> <span class="p">}</span> <span class="p">}</span> - <span class="p">})</span> -</code></pre></div> + <span class="p">})</span></code></pre></div> <h3>Options</h3> @@ -2160,6 +2147,13 @@ <td>10</td> <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td> </tr> + <tr> + <td>target</td> + <td>selector | node | jQuery element</td> + <td>the <code>window</code> object</td> + <td>Specifies the target element of the affix.</td> + </tr> + </tbody> </table> </div><!-- /.table-responsive --> @@ -2203,12 +2197,12 @@ </tbody> </table> </div><!-- /.table-responsive --> - </div> + </div> <div class="col-md-3"> - <div class="bs-docs-sidebar hidden-print" role="complementary"> + <div class="bs-docs-sidebar hidden-print hidden-xs hidden-sm" role="complementary"> <ul class="nav bs-docs-sidenav"> <li> @@ -2219,6 +2213,7 @@ <li><a href="#js-programmatic-api">Programmatic API</a></li> <li><a href="#js-noconflict">No conflict</a></li> <li><a href="#js-events">Events</a></li> + <li><a href="#callout-third-party-libs">Third-party libraries</a></li> </ul> </li> <li><a href="#transitions">Transitions</a></li> @@ -2227,6 +2222,7 @@ <ul class="nav"> <li><a href="#modals-examples">Examples</a></li> <li><a href="#modals-sizes">Sizes</a></li> + <li><a href="#modals-remove-animation">Remove animation</a></li> <li><a href="#modals-usage">Usage</a></li> </ul> </li> @@ -2306,10 +2302,14 @@ <a class="back-to-top" href="#top"> Back to top </a> + + <a href="#" class="bs-docs-theme-toggle"> + Preview theme + </a> + </div> </div> </div> - </div> <!-- Footer @@ -2338,7 +2338,7 @@ <p>Maintained by the <a href="https://github.com/twbs?tab=members">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p> <p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p> <ul class="bs-docs-footer-links muted"> - <li>Currently v3.1.1</li> + <li>Currently v3.2.0</li> <li>·</li> <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li> <li>·</li> @@ -2362,7 +2362,7 @@ <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> -<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> +<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="../dist/js/bootstrap.min.js"></script> <script src="../assets/js/docs.min.js"></script> |