Commit cb38d08e authored by Mark Otto's avatar Mark Otto
Browse files

updated js docs page to use grid of plugins instead of table

parent 6226b14e
Showing with 68 additions and 80 deletions
+68 -80
...@@ -50,89 +50,77 @@ ...@@ -50,89 +50,77 @@
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Javascript for Bootstrap</h1> <h1>Javascript for Bootstrap</h1>
<p class="lead">Bring Bootstrap's components to life &mdash; now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. <p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
</header> </header>
<!-- Using Javascript w/ Bootstrap
================================================== --> <!-- Using Javascript w/ Bootstrap
================================================== -->
<section id="javascript">
<div class="page-header"> <section id="javascript">
<h1>Using javascript with Bootstrap <small>An index of plugins to get you started</small></h1> <div class="page-header">
</div> <h1>jQuery plugins <small>A dozen Bootstrap plugins to get you started</small></h1>
<div class="row"> </div>
<div class="span3"> <div class="row">
<h2>Getting started</h2> <div class="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> <h3><a href="#transition">Transitions</a> <small class="muted">*</small></h3>
</div> <p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alert messages.</p>
<div class="span9"> <p class="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 <a href="http://jquery.com/" target="_blank">jQuery</a> plugins. We encourage you to extend and modify them to fit your specific development needs.</p> <div class="span3">
<table class="bordered-table striped-table"> <h3><a href="#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>
<th style="width: 150px;">File</th> <div class="span3">
<th>Description</th> <h3><a href="#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>
</thead> </div>
<tbody> <div class="span3">
<tr> <h3><a href="#scrollspy">Scrollspy</a></h3>
<td><a href="./javascript.html#transition">bootstrap-transition.js</a></td> <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> </div>
</tr> </div> <!-- /row -->
<tr> <div class="row">
<td><a href="./javascript.html#modal">bootstrap-modal.js</a></td> <div class="span3">
<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><a href="#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>
<tr> </div>
<td><a href="./javascript.html#dropdown">bootstrap-dropdown.js</a></td> <div class="span3">
<td>This plugin is for adding generic dropdown interactions to things like navigation top bars and tabs.</td> <h3><a href="#twipsy">Twipsy tooltips</a></h3>
</tr> <p>A new take on the jQuery Tipsy plugin, Twipsy uses CSS3 animations, data attributes for titles, and the new event API in jQuery 1.7.</p>
<tr> </div>
<td><a href="./javascript.html#scrollspy">bootstrap-scrollspy.js</a></td> <div class="span3">
<td>The ScrollSpy plugin is for automatically updating nav targets based on scroll position.</td> <h3><a href="#popover">Popovers</a> <small class="muted">*</small></h3>
</tr> <p>Add small overlays of content, like those on the iPad, to any element for housing secondary information.</p>
<tr> <p class="muted"><strong>*</strong> Requires <a href="#twipsy">Twipsy</a> to be included</p>
<td><a href="./javascript.html#tab">bootstrap-tab.js</a></td> </div>
<td>This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.</td> <div class="span3">
<tr> <h3><a href="#alert">Alert messages</a></h3>
<td><a href="./javascript.html#twipsy">bootstrap-twipsy.js</a></td> <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> </div>
</tr> </div> <!-- /row -->
<tr> <div class="row">
<td><a href="./javascript.html#popover">bootstrap-popover.js</a></td> <div class="span3">
<td>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">bootstrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</td> <h3><a href="#button">Buttons</a></h3>
</tr> <p>Do more with buttons. Control button states or create groups of buttons for more components like toolbars.</p>
</tr> </div>
<tr> <div class="span3">
<td><a href="./javascript.html#alert">bootstrap-alert.js</a></td> <h3><a href="#button">Collapse</a></h3>
<td>The alert plugin is a tiny class for adding close functionality to alerts.</td> <p>Get base styles and flexible support for collapsible components like accordions and navigation.</p>
</tr> </div>
<tr> <div class="span3">
<td><a href="./javascript.html#button">bootstrap-button.js</a></td> <h3><a href="#button">Carousel</a></h3>
<td>This plugin offers additional functionality for managing button state in single buttons and button sets.</td> <p>Create a merry-go-round of any content you wish to provide an interactive slideshow of content.</p>
</tr> </div>
<tr> <div class="span3">
<td><a href="./javascript.html#collapse">bootstrap-collapse.js</a></td> <h3><a href="#button">Typeahead</a></h3>
<td>The collapse plugin offers simple, generic collapsible element support for making accordions and other collapsible ui components.</td> <p>A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.</p>
</tr> </div>
<tr> </div> <!-- /row -->
<td><a href="./javascript.html#carousel">bootstrap-carousel.js</a></td> <hr>
<td>A plugin for rotating through elements. A merry-go-round.</td> <p class="muted"><span class="label warning">Note:</span> All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</tr> </section>
<tr>
<td><a href="./javascript.html#typeahead">bootstrap-typeahead.js</a></td>
<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>
</div>
</div>
</section>
<!-- Modal <!-- Modal
......
Supports Markdown
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