<p><spanclass="label notice">Notice</span> 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).</p>
<p><spanclass="label notice">Notice</span> 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).</p>
<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>Activates your content as a modal. Accepts an optional options <code>object</code>.</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>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>
<p><spanclass="label notice">Notice</span> Navbar anchor tags 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><spanclass="label notice">Notice</span> Navbar anchor tags 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>
<pclass="lead">Bring Bootstrap's components to life—now with 12 custom <ahref="http://jquery.com/"target="_blank">jQuery</a> plugins.
<pclass="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <ahref="http://jquery.com/"target="_blank">jQuery</a> plugins.{{/i}}
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</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>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>
<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>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.</p>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images, uss CSS3 for animations, and data-attributes for local title storage.{{/i}}</p>
<aid="selectAll"href="#"style="float:right">Select/Unselect All Plugins</a>
<aid="selectAll"href="#"style="float:right">{{_i}}Select/Unselect All Plugins{{/i}}</a>
<pclass="muted"><spanclass="label warning">Note:</span> All plugins require the latest version of <ahref="http://jquery.com/"target="_blank">jQuery</a> to be included.</p>
<pclass="muted">{{_i}}<spanclass="label warning">Note:</span> All plugins require the latest version of <ahref="http://jquery.com/"target="_blank">jQuery</a> to be included.{{/i}}</p>
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</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>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
<h4>Popover in a modal</h4>
<h4>{{_i}}Popover in a modal{{/i}}</h4>
<p>This <ahref="#"class="btn"rel="popover"title="A Title"data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.</p>
<p>{{_i}}This <ahref="#"class="btn"rel="popover"title="A Title"data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on hover.{{/i}}</p>
<h4>Tooltips in a modal</h4>
<h4>{{_i}}Tooltips in a modal{{/i}}</h4>
<p><ahref="#"class="tooltip-test"title="Tooltip">This link</a> and <ahref="#"class="tooltip-test"title="Tooltip">that link</a> should have tooltips on hover.</p>
<p>{{_i}}<ahref="#"class="tooltip-test"title="Tooltip">This link</a> and <ahref="#"class="tooltip-test"title="Tooltip">that link</a> should have tooltips on hover.{{/i}}</p>
<td>{{_i}}Includes a modal-backdrop element{{/i}}</td>
</tr>
</tr>
<tr>
<tr>
<td>keyboard</td>
<td>{{_i}}keyboard{{/i}}</td>
<td>boolean</td>
<td>{{_i}}boolean{{/i}}</td>
<td>true</td>
<td>{{_i}}true{{/i}}</td>
<td>Closes the modal when escape key is pressed</td>
<td>{{_i}}Closes the modal when escape key is pressed{{/i}}</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
<h3>Markup</h3>
<h3>{{_i}}Markup{{/i}}</h3>
<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>{{_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.</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>
<p><spanclass="label notice">Notice</span> 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).</p>
<p>{{_i}}<spanclass="label notice">Notice</span> 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).{{/i}}</p>
<h3>Methods</h3>
<h3{{_i}}>Methods{{/i}}</h3>
<h4>.modal(options)</h4>
<h4>.modal({{_i}}options{{/i}})</h4>
<p>Activates your content as a modal. Accepts an optional options <code>object</code>.
<p>{{_i}}Activates your content as a modal. Accepts an optional options <code>object</code>.{{/i}}</p>
<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>
<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>
<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>
<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>
<p><spanclass="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.</p>
<p>{{_i}}<spanclass="label notice">Notice</span> For added control and flexibility, optionally specify a <code>data-target="#fat"</code> or <code>href="#fat"</code> - this allows you to target specific dropdowns.{{/i}}</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>{{_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>
<p><spanclass="label notice">Notice</span> Navbar anchor tags 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>{{_i}}<spanclass="label notice">Notice</span> Navbar anchor tags 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}}</p>
<h3>Options</h3>
<h3>{{_i}}Options{{/i}}</h3>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<thead>
<thead>
<tr>
<tr>
<thstyle="width: 100px;">Name</th>
<thstyle="width: 100px;">{{_i}}Name{{/i}}</th>
<thstyle="width: 100px;">type</th>
<thstyle="width: 100px;">{{_i}}type{{/i}}</th>
<thstyle="width: 50px;">default</th>
<thstyle="width: 50px;">{{_i}}default{{/i}}</th>
<th>description</th>
<th>{{_i}}description{{/i}}</th>
</tr>
</tr>
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>offset</td>
<td>{{_i}}offset{{/i}}</td>
<td>number</td>
<td>{{_i}}number{{/i}}</td>
<td>10</td>
<td>{{_i}}10{{/i}}</td>
<td>Pixels to offset from top when calculating position of scroll.</td>
<td>{{_i}}Pixels to offset from top when calculating position of scroll.{{/i}}</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
...
@@ -515,21 +513,21 @@ $('#myModal').on('hidden', function () {
...
@@ -515,21 +513,21 @@ $('#myModal').on('hidden', function () {
<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.</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.{{/i}}</p>
@@ -589,22 +587,22 @@ $('#myModal').on('hidden', function () {
...
@@ -589,22 +587,22 @@ $('#myModal').on('hidden', function () {
})
})
</script></pre>
</script></pre>
</p>
</p>
<h3>Events</h3>
<h3>{{_i}}Events{{/i}}</h3>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<thead>
<thead>
<tr>
<tr>
<thstyle="width: 150px;">Event</th>
<thstyle="width: 150px;">{{_i}}Event{{/i}}</th>
<th>Description</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</tr>
</thead>
</thead>
<tbody>
<tbody>
<tr>
<tr>
<td>show</td>
<td>{{_i}}show{{/i}}</td>
<td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
<td>{{_i}}This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.{{/i}}</td>
</tr>
</tr>
<tr>
<tr>
<td>shown</td>
<td>{{_i}}shown{{/i}}</td>
<td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
<td>{{_i}}This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.{{/i}}</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
...
@@ -623,41 +621,41 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -623,41 +621,41 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.</p>
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.{{/i}}</p>
