<h1>Dropdown menus <small>Dropdown and dropup menus for contextual actions</small></h1>
</div>
<h2>Example</h2>
<p>An isolated (without dropdown toggle) dropdown menu example, designed to be used with the <ahref="./javascript.html#dropdowns">dropdown javascript plugin</a>.</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>
<p>You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
<p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.</p>
<strong>Heads up!</strong> If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.
</div>
<h3>Methods</h3>
<h3>Methods</h3>
<h4>.modal(options)</h4>
<h4>.modal(options)</h4>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.</p>
...
@@ -355,12 +358,11 @@ $('#myModal').on('hidden', function () {
...
@@ -355,12 +358,11 @@ $('#myModal').on('hidden', function () {
<p>Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.</p>
<h2>Examples</h2>
<h2>Examples</h2>
<p>Click on the dropdown nav links in the navbar and pills below to test dropdowns.</p>
<p>Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.</p>
<p>To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.</p>
<divclass="alert alert-info">
<strong>Heads up!</strong> You may optionally target a specific dropdown by using <code>data-target="#fat"</code> or <code>href="#fat"</code>.
</div>
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</p>
<h2>Example navbar with scrollspy</h2>
<h2>Example in navbar</h2>
<p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!</p>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<h4id="mdo">@mdo</h4>
<h4id="mdo">@mdo</h4>
<p>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
</p>
<h4id="one">one</h4>
<h4id="one">one</h4>
<p>
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
</p>
<h4id="two">two</h4>
<h4id="two">two</h4>
<p>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
</p>
<h4id="three">three</h4>
<h4id="three">three</h4>
<p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</p>
</div>
</div>
</div>
</div>
<hr>
<h2>Using bootstrap-scrollspy.js</h2>
<hrclass="bs-docs-separator">
<h2>Usage</h2>
<h3>Via data attributes</h3>
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use.</p>
<p>To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).</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>.
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>.
</div>
</div>
<h3>Methods</h3>
<h3>Methods</h3>
<h4>.scrollspy('refresh')</h4>
<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>
<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>
<p>Enable tabbable tabs via javascript (each tab needs to be activated individually):</p>
<p>Enable tabbable tabs via javascript (each tab needs to be activated individually):</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
$('#myTab a').click(function (e) {
$('#myTab a').click(function (e) {
...
@@ -659,6 +655,7 @@ $('#myTab a:first').tab('show'); // Select first tab
...
@@ -659,6 +655,7 @@ $('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
</pre>
</pre>
<h3>Markup</h3>
<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 tab styling.</p>
<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 tab styling.</p>
@@ -803,6 +807,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -803,6 +807,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<strong>Heads up!</strong>
<strong>Heads up!</strong>
Options for individual tooltips can alternatively be specified through the use of data attributes.
Options for individual tooltips can alternatively be specified through the use of data attributes.
</div>
</div>
<h3>Markup</h3>
<h3>Markup</h3>
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
<p>For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
...
@@ -842,9 +847,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -842,9 +847,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<ahref="#"class="btn btn-danger"rel="popover"title="A Title"data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
<ahref="#"class="btn btn-danger"rel="popover"title="A Title"data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
<p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
@@ -1193,6 +1220,7 @@ $('#my-alert').bind('closed', function () {
...
@@ -1193,6 +1220,7 @@ $('#my-alert').bind('closed', function () {
<strong>Heads up!</strong>
<strong>Heads up!</strong>
To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.
To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.
</div>
</div>
<h3>Methods</h3>
<h3>Methods</h3>
<h4>.collapse(options)</h4>
<h4>.collapse(options)</h4>
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
<p>Activates your content as a collapsible element. Accepts an optional options <code>object</code>.
<h1>{{_i}}Dropdown menus{{/i}}<small>{{_i}}Dropdown and dropup menus for contextual actions{{/i}}</small></h1>
</div>
<h2>{{_i}}Example{{/i}}</h2>
<p>{{_i}}An isolated (without dropdown toggle) dropdown menu example, designed to be used with the <ahref="./javascript.html#dropdowns">dropdown javascript plugin</a>.{{/i}}</p>
<p>{{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
<p>{{_i}}Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.{{/i}}</p>
<h3>{{_i}}Static example{{/i}}</h3>
<h3>{{_i}}Static example{{/i}}</h3>
<p>{{_i}}A rendered modal with header, body, and set of actions in the footer.{{/i}}</p>
<p>{{_i}}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.{{/i}}</p>
<p>{{_i}}You can activate modals on your page easily without having to write a single line of javascript. Just set <code>data-toggle="modal"</code> on a controller element with a <code>data-target="#foo"</code> or <code>href="#foo"</code> which corresponds to a modal element id, and when clicked, it will launch your modal.</p>
<p>Also, to add options to your modal instance, just include them as additional data attributes on either the control element or the modal markup itself.{{/i}}</p>
<strong>{{_i}}Heads up!{{/i}}</strong>{{_i}}If you want your modal to animate in and out, just add a <code>.fade</code> class to the <code>.modal</code> element (refer to the demo to see this in action) and include bootstrap-transition.js.{{/i}}
</div>
<h3{{_i}}>Methods{{/i}}</h3>
<h3{{_i}}>Methods{{/i}}</h3>
<h4>.modal({{_i}}options{{/i}})</h4>
<h4>.modal({{_i}}options{{/i}})</h4>
<p>{{_i}}Activates your content as a modal. Accepts an optional options <code>object</code>.{{/i}}</p>
<p>{{_i}}Activates your content as a modal. Accepts an optional options <code>object</code>.{{/i}}</p>
...
@@ -280,12 +283,11 @@ $('#myModal').on('hidden', function () {
...
@@ -280,12 +283,11 @@ $('#myModal').on('hidden', function () {
<p>{{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}</p>
<h2>{{_i}}Examples{{/i}}</h2>
<h2>{{_i}}Examples{{/i}}</h2>
<p>{{_i}}Click on the dropdown nav links in the navbar and pills below to test dropdowns.{{/i}}</p>
<p>{{_i}}Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.{{/i}}</p>
<p>{{_i}}To quickly add dropdown functionality to any element just add <code>data-toggle="dropdown"</code> and any valid bootstrap dropdown will automatically be activated.{{/i}}</p>
<divclass="alert alert-info">
<strong>{{_i}}Heads up!{{/i}}</strong>{{_i}} You may optionally target a specific dropdown by using <code>data-target="#fat"</code> or <code>href="#fat"</code>.{{/i}}
</div>
<h2>{{_i}}Usage{{/i}}</h2>
<h3>{{_i}}Via data attributes{{/i}}</h3>
<p>{{_i}}Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.{{/i}}</p>
<p>{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position.{{/i}}</p>
<h2>{{_i}}Example navbar with scrollspy{{/i}}</h2>
<h2>{{_i}}Example in navbar{{/i}}</h2>
<p>{{_i}}Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try it!{{/i}}</p>
<p>{{_i}}The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.{{/i}}</p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<h4id="mdo">@mdo</h4>
<h4id="mdo">@mdo</h4>
<p>
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
</p>
<h4id="one">one</h4>
<h4id="one">one</h4>
<p>
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
</p>
<h4id="two">two</h4>
<h4id="two">two</h4>
<p>
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
</p>
<h4id="three">three</h4>
<h4id="three">three</h4>
<p>
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
</p>
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
</p>
</p>
</div>
</div>
</div>{{! /example }}
</div>{{! /example }}
<hr>
<h2>{{_i}}Using bootstrap-scrollspy.js{{/i}}</h2>
<hrclass="bs-docs-separator">
<h2>{{_i}}Usage{{/i}}</h2>
<h3>{{_i}}Via data attributes{{/i}}</h3>
<p>{{_i}}To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body) and <code>data-target=".navbar"</code> to select which nav to use.{{/i}}</p>
<p>{{_i}}To easily add scrollspy behavior to your topbar navigation, just add <code>data-spy="scroll"</code> to the element you want to spy on (most typically this would be the body).{{/i}}</p>
{{_i}}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>.{{/i}}
{{_i}}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>.{{/i}}
</div>
</div>
<h3>{{_i}}Methods{{/i}}</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>.scrollspy('refresh')</h4>
<h4>.scrollspy('refresh')</h4>
<p>{{_i}}When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}</p>
<p>{{_i}}When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}</p>
<p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p>
<p>{{_i}}Enable tabbable tabs via javascript (each tab needs to be activated individually):{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
$('#myTab a').click(function (e) {
$('#myTab a').click(function (e) {
...
@@ -584,6 +580,7 @@ $('#myTab a:first').tab('show'); // Select first tab
...
@@ -584,6 +580,7 @@ $('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
</pre>
</pre>
<h3>{{_i}}Markup{{/i}}</h3>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}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 tab styling.{{/i}}</p>
<p>{{_i}}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 tab styling.{{/i}}</p>
@@ -728,6 +732,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -728,6 +732,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<strong>{{_i}}Heads up!{{/i}}</strong>
<strong>{{_i}}Heads up!{{/i}}</strong>
{{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}}
{{_i}}Options for individual tooltips can alternatively be specified through the use of data attributes.{{/i}}
</div>
</div>
<h3>{{_i}}Markup{{/i}}</h3>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
...
@@ -767,9 +772,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -767,9 +772,14 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<ahref="#"class="btn btn-danger"rel="popover"title="A Title"data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
<ahref="#"class="btn btn-danger"rel="popover"title="A Title"data-content="And here's some amazing content. It's very engaging. right?">{{_i}}hover for popover{{/i}}</a>
</div>
</div>
<h2>{{_i}}Using bootstrap-popover.js{{/i}}</h2>
<hrclass="bs-docs-separator">
<h2>{{_i}}Usage{{/i}}</h2>
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
<p>{{_i}}Enable popovers via javascript:{{/i}}</p>
@@ -839,10 +849,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -839,10 +849,9 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<strong>{{_i}}Heads up!{{/i}}</strong>
<strong>{{_i}}Heads up!{{/i}}</strong>
{{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
{{_i}}Options for individual popovers can alternatively be specified through the use of data attributes.{{/i}}
</div>
</div>
<h3>{{_i}}Markup{{/i}}</h3>
<h3>{{_i}}Markup{{/i}}</h3>
<p>
<p>{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}</p>
{{_i}}For performance reasons, the Tooltip and Popover data-apis are opt in. If you would like to use them just specify a selector option.{{/i}}
</p>
<h3>{{_i}}Methods{{/i}}</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>$().popover({{_i}}options{{/i}})</h4>
<h4>$().popover({{_i}}options{{/i}})</h4>
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
<p>{{_i}}Initializes popovers for an element collection.{{/i}}</p>
...
@@ -889,18 +898,25 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -889,18 +898,25 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
</div>
</div>
</div>{{! /example }}
</div>{{! /example }}
<h2>{{_i}}Using bootstrap-alert.js{{/i}}</h2>
<hrclass="bs-docs-separator">
<h2>{{_i}}Usage{{/i}}</h2>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
<p>{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.{{/i}}</p>
<p>{{_i}}Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.{{/i}}</p>
@@ -1118,6 +1145,7 @@ $('#my-alert').bind('closed', function () {
...
@@ -1118,6 +1145,7 @@ $('#my-alert').bind('closed', function () {
<strong>{{_i}}Heads up!{{/i}}</strong>
<strong>{{_i}}Heads up!{{/i}}</strong>
{{_i}}To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.{{/i}}
{{_i}}To add accordion-like group management to a collapsible control, add the data attribute <code>data-parent="#selector"</code>. Refer to the demo to see this in action.{{/i}}
</div>
</div>
<h3>{{_i}}Methods{{/i}}</h3>
<h3>{{_i}}Methods{{/i}}</h3>
<h4>.collapse({{_i}}options{{/i}})</h4>
<h4>.collapse({{_i}}options{{/i}})</h4>
<p>{{_i}}Activates your content as a collapsible element. Accepts an optional options <code>object</code>.{{/i}}
<p>{{_i}}Activates your content as a collapsible element. Accepts an optional options <code>object</code>.{{/i}}
