Skip to content

B
bootstrap
Commit af470f4c authored by Mark Otto's avatar Mark Otto
Browse files
Options

more content and nav twerks

parent 361c776e
Show whitespace changes
Inline Side-by-side
Showing with 1715 additions and 1688 deletions
docs/_includes/docs-nav.html
View file @ af470f4c
...@@ -79,20 +79,63 @@ ...@@ -79,20 +79,63 @@
<li><a href="#navs">Navs</a></li> <li><a href="#navs">Navs</a></li>
<li><a href="#navbar">Navbar</a></li> <li><a href="#navbar">Navbar</a></li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li> <li><a href="#breadcrumbs">Breadcrumbs</a></li>
<li><a href="#pagination">Pagination</a></li> <li>
<a href="#pagination">Pagination</a>
<ul class="nav">
<li><a href="#pagination-default">Default pagination</a></li>
<li><a href="#pagination-pager">Pager</a></li>
</ul>
</li>
<li><a href="#labels">Labels</a></li> <li><a href="#labels">Labels</a></li>
<li><a href="#badges">Badges</a></li> <li><a href="#badges">Badges</a></li>
<li><a href="#typography-components">Typography</a></li> <li>
<a href="#type-components">Typography</a>
<ul class="nav">
<li><a href="#type-components-jumbotron">Jumbotron</a></li>
<li><a href="#type-components-page-header">Page header</a></li>
</ul>
</li>
<li><a href="#thumbnails">Thumbnails</a></li> <li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li> <li>
<li><a href="#progress">Progress bars</a></li> <a href="#alerts">Alerts</a>
<ul class="nav">
<li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-block">Block alerts</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li>
</ul>
</li>
<li>
<a href="#progress">Progress bars</a>
<ul class="nav">
<li><a href="#progress-basic">Basic progress bar</a></li>
<li><a href="#progress-alternatives">Contextual alternatives</a></li>
<li><a href="#progress-striped">Striped</a></li>
<li><a href="#progress-animated">Animated</a></li>
<li><a href="#progress-stacked">Stacked</a></li>
</ul>
</li>
<li><a href="#media">Media object</a></li> <li><a href="#media">Media object</a></li>
<li><a href="#wells">Wells</a></li> <li><a href="#wells">Wells</a></li>
<li><a class="nav-header" href="#js">JavaScript</a></li> <li><a class="nav-header" href="#js">JavaScript</a></li>
<li><a href="#js-overview">Overview</a></li> <li>
<a href="#js-overview">Overview</a>
<ul class="nav">
<li><a href="#js-individual-compiled">Individual or compiled</a></li>
<li><a href="#js-data-attributes">Data attributes</a></li>
<li><a href="#js-programmatic-api">Programmatic API</a></li>
<li><a href="#js-noconflict">No Conflict</a></li>
<li><a href="#js-events">Evens</a></li>
</ul>
</li>
<li><a href="#transitions">Transitions</a></li> <li><a href="#transitions">Transitions</a></li>
<li><a href="#modals">Modal</a></li> <li>
<a href="#modals">Modal</a>
<ul class="nav">
<li><a href="#modals-examples">Examples</a></li>
<li><a href="#modals-usage">Usage</a></li>
</ul>
</li>
<li><a href="#dropdowns">Dropdown</a></li> <li><a href="#dropdowns">Dropdown</a></li>
<li><a href="#scrollspy">Scrollspy</a></li> <li><a href="#scrollspy">Scrollspy</a></li>
<li><a href="#tabs">Tab</a></li> <li><a href="#tabs">Tab</a></li>
......
docs/docs.html
View file @ af470f4c
...@@ -2244,7 +2244,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2244,7 +2244,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Icons <!-- Icons
================================================== --> ================================================== -->
<section id="icons"> <div class="bs-docs-section" id="icons">
<div class="page-header"> <div class="page-header">
<h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1> <h1>Icons font <small>by <a href="http://glyphicons.com" target="_blank">Glyphicons</a></small></h1>
</div> </div>
...@@ -2548,14 +2548,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2548,14 +2548,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
</section> </div>
<!-- Dropdowns <!-- Dropdowns
================================================== --> ================================================== -->
<section id="dropdowns"> <div class="bs-docs-section" id="dropdowns">
<div class="page-header"> <div class="page-header">
<h1>Dropdown menus</h1> <h1>Dropdown menus</h1>
</div> </div>
...@@ -2702,14 +2701,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2702,14 +2701,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</section> </div>
<!-- Button Groups <!-- Button Groups
================================================== --> ================================================== -->
<section id="buttonGroups"> <div class="bs-docs-section" id="buttonGroups">
<div class="page-header"> <div class="page-header">
<h1>Button groups</h1> <h1>Button groups</h1>
</div> </div>
...@@ -2791,13 +2789,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -2791,13 +2789,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
</section> </div>
<!-- Split button dropdowns <!-- Split button dropdowns
================================================== --> ================================================== -->
<section id="buttonDropdowns"> <div class="bs-docs-section" id="buttonDropdowns">
<div class="page-header"> <div class="page-header">
<h1>Button dropdown menus</h1> <h1>Button dropdown menus</h1>
</div> </div>
...@@ -3062,13 +3060,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3062,13 +3060,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
</section> </div>
<!-- Navs <!-- Navs
================================================== --> ================================================== -->
<section id="navs"> <div class="bs-docs-section" id="navs">
<div class="page-header"> <div class="page-header">
<h1>Navs</small></h1> <h1>Navs</small></h1>
</div> </div>
...@@ -3261,13 +3259,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3261,13 +3259,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</section> </div>
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<section id="navbar"> <div class="bs-docs-section" id="navbar">
<div class="page-header"> <div class="page-header">
<h1>Navbar</h1> <h1>Navbar</h1>
</div> </div>
...@@ -3572,13 +3570,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3572,13 +3570,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
</section> </div>
<!-- Breadcrumbs <!-- Breadcrumbs
================================================== --> ================================================== -->
<section id="breadcrumbs"> <div class="bs-docs-section" id="breadcrumbs">
<div class="page-header"> <div class="page-header">
<h1>Breadcrumbs <small></small></h1> <h1>Breadcrumbs <small></small></h1>
</div> </div>
...@@ -3605,21 +3603,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3605,21 +3603,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li class="active">Data</li> <li class="active">Data</li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div>
</section>
<!-- Pagination <!-- Pagination
================================================== --> ================================================== -->
<section id="pagination"> <div class="bs-docs-section" id="pagination">
<div class="page-header"> <div class="page-header">
<h1>Pagination</h1> <h1>Pagination</h1>
</div> </div>
<p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="./components.html#pagination-pager">pager alternative</a>.</p> <p class="lead">Provide pagination links for your site or app with the multi-page pagination component, or the simpler <a href="./components.html#pagination-pager">pager alternative</a>.</p>
<h2>Standard pagination</h2> <h2 id="pagination-default">Standard pagination</h2>
<p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p> <p>Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<ul class="pagination"> <ul class="pagination">
...@@ -3778,15 +3774,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3778,15 +3774,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<li class="next"><a href="#">Newer &rarr;</a></li> <li class="next"><a href="#">Newer &rarr;</a></li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div>
</section>
<!-- Labels <!-- Labels
================================================== --> ================================================== -->
<section id="labels"> <div class="bs-docs-section" id="labels">
<div class="page-header"> <div class="page-header">
<h1>Labels</h1> <h1>Labels</h1>
</div> </div>
...@@ -3858,13 +3852,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3858,13 +3852,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</tbody> </tbody>
</table> </table>
</section> </div>
<!-- Badges <!-- Badges
================================================== --> ================================================== -->
<section id="badges"> <div class="bs-docs-section" id="badges">
<div class="page-header"> <div class="page-header">
<h1>Badges</h1> <h1>Badges</h1>
</div> </div>
...@@ -3916,19 +3910,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3916,19 +3910,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
... ...
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div>
</section>
<!-- Typographic components <!-- Typographic components
================================================== --> ================================================== -->
<section id="typography-components"> <div class="bs-docs-section" id="type-components">
<div class="page-header"> <div class="page-header">
<h1>Typographic components</h1> <h1>Typographic components</h1>
</div> </div>
<h2>Jumbotron</h2> <h2 id="type-components-jumbotron">Jumbotron</h2>
<p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p> <p>A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="jumbotron"> <div class="jumbotron">
...@@ -3945,7 +3938,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3945,7 +3938,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h2>Page header</h2> <h2 id="type-components-page-header">Page header</h2>
<p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p> <p>A simple shell for an <code>h1</code> to appropriately space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="page-header"> <div class="page-header">
...@@ -3957,14 +3950,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -3957,14 +3950,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1>Example page header <small>Subtext for header</small></h1> <h1>Example page header <small>Subtext for header</small></h1>
</div> </div>
{% endhighlight %} {% endhighlight %}
</div>
</section>
<!-- Thumbnails <!-- Thumbnails
================================================== --> ================================================== -->
<section id="thumbnails"> <div class="bs-docs-section" id="thumbnails">
<div class="page-header"> <div class="page-header">
<h1>Thumbnails</h1> <h1>Thumbnails</h1>
</div> </div>
...@@ -4057,22 +4049,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4057,22 +4049,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
</div> </div>
{% endhighlight %} {% endhighlight %}
</div>
</section>
<!-- Alerts <!-- Alerts
================================================== --> ================================================== -->
<section id="alerts"> <div class="bs-docs-section" id="alerts">
<div class="page-header"> <div class="page-header">
<h1>Alerts</h1> <h1>Alerts</h1>
</div> </div>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p> <p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="./javascript.html#alerts">alerts jQuery plugin</a>.</p>
<h3>Default alert</h3> <h3 id="alerts-default">Default alert</h3>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p> <p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message. <strong>To ensure proper behavior across all devices</strong>, be sure to use <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="alert"> <div class="alert">
...@@ -4087,7 +4077,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4087,7 +4077,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3>Block alerts</h3> <h3 id="alerts-block">Block alerts</h3>
<p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p> <p>For longer messages, increase the padding on the top and bottom of the alert wrapper by adding <code>.alert-block</code>.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="alert alert-block"> <div class="alert alert-block">
...@@ -4104,7 +4094,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4104,7 +4094,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3>Contextual alternatives</h3> <h3 id="alerts-alternatives">Contextual alternatives</h3>
<p>Add optional classes to change an alert's connotation.</p> <p>Add optional classes to change an alert's connotation.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="alert alert-error"> <div class="alert alert-error">
...@@ -4125,14 +4115,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4125,14 +4115,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="alert alert-success">...</div> <div class="alert alert-success">...</div>
<div class="alert alert-info">...</div> <div class="alert alert-info">...</div>
{% endhighlight %} {% endhighlight %}
</section> </div>
<!-- Progress bars <!-- Progress bars
================================================== --> ================================================== -->
<section id="progress"> <div class="bs-docs-section" id="progress">
<div class="page-header"> <div class="page-header">
<h1>Progress bars</h1> <h1>Progress bars</h1>
</div> </div>
...@@ -4140,7 +4130,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4140,7 +4130,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.</p> <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.</p>
<h3>Basic</h3> <h3 id="progress-basic">Basic</h3>
<p>Default progress bar with a vertical gradient.</p> <p>Default progress bar with a vertical gradient.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress"> <div class="progress">
...@@ -4153,7 +4143,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4153,7 +4143,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3>Additional colors</h3> <h3 id="progress-alternatives">Contextual alternatives</h3>
<p>Progress bars use some of the same button and alert classes for consistent styles.</p> <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress" style="margin-bottom: 9px;"> <div class="progress" style="margin-bottom: 9px;">
...@@ -4184,7 +4174,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4184,7 +4174,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3>Striped</h3> <h3 id="progress-striped">Striped</h3>
<p>Uses a gradient to create a striped effect. Not available in IE8.</p> <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-striped" style="margin-bottom: 9px;"> <div class="progress progress-striped" style="margin-bottom: 9px;">
...@@ -4215,7 +4205,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4215,7 +4205,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3>Animated</h3> <h3 id="progress-animated">Animated</h3>
<p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p> <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress progress-striped active"> <div class="progress progress-striped active">
...@@ -4228,7 +4218,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4228,7 +4218,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
{% endhighlight %} {% endhighlight %}
<h3>Stacked</h3> <h3 id="progress-stacked">Stacked</h3>
<p>Place multiple bars into the same <code>.progress</code> to stack them.</p> <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">
<div class="progress"> <div class="progress">
...@@ -4244,15 +4234,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4244,15 +4234,14 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="progress-bar progress-bar-danger" style="width: 10%"></div> <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div> </div>
{% endhighlight %} {% endhighlight %}
</div>
</section>
<!-- Media object <!-- Media object
================================================== --> ================================================== -->
<section id="media"> <div class="bs-docs-section" id="media">
<div class="page-header"> <div class="page-header">
<h1>Media object</h1> <h1>Media object</h1>
</div> </div>
...@@ -4368,8 +4357,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4368,8 +4357,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</li> </li>
</ul> </ul>
{% endhighlight %} {% endhighlight %}
</div>
</section>
...@@ -4377,7 +4365,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4377,7 +4365,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Wells <!-- Wells
================================================== --> ================================================== -->
<div id="wells"> <div class="bs-docs-section" id="wells">
<div class="page-header"> <div class="page-header">
<h1>Wells</h1> <h1>Wells</h1>
</div> </div>
...@@ -4411,7 +4399,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4411,7 +4399,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html linenos %} {% highlight html linenos %}
<div class="well well-small">...</div> <div class="well well-small">...</div>
{% endhighlight %} {% endhighlight %}
</div> </div>
...@@ -4426,15 +4413,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline. ...@@ -4426,15 +4413,15 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Overview <!-- Overview
================================================== --> ================================================== -->
<section class="bs-docs-section" id="js-overview"> <div class="bs-docs-section" id="js-overview">
<div class="page-header"> <div class="page-header">
<h1>Overview</h1> <h1>Overview</h1>
</div> </div>
<h3>Individual or compiled</h3> <h3 id="js-individual-compiled">Individual or compiled</h3>
<p>Plugins can be included individually (though some have required dependencies), or all at once. <strong>Do attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p> <p>Plugins can be included individually (though some have required dependencies), or all at once. <strong>Do attempt to include both.</strong> Both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all plugins in a single file.</p>
<h3>Data attributes</h3> <h3 id="js-data-attrs">Data attributes</h3>
<p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p> <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: <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 body namespaced with `'data-api'`. This looks like this:
...@@ -4447,7 +4434,7 @@ $('body').off('.data-api') ...@@ -4447,7 +4434,7 @@ $('body').off('.data-api')
$('body').off('.alert.data-api') $('body').off('.alert.data-api')
{% endhighlight %} {% endhighlight %}
<h3>Programmatic API</h3> <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> <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>
{% highlight js linenos %} {% highlight js linenos %}
$(".btn.danger").button("toggle").addClass("fat") $(".btn.danger").button("toggle").addClass("fat")
...@@ -4462,15 +4449,14 @@ $("#myModal").modal('show') // initializes and invokes show immed ...@@ -4462,15 +4449,14 @@ $("#myModal").modal('show') // initializes and invokes show immed
<p>Each plugin also exposes its raw constructor on a `Constructor` 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 `Constructor` 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>No conflict</h3> <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> <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
{% highlight js linenos %} {% highlight js linenos %}
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the bootstrap functionality
{% endhighlight %} {% endhighlight %}
<h3 id="js-events">Events</h3>
<h3>Events</h3>
<p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p> <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
<p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p> <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
{% highlight js linenos %} {% highlight js linenos %}
...@@ -4478,14 +4464,13 @@ $('#myModal').on('show', function (e) { ...@@ -4478,14 +4464,13 @@ $('#myModal').on('show', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown if (!data) return e.preventDefault() // stops modal from being shown
}) })
{% endhighlight %} {% endhighlight %}
</div>
</section>
<!-- Transitions <!-- Transitions
================================================== --> ================================================== -->
<section id="transitions"> <div class="bs-docs-section" id="transitions">
<div class="page-header"> <div class="page-header">
<h1>Transitions <small>bootstrap-transition.js</small></h1> <h1>Transitions <small>bootstrap-transition.js</small></h1>
</div> </div>
...@@ -4501,19 +4486,18 @@ $('#myModal').on('show', function (e) { ...@@ -4501,19 +4486,18 @@ $('#myModal').on('show', function (e) {
</ul> </ul>
<!-- Ideas: include docs for .fade.in, .slide.in, etc --> <!-- Ideas: include docs for .fade.in, .slide.in, etc -->
</section> </div>
<!-- Modal <!-- Modal
================================================== --> ================================================== -->
<section id="modals"> <div class="bs-docs-section" id="modals">
<div class="page-header"> <div class="page-header">
<h1>Modals <small>bootstrap-modal.js</small></h1> <h1>Modals <small>bootstrap-modal.js</small></h1>
</div> </div>
<h2 id="modals-examples">Examples</h2>
<h2>Examples</h2>
<p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p> <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
<h3>Static example</h3> <h3>Static example</h3>
...@@ -4626,7 +4610,7 @@ $('#myModal').on('show', function (e) { ...@@ -4626,7 +4610,7 @@ $('#myModal').on('show', function (e) {
<h2>Usage</h2> <h2 id="modals-usage">Usage</h2>
<h3>Via data attributes</h3> <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> <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>
...@@ -4735,7 +4719,7 @@ $('#myModal').on('hidden', function () { ...@@ -4735,7 +4719,7 @@ $('#myModal').on('hidden', function () {
// do something… // do something…
}) })
{% endhighlight %} {% endhighlight %}
</section> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment