<h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1>
<divclass="page-header">
</div>
<h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1>
<divclass="row">
</div>
<divclass="span3">
<divclass="row">
<h2>Getting started</h2>
<divclass="span3">
<p>Integrating javascript with the Bootstrap library is super easy. Here we go over the basics and provide you with some awesome plugins to get you started!</p>
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p>
<divclass="span9">
<pclass="muted"><strong>*</strong> Required for animation in plugins</p>
<h3>What's included</h3>
</div>
<p>Bring some of Bootstrap's primary components to life with custom <ahref="http://jquery.com/"target="_blank">jQuery</a> plugins. We encourage you to extend and modify them to fit your specific development needs.</p>
<divclass="span3">
<tableclass="bordered-table striped-table">
<h3><ahref="#modal">Modals</a></h3>
<thead>
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
<tr>
</div>
<thstyle="width: 150px;">File</th>
<divclass="span3">
<th>Description</th>
<h3><ahref="#dropdown">Dropdowns</a></h3>
</tr>
<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>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
<td>The transition plugin is required for adding animation to other bootstrap plugins. Include this plugin (only once) when sliding in modals or fading out alerts.</td>
<td>Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require here at twitter.</td>
<h3><ahref="#tab">Togglable tabs</a></h3>
</tr>
<p>Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.</p>
<p>The alert plugin is a tiny class for adding close functionality to alerts.</p>
<td>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, data-attributes for local title storage, and now jquery 1.7's new event api!</td>
<td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <ahref="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td>
<h3><ahref="#button">Buttons</a></h3>
</tr>
<p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
<td>A plugin for rotating through elements. A merry-go-round.</td>
<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>
<td>A basic, easily extended plugin for quickly creating elegant typeaheads.</td>
</tr>
</tbody>
</table>
<h3>Is javascript necessary?</h3>
<p><strong>Nope!</strong> Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.</p>
<p>However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.</p>