<pclass="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<pclass="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
<divclass="subnav">
<ulclass="nav nav-pills">
<li><ahref="#typography">Typography</a></li>
<li><ahref="#code">Code</a></li>
<li><ahref="#tables">Tables</a></li>
<li><ahref="#forms">Forms</a></li>
<li><ahref="#buttons">Buttons</a></li>
<li><ahref="#icons">Icons by Glyphicons</a></li>
</ul>
</div>
</header>
</header>
...
@@ -448,19 +424,6 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -448,19 +424,6 @@ For example, <code>section</code> should be wrapped as inline.
</pre>
</pre>
<p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
<p><strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
<h2>Google Prettify</h2>
<p>Take the same <code><pre></code> element and add two optional classes for enhanced rendering.</p>
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>
</pre>
<p><ahref="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <ahref="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.</p>
</section>
</section>
...
@@ -472,148 +435,8 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -472,148 +435,8 @@ For example, <code>section</code> should be wrapped as inline.
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
<h1>Tables <small>For, you guessed it, tabular data</small></h1>
</div>
</div>
<h2>Table markup</h2>
<h2>Default styles</h2>
<p>For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>.</p>
<tableclass="table table-bordered table-striped">
<colgroup>
<colclass="span1">
<colclass="span7">
</colgroup>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code><table></code>
</td>
<td>
Wrapping element for displaying data in a tabular format
</td>
</tr>
<tr>
<td>
<code><thead></code>
</td>
<td>
Container element for table header rows (<code><tr></code>) to label table columns
</td>
</tr>
<tr>
<td>
<code><tbody></code>
</td>
<td>
Container element for table rows (<code><tr></code>) in the body of the table
</td>
</tr>
<tr>
<td>
<code><tr></code>
</td>
<td>
Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row
</td>
</tr>
<tr>
<td>
<code><td></code>
</td>
<td>
Default table cell
</td>
</tr>
<tr>
<td>
<code><th></code>
</td>
<td>
Special table cell for column (or row, depending on scope and placement) labels<br>
Must be used within a <code><thead></code>
</td>
</tr>
<tr>
<td>
<code><caption></code>
</td>
<td>
Description or summary of what the table holds, especially useful for screen readers
</td>
</tr>
</tbody>
</table>
<preclass="prettyprint linenums">
<table>
<thead>
<tr>
<th>…</th>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
</table>
</pre>
<h2>Table options</h2>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<tdclass="muted">None</td>
<td>No styles, just columns and rows</td>
</tr>
<tr>
<td>Basic</td>
<td>
<code>.table</code>
</td>
<td>Only horizontal lines between rows</td>
</tr>
<tr>
<td>Bordered</td>
<td>
<code>.table-bordered</code>
</td>
<td>Rounds corners and adds outer border</td>
</tr>
<tr>
<td>Zebra-stripe</td>
<td>
<code>.table-striped</code>
</td>
<td>Adds light gray background color to odd rows (1, 3, 5, etc)</td>
</tr>
<tr>
<td>Condensed</td>
<td>
<code>.table-condensed</code>
</td>
<td>Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements</td>
</tr>
</tbody>
</table>
<h2>Example tables</h2>
<h3>1. Default table styles</h3>
<p>Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<tableclass="table">
<tableclass="table">
<thead>
<thead>
...
@@ -652,9 +475,15 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -652,9 +475,15 @@ For example, <code>section</code> should be wrapped as inline.
</table>
</table>
</pre>
</pre>
<h3>2. Striped table</h3>
<p>Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.</p>
<hrclass="bs-docs-separator">
<pclass="muted"><strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.</p>
<h2>Optional classes</h2>
<p>Add any of the follow classes to the <code>.table</code> base class.</p>
<h3><code>.table-striped</code></h3>
<p>Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<tableclass="table table-striped">
<tableclass="table table-striped">
<thead>
<thead>
...
@@ -693,9 +522,8 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -693,9 +522,8 @@ For example, <code>section</code> should be wrapped as inline.
</table>
</table>
</pre>
</pre>
<h3><code>.table-bordered</code></h3>
<h3>3. Bordered table</h3>
<p>Add borders and rounded corners to the table.</p>
<p>Add borders around the entire table and rounded corners for aesthetic purposes.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<tableclass="table table-bordered">
<tableclass="table table-bordered">
<thead>
<thead>
...
@@ -738,8 +566,8 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -738,8 +566,8 @@ For example, <code>section</code> should be wrapped as inline.
</table>
</table>
</pre>
</pre>
<h3>4. Condensed table</h3>
<h3><code>.table-condensed</code></h3>
<p>Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).</p>
<p>Makes tables more compact by cutting cell padding in half.</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<tableclass="table table-condensed">
<tableclass="table table-condensed">
<thead>
<thead>
...
@@ -778,48 +606,96 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -778,48 +606,96 @@ For example, <code>section</code> should be wrapped as inline.
</pre>
</pre>
<h3>5. Combine them all!</h3>
<hrclass="bs-docs-separator">
<p>Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.</p>
@@ -834,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -834,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline.
<h1>Forms</h1>
<h1>Forms</h1>
</div>
</div>
<h2>Controls and layouts</h2>
<h2>Default styles</h2>
<p>Forms include styles for all the base form controls like <code>input</code>, <code>textarea</code>, and <code>select</code> you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.</p>
<p>Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
<p>Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.</p>
<p>Error, warning, and success states are included for form controls, as wel as disabled.</p>
@@ -928,201 +774,273 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -928,201 +774,273 @@ For example, <code>section</code> should be wrapped as inline.
</form>
</form>
</pre>
</pre>
<br>
<h3>Horizontal form</h3>
<p>Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:</p>
<h2>Horizontal forms</h2>
<p>Shown on the right are all the default form controls we support. Here's the bulleted list:</p>
<ul>
<ul>
<li>text inputs (text, password, email, etc)</li>
<li>Add <code>.form-horizontal</code> to the form</li>
<li>checkbox</li>
<li>Wrap labels and controls in <code>.control-group</code></li>
<li>radio</li>
<li>Add <code>.control-label</code> to the label</li>
<li>select</li>
<li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
<p>Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.</p>
<p>Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<hr>
<h3>Form validation</h3>
<h2>Supported form controls</h2>
<p>It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.</p>
<p>Examples of standard form controls supported in an example form layout.</p>
<h3>Inputs</h3>
<p>Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.</p>
<p>Requires the use of a specified <code>type</code> at all times.</p>
<p>Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.</p>
</div>
<hr>
</pre>
<h3>Checkboxes and radios</h3>
<p>Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.</p>
<h3>Control sizing</h3>
<p>Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.</p>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.</p>
<hr>
<h4>Inline forms and append/prepend</h4>
<h4>Relative sizing</h4>
<p>To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.</p>
<p>To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.</p>
<pclass="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
<p>Present data in a form that's not editable without using actual form markup.</p>
<formclass="bs-docs-example">
<spanclass="input-xlarge uneditable-input">Some value here</span>
</form>
<preclass="prettyprint linenums">
<span class="input-xlarge uneditable-input">Some value here</span>
</pre>
<h3>Form actions</h3>
<p>End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.</p>
<p>Inline and block level support for help text that appears around form controls.</p>
<h4>Inline help</h4>
<formclass="bs-docs-example form-inline">
<inputtype="text"><spanclass="help-inline">Inline help text</span>
</form>
<preclass="prettyprint linenums">
<span class="help-inline">Inline help text</span>
</pre>
<h4>Block help</h4>
<formclass="bs-docs-example form-inline">
<inputtype="text">
<spanclass="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
<preclass="prettyprint linenums">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</pre>
<hrclass="bs-docs-separator"></hr>
<h2>Form control states</h2>
<p>Provide feedback to users or visitors with basic feedback states on form controls and labels.</p>
<h3>Input focus</h3>
<p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
<formclass="bs-docs-example form-inline">
<inputclass="input-xlarge focused"id="focusedInput"type="text"value="This is focused...">
</form>
<preclass="prettyprint linenums">
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
</pre>
<h3>Disabled inputs</h3>
<p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
<p>Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p>
<formclass="bs-docs-example form-horizontal">
<divclass="control-group warning">
<labelclass="control-label"for="inputWarning">Input with warning</label>
@@ -1263,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1263,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline.
<divclass="page-header">
<divclass="page-header">
<h1>Buttons</h1>
<h1>Buttons</h1>
</div>
</div>
<h2>Default buttons</h2>
<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements for the best rendering.</p>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<thead>
<thead>
<tr>
<tr>
...
@@ -1310,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1310,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline.
</tbody>
</tbody>
</table>
</table>
<h3>Buttons for actions</h3>
<h4>Cross browser compatibility</h4>
<p>As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.</p>
<p>Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements.</p>
<h3>Cross browser compatibility</h3>
<p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
<p>IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.</p>
<h3>Multiple sizes</h3>
<hrclass="bs-docs-separator">
<h2>Button sizes</h2>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
<p>Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.</p>
<p>For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.</p>
<hrclass="bs-docs-separator">
<p>
<h2>Disabled state</h2>
<p>Make buttons look unclickable by fading them back 50%.</p>
<h3>Anchor element</h3>
<p>Add the <code>.disabled</code> class to <code><a></code> buttons.</p>
@@ -1535,16 +1507,12 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1535,16 +1507,12 @@ For example, <code>section</code> should be wrapped as inline.
</div>
</div>
</div>
</div>
<br>
<hrclass="bs-docs-separator">
<h3>Built as a sprite</h3>
<p>Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.</p>
<p>All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.</p>
<p><ahref="http://glyphicons.com"target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.</p>
<h3>How to use</h3>
<h2>How to use</h2>
<p>Bootstrap uses an <code><i></code> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:</p>
<p>All icons require an <code><i></code> tag with a unique class, prefixed with <code>icon-</code>. To use, place the following code just about anywhere:</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<i class="icon-search"></i>
<i class="icon-search"></i>
</pre>
</pre>
...
@@ -1552,26 +1520,20 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1552,26 +1520,20 @@ For example, <code>section</code> should be wrapped as inline.
<p>There are 140 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.</p>
<p>
<p>
<spanclass="label label-info">Heads up!</span>
<spanclass="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.
</p>
</p>
<h3>Use cases</h3>
<p>Icons are great, but where would one use them? Here are a few ideas:</p>
<hrclass="bs-docs-separator">
<ul>
<li>As visuals for your sidebar navigation</li>
<li>For a purely icon-driven navigation</li>
<li>For buttons to help convey the meaning of an action</li>
<li>With links to share context on a user's destination</li>
</ul>
<p>Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.</p>
<h3>Examples</h3>
<h2>Icon examples</h2>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
<p>Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.</p>
@@ -1634,7 +1591,7 @@ For example, <code>section</code> should be wrapped as inline.
...
@@ -1634,7 +1591,7 @@ For example, <code>section</code> should be wrapped as inline.
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
<h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
</div>
</div>
<h3>Button groups</h3>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.</p>
<h2>Description and best practices</h2>
<h3>Best practices</h3>
<p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements. We recommend the following guidelines for using button groups and toolbars:</p>
<p>We recommend the following guidelines for using button groups and toolbars:</p>
<ul>
<ul>
<li>Always use the same element in a single button group, <code><a></code> or <code><button></code>.</li>
<li>Always use the same element in a single button group, <code><a></code> or <code><button></code>.</li>
<li>Don't mix buttons of different colors in the same button group.</li>
<li>Don't mix buttons of different colors in the same button group.</li>
...
@@ -135,10 +128,17 @@
...
@@ -135,10 +128,17 @@
</ul>
</ul>
<p><spanclass="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
<p><spanclass="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
<h3>Default example</h3>
<p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
<hrclass="bs-docs-separator">
<divclass="">
<divclass="btn-group"style="margin: 9px 0;">
<h2>Examples and variations</h2>
<p>Two basic options, along with two more specific variations.</p>
<h3>Basic button group</h3>
<p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
<divclass="bs-docs-example">
<divclass="btn-group"style="margin: 9px 0 5px;">
<buttonclass="btn">Left</button>
<buttonclass="btn">Left</button>
<buttonclass="btn">Middle</button>
<buttonclass="btn">Middle</button>
<buttonclass="btn">Right</button>
<buttonclass="btn">Right</button>
...
@@ -151,9 +151,11 @@
...
@@ -151,9 +151,11 @@
<button class="btn">3</button>
<button class="btn">3</button>
</div>
</div>
</pre>
</pre>
<h3>Toolbar example</h3>
<h3>Toolbar example</h3>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<p>Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.</p>
<divclass="btn-toolbar">
<divclass="bs-docs-example">
<divclass="btn-toolbar"style="margin: 0;">
<divclass="btn-group">
<divclass="btn-group">
<buttonclass="btn">1</button>
<buttonclass="btn">1</button>
<buttonclass="btn">2</button>
<buttonclass="btn">2</button>
...
@@ -169,6 +171,7 @@
...
@@ -169,6 +171,7 @@
<buttonclass="btn">8</button>
<buttonclass="btn">8</button>
</div>
</div>
</div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="btn-toolbar">
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
...
@@ -176,9 +179,10 @@
...
@@ -176,9 +179,10 @@
</div>
</div>
</div>
</div>
</pre>
</pre>
<h3>Checkbox and radio flavors</h3>
<h3>Checkbox and radio flavors</h3>
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the Javascript docs</a> for that.</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">Get the javascript »</a></p>
<h3>Dropdowns in button groups</h3>
<h3>Dropdowns in button groups</h3>
<p><spanclass="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
<p><spanclass="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
</section>
</section>
...
@@ -192,11 +196,11 @@
...
@@ -192,11 +196,11 @@
<h1>Button dropdown menus <small>Built on button groups to provide contextual menus</small></h1>
<h1>Button dropdown menus <small>Built on button groups to provide contextual menus</small></h1>
</div>
</div>
<h2>Button dropdowns</h2>
<h3>Overview and examples</h3>
<h2>Overview and examples</h2>
<p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
<p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
<p>Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
<p>Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
<p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p>
<p>In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.</p>
<br>
<h2>Split button dropdowns</h2>
<hrclass="bs-docs-separator">
<h3>Overview and examples</h3>
<h2>Split button dropdowns</h2>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<p>Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.</p>
<p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
<p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
<h2>Lightweight defaults <small>Same markup, different classes</small></h2>
<h2>Lightweight defaults <small>Same markup, different classes</small></h2>
<h3>Powerful base class</h3>
<p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
<p>All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.</p>
<h3>When to use</h3>
<p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
<h3>Component alignment</h3>
<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h3>Basic tabs</h3>
<h3>Basic tabs</h3>
<p>Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:</p>
<p>Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:</p>
<divclass="bs-docs-example">
<ulclass="nav nav-tabs">
<ulclass="nav nav-tabs">
<liclass="active"><ahref="#">Home</a></li>
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Messages</a></li>
<li><ahref="#">Messages</a></li>
</ul>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav nav-tabs">
<ul class="nav nav-tabs">
<li class="active">
<li class="active">
...
@@ -553,11 +555,13 @@
...
@@ -553,11 +555,13 @@
<h3>Basic pills</h3>
<h3>Basic pills</h3>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
<divclass="bs-docs-example">
<ulclass="nav nav-pills">
<ulclass="nav nav-pills">
<liclass="active"><ahref="#">Home</a></li>
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Messages</a></li>
<li><ahref="#">Messages</a></li>
</ul>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav nav-pills">
<ul class="nav nav-pills">
<li class="active">
<li class="active">
...
@@ -568,18 +572,24 @@
...
@@ -568,18 +572,24 @@
</ul>
</ul>
</pre>
</pre>
<h3>Component alignment</h3>
<p>To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<hrclass="bs-docs-separator">
<h2>Stackable <small>Make tabs or pills vertical</small></h2>
<h3>How to stack 'em</h3>
<h2>Stackable</h2>
<p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
<p>As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.</p>
<h3>Stacked tabs</h3>
<h3>Stacked tabs</h3>
<divclass="bs-docs-example">
<ulclass="nav nav-tabs nav-stacked">
<ulclass="nav nav-tabs nav-stacked">
<liclass="active"><ahref="#">Home</a></li>
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Messages</a></li>
<li><ahref="#">Messages</a></li>
</ul>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav nav-tabs nav-stacked">
<ul class="nav nav-tabs nav-stacked">
...
...
...
@@ -587,24 +597,28 @@
...
@@ -587,24 +597,28 @@
</pre>
</pre>
<h3>Stacked pills</h3>
<h3>Stacked pills</h3>
<divclass="bs-docs-example">
<ulclass="nav nav-pills nav-stacked">
<ulclass="nav nav-pills nav-stacked">
<liclass="active"><ahref="#">Home</a></li>
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Messages</a></li>
<li><ahref="#">Messages</a></li>
</ul>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked">
...
...
</ul>
</ul>
</pre>
</pre>
<h2>Dropdowns <small>For advanced nav components</small></h2>
<h3>Rich menus made easy</h3>
<hrclass="bs-docs-separator">
<p>Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.</p>
<p>Head over to the Javascript page to read the docs on <ahref="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
<h2>Dropdowns</h2>
<p>Add dropdown menus with a little extra HTML and the <ahref="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
<h3>Tabs with dropdowns</h3>
<divclass="bs-docs-example">
<ulclass="nav nav-tabs">
<ulclass="nav nav-tabs">
<liclass="active"><ahref="#">Home</a></li>
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Help</a></li>
<li><ahref="#">Help</a></li>
...
@@ -619,6 +633,7 @@
...
@@ -619,6 +633,7 @@
</ul>
</ul>
</li>
</li>
</ul>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav nav-tabs">
<ul class="nav nav-tabs">
<li class="dropdown">
<li class="dropdown">
...
@@ -636,6 +651,7 @@
...
@@ -636,6 +651,7 @@
</pre>
</pre>
<h3>Pills with dropdowns</h3>
<h3>Pills with dropdowns</h3>
<divclass="bs-docs-example">
<ulclass="nav nav-pills">
<ulclass="nav nav-pills">
<liclass="active"><ahref="#">Home</a></li>
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Help</a></li>
<li><ahref="#">Help</a></li>
...
@@ -650,6 +666,7 @@
...
@@ -650,6 +666,7 @@
</ul>
</ul>
</li>
</li>
</ul>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav nav-pills">
<ul class="nav nav-pills">
<li class="dropdown">
<li class="dropdown">
...
@@ -666,27 +683,17 @@
...
@@ -666,27 +683,17 @@
</ul>
</ul>
</pre>
</pre>
<h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
<h3>Application-style navigation</h3>
<hrclass="bs-docs-separator">
<p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
<p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
<hr>
<h2>Nav lists</h2>
<h4>With icons</h4>
<p>A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
<p>Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.</p>
<h4>Horizontal dividers</h4>
<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
<preclass="prettyprint linenums">
<ul class="nav nav-list">
...
<li class="divider"></li>
...
</ul>
</pre>
<h3>Example nav list</h3>
<h3>Example nav list</h3>
<p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
<p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
<preclass="prettyprint linenums">
<ul class="nav nav-list">
...
<li class="divider"></li>
...
</ul>
</pre>
<hrclass="bs-docs-separator">
<h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
<h3>What's included</h3>
<h2>Tabbable nav</h2>
<p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
<p>Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.</p>
<p>Changing between them is easy and only requires changing very little markup.</p>
<hr>
<h4>Fade in tabs</h4>
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<hr>
<h4>Requires jQuery plugin</h4>
<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <ahref="./javascript.html#tabs">on the javascript docs page</a>.</p>
<p><aclass="btn"href="./javascript.html#tabs">Get the javascript →</a></p>
<h3>Tabbable example</h3>
<h3>Tabbable example</h3>
<p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p>
<p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p>
<p>For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.</p>
</div>
<h3>Straightforward markup</h3>
<p>Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="tabbable"><!-- Only required for left/right tabs -->
<div class="tabbable"><!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<ul class="nav nav-tabs">
...
@@ -797,11 +808,17 @@
...
@@ -797,11 +808,17 @@
</div>
</div>
</pre>
</pre>
<h4>Fade in tabs</h4>
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<h4>Requires jQuery plugin</h4>
<p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <ahref="./javascript.html#tabs">on the javascript docs page</a>.</p>
<h3>Tabbable in any direction</h3>
<h3>Tabbable in any direction</h3>
<h4>Tabs on the bottom</h4>
<h4>Tabs on the bottom</h4>
<p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
<p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
<h2>Basic navbar</h2>
<p>To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.</p>
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
<p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<h3>Brand name</h3>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<a class="brand" href="#">
<ul class="nav">
Project name
...
</a>
<li class="divider-vertical"></li>
...
</ul>
</pre>
</pre>
<h3>Forms in navbar</h3>
<h3>Forms</h3>
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<form class="navbar-form pull-left">
<form class="navbar-form pull-left">
<input type="text" class="span2">
<input type="text" class="span2">
</form>
</form>
</pre>
</pre>
<h3>Search form</h3>
<p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
<p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
<p>Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
<preclass="prettyprint linenums">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<!-- Everything you want hidden at 940px or less, place within here -->
<h3>Using dropdowns</h3>
<div class="nav-collapse">
<p>Add dropdowns and dropups to the nav with a bit of markup and the <ahref="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
<strong>Heads up!</strong> The responsive navbar requires the <ahref="./javascript.html#collapse">collapse plugin</a> and <ahref="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div>
<h3>Nav links</h3>
<p>Nav items are simple to add via unordered lists.</p>
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
<preclass="prettyprint linenums">
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</pre>
<h3>Component alignment</h3>
<p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
<h3>Adding dropdown menus</h3>
<p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdowns">our javascript plugin</a>.</p>
<p><aclass="btn"href="./javascript.html#dropdowns">Get the javascript →</a></p>
<p>Visit the <ahref="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
<hr>
<h3>Text in the navbar</h3>
<h3>Text</h3>
<p>Wrap strings of text in a <code><.navbar-text></code>, usually on a <code><p></code> tag for proper leading and color.</p>
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
<hrclass="bs-docs-separator">
<h2>Fixed navigation</h2>
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
<h3>Fixed to top</h3>
<p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
<strong>Heads up!</strong> The responsive navbar requires the <ahref="./javascript.html#collapse">collapse plugin</a> and <ahref="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div>
</section>
</section>
...
@@ -1084,11 +1171,9 @@
...
@@ -1084,11 +1171,9 @@
<h1>Breadcrumbs <small></small></h1>
<h1>Breadcrumbs <small></small></h1>
</div>
</div>
<h3>Why use them</h3>
<h2>Examples</h2>
<p>Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.</p>
<h3>Examples</h3>
<p>A single example shown as it might be displayed across multiple pages.</p>
<p>A single example shown as it might be displayed across multiple pages.</p>
<h1>Pagination <small>Two options for paging through content</small></h1>
<h1>Pagination <small>Two options for paging through content</small></h1>
</div>
</div>
<h2>Multicon-page pagination</h2>
<h2>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>
<h3>When to use</h3>
<divclass="bs-docs-example">
<p>Ultra simplistic and minimally styled 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>
<h3>Stateful page links</h3>
<p>Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.</p>
<h3>Flexible alignment</h3>
<p>Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
<h3>Examples</h3>
<p>The default pagination component is flexible and works in a number of variations.</p>
<p>Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.</p>
<p>Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.</p>
<h2>Pager <small>For quick previous and next links</small></h2>
<h3>About pager</h3>
<hrclass="bs-docs-separator">
<p>The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.</p>
<h4>Optional disabled state</h4>
<p>Pager links also use the general <code>.disabled</code> class from the pagination.</p>
<h2>Pager</h2>
<p>Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.</p>
<h3>Default example</h3>
<h3>Default example</h3>
<p>By default, the pager centers links.</p>
<p>By default, the pager centers links.</p>
<divclass="bs-docs-example">
<ulclass="pager">
<ulclass="pager">
<li><ahref="#">Previous</a></li>
<li><ahref="#">Previous</a></li>
<li><ahref="#">Next</a></li>
<li><ahref="#">Next</a></li>
</ul>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="pager">
<ul class="pager">
<li>
<li>
...
@@ -1219,10 +1332,12 @@
...
@@ -1219,10 +1332,12 @@
<h3>Aligned links</h3>
<h3>Aligned links</h3>
<p>Alternatively, you can align each link to the sides:</p>
<p>Alternatively, you can align each link to the sides:</p>
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div>
</div>
<h2>Hero unit</h2>
<p>Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<h2>Hero unit</h2>
<h3>Markup</h3>
<p>A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.</p>
<p>Wrap your content in a <code>div</code> like so:</p>
<divclass="bs-docs-example">
<divclass="hero-unit">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</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>
<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>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="page-header">
<divclass="page-header">
...
@@ -1586,51 +1714,69 @@
...
@@ -1586,51 +1714,69 @@
<h1>Alerts <small>Styles for success, warning, and error messages</small></h1>
<h1>Alerts <small>Styles for success, warning, and error messages</small></h1>
</div>
</div>
<h2>Lightweight defaults</h2>
<h2>Default alert</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
<h3>Rewritten base class</h3>
<divclass="bs-docs-example">
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outer <code><div></code>.</p>
<h3>Single alert message</h3>
<p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
<hr>
<h3>Goes great with javascript</h3>
<p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p>
<p><aclass="btn js-btn"href="./javascript.html#alerts">Get the plugin »</a></p>
<h3>Example alerts</h3>
<p>Wrap your message and an optional close icon in a div with simple class.</p>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
</pre>
</pre>
<p><spanclass="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p>
<p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
<h3>Dismiss buttons</h3>
<p>Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code><a></code> tag.</p>
<p>Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.</p>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.</p>
<p>If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.</p>
<h3>Browser support</h3>
<hrclass="bs-docs-separator">
<h2>Browser support</h2>
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p>
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p>
<p>Opera and IE do not support animations at this time.</p>
<p>Opera and IE do not support animations at this time.</p>
...
@@ -1764,21 +1952,33 @@
...
@@ -1764,21 +1952,33 @@
<h2>Wells</h2>
<h2>Wells</h2>
<p>Use the well as a simple effect on an element to give it an inset effect.</p>
<p>Use the well as a simple effect on an element to give it an inset effect.</p>
<divclass="bs-docs-example">
<divclass="well">
<divclass="well">
Look, I'm in a well!
Look, I'm in a well!
</div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="well">
<div class="well">
...
...
</div>
</div>
</pre>
</pre>
<h4>Optional classes</h4>
<h3>Optional classes</h3>
<p>Control padding and rounded corners with two optional modifier classes.</p>
<p>Control padding and rounded corners with two optional modifier classes.</p>
<divclass="bs-docs-example">
<divclass="well well-large">
Look, I'm in a well!
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="well well-large">
<div class="well well-large">
...
...
</div>
</div>
</pre>
</pre>
<divclass="bs-docs-example">
<divclass="well well-small">
Look, I'm in a well!
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="well well-small">
<div class="well well-small">
...
...
...
@@ -1786,7 +1986,9 @@
...
@@ -1786,7 +1986,9 @@
</pre>
</pre>
<h2>Close icon</h2>
<h2>Close icon</h2>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<pclass="lead"><ahref="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p>
<pclass="lead"><ahref="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.</p>
<p>We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.</p>
...
@@ -169,7 +135,7 @@
...
@@ -169,7 +135,7 @@
<h2>Responsive design</h2>
<h2>Responsive design</h2>
<p>As of Bootstrap 2, our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.</p>
<p>As of Bootstrap 2, our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.</p>
<p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p>
<p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p>
...
@@ -193,27 +159,27 @@
...
@@ -193,27 +159,27 @@
<h1>Built with Bootstrap.</h1>
<h1>Built with Bootstrap.</h1>
<pclass="marketing-byline">For even more sites built with Bootstrap, <ahref="http://builtwithbootstrap.tumblr.com/"target="_blank">visit the unofficial Tumblr</a> or <ahref="./examples.html">browse the examples</a>.</p>
<pclass="marketing-byline">For even more sites built with Bootstrap, <ahref="http://builtwithbootstrap.tumblr.com/"target="_blank">visit the unofficial Tumblr</a> or <ahref="./examples.html">browse the examples</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</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>If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.</p>
<p>Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.</p>
<p>A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.</p>
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
<p>For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.</p>
<pclass="muted"><strong>*</strong> Required for animation in plugins</p>
<pclass="muted"><strong>*</strong> Required for animation in plugins</p>
</div>
</div><!-- /row -->
<divclass="alert alert-info"><strong>Heads up!</strong> If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.</div>
</section>
</section>
...
@@ -194,7 +141,6 @@
...
@@ -194,7 +141,6 @@
<h3>About modals</h3>
<h3>About modals</h3>
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
<p>A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.</p>
@@ -384,7 +330,6 @@ $('#myModal').on('hidden', function () {
...
@@ -384,7 +330,6 @@ $('#myModal').on('hidden', function () {
<h3>About dropdowns</h3>
<h3>About dropdowns</h3>
<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>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>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
<p>Click the tabs below to toggle between hidden panes, even via dropdown menus.</p>
...
@@ -759,7 +702,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -759,7 +702,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h3>About Tooltips</h3>
<h3>About Tooltips</h3>
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.</p>
<p>Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.</p>
<p>Start typing in the field below to show the typeahead results.</p>
<p>Start typing in the field below to show the typeahead results.</p>
...
@@ -1499,7 +1435,7 @@ $('.carousel').carousel({
...
@@ -1499,7 +1435,7 @@ $('.carousel').carousel({
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<pclass="lead">Customize and extend Bootstrap with <ahref="http://lesscss.org"target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
<pclass="lead">Customize and extend Bootstrap with <ahref="http://lesscss.org"target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Here two nested <code>.span4</code> columns are placed within a <code>.span8</code>.</p>
<p>Here two nested <code>.span4</code> columns are placed within a <code>.span8</code>.</p>
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span8">
<divclass="span10">
Level 1 of column
Level 1 of column
<divclass="row show-grid">
<divclass="row show-grid">
<divclass="span4">
<divclass="span5">
Level 2
Level 2
</div>
</div>
<divclass="span4">
<divclass="span5">
Level 2
Level 2
</div>
</div>
</div>
</div>
...
@@ -245,11 +219,11 @@
...
@@ -245,11 +219,11 @@
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="row">
<div class="row">
<div class="span8">
<div class="span10">
Level 1 column
Level 1 column
<div class="row">
<div class="row">
<div class="span4">Level 2</div>
<div class="span5">Level 2</div>
<div class="span4">Level 2</div>
<div class="span5">Level 2</div>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -604,7 +578,7 @@
...
@@ -604,7 +578,7 @@
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>{{_i}}Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
<p>{{_i}}Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
<pclass="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
<pclass="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
<li><ahref="#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
</ul>
</div>
</header>
</header>
...
@@ -345,19 +355,6 @@
...
@@ -345,19 +355,6 @@
</pre>
</pre>
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
<p>{{_i}}<strong>Note:</strong> Be sure to keep code within <code><pre></code> tags as close to the left as possible; it will render all tabs.{{/i}}</p>
<p>{{_i}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p>
<p>{{_i}}You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}</p>
<h2>Google Prettify</h2>
<p>Take the same <code><pre></code> element and add two optional classes for enhanced rendering.</p>
&lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
</pre>
</pre>
<p>{{_i}}<ahref="http://code.google.com/p/google-code-prettify/">Download google-code-prettify</a> and view the readme for <ahref="http://google-code-prettify.googlecode.com/svn/trunk/README.html">how to use</a>.{{/i}}</p>
</section>
</section>
...
@@ -369,148 +366,8 @@
...
@@ -369,148 +366,8 @@
<h1>{{_i}}Tables <small>For, you guessed it, tabular data</small>{{/i}}</h1>
<h1>{{_i}}Tables <small>For, you guessed it, tabular data</small>{{/i}}</h1>
</div>
</div>
<h2>{{_i}}Table markup{{/i}}</h2>
<h2>{{_i}}Default styles{{/i}}</h2>
<p>{{_i}}For basic styling—light padding and only horizontal dividers—add the base class <code>.table</code> to any <code><table></code>.{{/i}}</p>
<tableclass="table table-bordered table-striped">
<colgroup>
<colclass="span1">
<colclass="span7">
</colgroup>
<thead>
<tr>
<th>{{_i}}Tag{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code><table></code>
</td>
<td>
{{_i}}Wrapping element for displaying data in a tabular format{{/i}}
</td>
</tr>
<tr>
<td>
<code><thead></code>
</td>
<td>
{{_i}}Container element for table header rows (<code><tr></code>) to label table columns{{/i}}
</td>
</tr>
<tr>
<td>
<code><tbody></code>
</td>
<td>
{{_i}}Container element for table rows (<code><tr></code>) in the body of the table{{/i}}
</td>
</tr>
<tr>
<td>
<code><tr></code>
</td>
<td>
{{_i}}Container element for a set of table cells (<code><td></code> or <code><th></code>) that appears on a single row{{/i}}
</td>
</tr>
<tr>
<td>
<code><td></code>
</td>
<td>
{{_i}}Default table cell{{/i}}
</td>
</tr>
<tr>
<td>
<code><th></code>
</td>
<td>
{{_i}}Special table cell for column (or row, depending on scope and placement) labels{{/i}}<br>
{{_i}}Must be used within a <code><thead></code>{{/i}}
</td>
</tr>
<tr>
<td>
<code><caption></code>
</td>
<td>
{{_i}}Description or summary of what the table holds, especially useful for screen readers{{/i}}
</td>
</tr>
</tbody>
</table>
<preclass="prettyprint linenums">
<table>
<thead>
<tr>
<th>…</th>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>
<td>…</td>
<td>…</td>
</tr>
</tbody>
</table>
</pre>
<h2>{{_i}}Table options{{/i}}</h2>
<tableclass="table table-bordered table-striped">
<thead>
<tr>
<th>{{_i}}Name{{/i}}</th>
<th>{{_i}}Class{{/i}}</th>
<th>{{_i}}Description{{/i}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{_i}}Default{{/i}}</td>
<tdclass="muted">{{_i}}None{{/i}}</td>
<td>{{_i}}No styles, just columns and rows{{/i}}</td>
</tr>
<tr>
<td>{{_i}}Basic{{/i}}</td>
<td>
<code>.table</code>
</td>
<td>{{_i}}Only horizontal lines between rows{{/i}}</td>
</tr>
<tr>
<td>{{_i}}Bordered{{/i}}</td>
<td>
<code>.table-bordered</code>
</td>
<td>{{_i}}Rounds corners and adds outer border{{/i}}</td>
</tr>
<tr>
<td>{{_i}}Zebra-stripe{{/i}}</td>
<td>
<code>.table-striped</code>
</td>
<td>{{_i}}Adds light gray background color to odd rows (1, 3, 5, etc){{/i}}</td>
</tr>
<tr>
<td>{{_i}}Condensed{{/i}}</td>
<td>
<code>.table-condensed</code>
</td>
<td>{{_i}}Cuts vertical padding in half, from 8px to 4px, within all <code>td</code> and <code>th</code> elements{{/i}}</td>
</tr>
</tbody>
</table>
<h2>{{_i}}Example tables{{/i}}</h2>
<h3>1. {{_i}}Default table styles{{/i}}</h3>
<p>{{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the <code>.table</code> class is required.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<tableclass="table">
<tableclass="table">
<thead>
<thead>
...
@@ -549,9 +406,15 @@
...
@@ -549,9 +406,15 @@
</table>
</table>
</pre>
</pre>
<h3>2. {{_i}}Striped table{{/i}}</h3>
<p>{{_i}}Get a little fancy with your tables by adding zebra-striping—just add the <code>.table-striped</code> class.{{/i}}</p>
<hrclass="bs-docs-separator">
<pclass="muted">{{_i}}<strong>Note:</strong> Striped tables use the <code>:nth-child</code> CSS selector and is not available in IE7-IE8.{{/i}}</p>
<h2>{{_i}}Optional classes{{/i}}</h2>
<p>{{_i}}Add any of the follow classes to the <code>.table</code> base class.{{/i}}</p>
<h3><code>{{_i}}.table-striped{{/i}}</code></h3>
<p>{{_i}}Adds zebra-striping to any table row within the <code><tbody></code> via the <code>:nth-child</code> CSS selector (not available in IE7-IE8).{{/i}}</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<tableclass="table table-striped">
<tableclass="table table-striped">
<thead>
<thead>
...
@@ -590,9 +453,8 @@
...
@@ -590,9 +453,8 @@
</table>
</table>
</pre>
</pre>
<h3><code>{{_i}}.table-bordered{{/i}}</code></h3>
<h3>3. {{_i}}Bordered table{{/i}}</h3>
<p>{{_i}}Add borders and rounded corners to the table.{{/i}}</p>
<p>{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}</p>
<p>{{_i}}Make your tables more compact by adding the <code>.table-condensed</code> class to cut table cell padding in half (from 8px to 4px).{{/i}}</p>
<p>{{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<tableclass="table table-condensed">
<tableclass="table table-condensed">
<thead>
<thead>
...
@@ -675,48 +537,96 @@
...
@@ -675,48 +537,96 @@
</pre>
</pre>
<h3>5. {{_i}}Combine them all!{{/i}}</h3>
<hrclass="bs-docs-separator">
<p>{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}</p>
<p>{{_i}}Forms include styles for all the base form controls like <code>input</code>, <code>textarea</code>, and <code>select</code> you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.{{/i}}</p>
<p>{{_i}}Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p>
<p>{{_i}}Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.{{/i}}</p>
<p>{{_i}}Error, warning, and success states are included for form controls, as wel as disabled.{{/i}}</p>
<span class="help-block">Example block-level help text here.</span>
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<label class="checkbox">
<input type="checkbox">{{_i}}Check me out{{/i}}
<input type="checkbox">{{_i}}Check me out{{/i}}
...
@@ -791,21 +664,28 @@
...
@@ -791,21 +664,28 @@
</form>
</form>
</pre>
</pre>
<hrclass="bs-docs-separator"></hr>
<h2>{{_i}}Optional layouts{{/i}}</h2>
<p>{{_i}}Included with Bootstrap are three optional form layouts for common use cases.{{/i}}</p>
<h3>{{_i}}Search form{{/i}}</h3>
<h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code>input</code>.{{/i}}</p>
<p>{{_i}}Add <code>.form-search</code> to the form and <code>.search-query</code> to the <code><input></code> for an extra-rounded text input.{{/i}}</p>
<p>{{_i}}Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:{{/i}}</p>
<h2>{{_i}}Horizontal forms{{/i}}</h2>
<p>{{_i}}Shown on the right are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
<p>{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The <code>.control-group</code>, <code>.control-label</code>, and <code>.controls</code> classes are all required for styling.{{/i}}</p>
<p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
<hr>
<h3>{{_i}}Form validation{{/i}}</h3>
<h2>{{_i}}Supported form controls{{/i}}</h2>
<p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding <code>.control-group</code>.{{/i}}</p>
<p>{{_i}}Examples of standard form controls supported in an example form layout.{{/i}}</p>
<h3>{{_i}}Inputs{{/i}}</h3>
<p>{{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}</p>
<p>{{_i}}Requires the use of a specified <code>type</code> at all times.{{/i}}</p>
<p>{{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
</div>
<hr>
</pre>
<h3>{{_i}}Checkboxes and radios{{/i}}</h3>
<p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code><label class="checkbox"></code> that wraps the <code><input type="checkbox"></code>.{{/i}}</p>
<h3>{{_i}}Control sizing{{/i}}</h3>
<p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
<p>{{_i}}Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.span*</code> classes.{{/i}}</p>
<hr>
<h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
<h4>{{_i}}Relative sizing{{/i}}</h4>
<p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
<p>{{_i}}To add help text for your form inputs, include inline help text with <code><span class="help-inline"></code> or a help text block with <code><p class="help-block"></code> after the input element.{{/i}}</p>
<pclass="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p>
<p>{{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}</p>
<formclass="bs-docs-example">
<spanclass="input-xlarge uneditable-input">Some value here</span>
</form>
<preclass="prettyprint linenums">
<span class="input-xlarge uneditable-input">Some value here</span>
</pre>
<h3>{{_i}}Form actions{{/i}}</h3>
<p>{{_i}}End a form with a group of actions (buttons). When placed within a <code>.form-horizontal</code>, the buttons will automatically indent to line up with the form controls.{{/i}}</p>
<p>{{_i}}Inline and block level support for help text that appears around form controls.{{/i}}</p>
<h4>{{_i}}Inline help{{/i}}</h4>
<formclass="bs-docs-example form-inline">
<inputtype="text"><spanclass="help-inline">Inline help text</span>
</form>
<preclass="prettyprint linenums">
<span class="help-inline">Inline help text</span>
</pre>
<h4>{{_i}}Block help{{/i}}</h4>
<formclass="bs-docs-example form-inline">
<inputtype="text">
<spanclass="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</form>
<preclass="prettyprint linenums">
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</pre>
<hrclass="bs-docs-separator"></hr>
<h2>{{_i}}Form control states{{/i}}</h2>
<p>{{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}</p>
<h3>{{_i}}Input focus{{/i}}</h3>
<p>{{_i}}We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.{{/i}}</p>
<formclass="bs-docs-example form-inline">
<inputclass="input-xlarge focused"id="focusedInput"type="text"value="{{_i}}This is focused...{{/i}}">
</form>
<preclass="prettyprint linenums">
<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
</pre>
<h3>{{_i}}Disabled inputs{{/i}}</h3>
<p>{{_i}}Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.{{/i}}</p>
<p>{{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p>
<formclass="bs-docs-example form-horizontal">
<divclass="control-group warning">
<labelclass="control-label"for="inputWarning">{{_i}}Input with warning{{/i}}</label>
<p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements for the best rendering.{{/i}}</p>
<tableclass="table table-bordered table-striped">
<tableclass="table table-bordered table-striped">
<thead>
<thead>
<tr>
<tr>
...
@@ -1207,13 +1183,14 @@
...
@@ -1207,13 +1183,14 @@
</tbody>
</tbody>
</table>
</table>
<h3>{{_i}}Buttons for actions{{/i}}</h3>
<h4>{{_i}}Cross browser compatibility{{/i}}</h4>
<p>{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}</p>
<p>{{_i}}Button styles can be applied to anything with the <code>.btn</code> class applied. However, typically you'll want to apply these to only <code><a></code> and <code><button></code> elements.{{/i}}</p>
<h3>{{_i}}Cross browser compatibility{{/i}}</h3>
<p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>
<p>{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled <code>button</code> elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}</p>
<h3>{{_i}}Multiple sizes{{/i}}</h3>
<hrclass="bs-docs-separator">
<h2>{{_i}}Button sizes{{/i}}</h2>
<p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
<p>{{_i}}Fancy larger or smaller buttons? Add <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code> for two additional sizes.{{/i}}</p>
<p>{{_i}}For disabled buttons, add the <code>.disabled</code> class to links and the <code>disabled</code> attribute for <code><button></code> elements.{{/i}}</p>
<hrclass="bs-docs-separator">
<p>
<h2>{{_i}}Disabled state{{/i}}</h2>
<p>{{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}</p>
<h3>Anchor element</h3>
<p>{{_i}}Add the <code>.disabled</code> class to <code><a></code> buttons.{{/i}}</p>
<h1>{{_i}}Icons <small>Graciously provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a></small>{{/i}}</h1>
<h1>{{_i}}Icons <small>Graciously provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a></small>{{/i}}</h1>
</div>
</div>
<h2>{{_i}}Icon glyphs{{/i}}</h2>
<p>{{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by <ahref="http://glyphicons.com"target="_blank">Glyphicons</a>.{{/i}}</p>
<p>{{_i}}Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with <code>background-position</code>. This is the same method we use on Twitter.com and it has worked well for us.{{/i}}</p>
<p>{{_i}}All icons classes are prefixed with <code>.icon-</code> for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}</p>
<p>{{_i}}<ahref="http://glyphicons.com"target="_blank">Glyphicons</a> has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.{{/i}}</p>
<h3>{{_i}}How to use{{/i}}</h3>
<h2>{{_i}}How to use{{/i}}</h2>
<p>{{_i}}Bootstrap uses an <code><i></code> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}</p>
<p>{{_i}}All icons require an <code><i></code> tag with a unique class, prefixed with <code>icon-</code>. To use, place the following code just about anywhere:{{/i}}</p>
<p>{{_i}}There are 140 classes to choose from for your icons. Just add an <code><i></code> tag with the right classes and you're set. You can find the full list in <strong>sprites.less</strong> or right here in this document.{{/i}}</p>
{{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.{{/i}}
{{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <code><i></code> tag for proper spacing.{{/i}}
</p>
</p>
<h3>{{_i}}Use cases{{/i}}</h3>
<p>{{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}</p>
<hrclass="bs-docs-separator">
<ul>
<li>{{_i}}As visuals for your sidebar navigation{{/i}}</li>
<li>{{_i}}For a purely icon-driven navigation{{/i}}</li>
<li>{{_i}}For buttons to help convey the meaning of an action{{/i}}</li>
<li>{{_i}}With links to share context on a user's destination{{/i}}</li>
</ul>
<p>{{_i}}Essentially, anywhere you can put an <code><i></code> tag, you can put an icon.{{/i}}</p>
<h3>{{_i}}Examples{{/i}}</h3>
<h2>{{_i}}Icon examples{{/i}}</h2>
<p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
<p>{{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}</p>
<h1>{{_i}}Button groups{{/i}}<small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
<h1>{{_i}}Button groups{{/i}}<small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
</div>
</div>
<h3>{{_i}}Button groups{{/i}}</h3>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements.{{/i}}</p>
<h2>{{_i}}Description and best practices{{/i}}</h2>
<h3>{{_i}}Best practices{{/i}}</h3>
<p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code><a></code> or <code><button></code> elements. We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
<p>{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
<ul>
<ul>
<li>{{_i}}Always use the same element in a single button group, <code><a></code> or <code><button></code>.{{/i}}</li>
<li>{{_i}}Always use the same element in a single button group, <code><a></code> or <code><button></code>.{{/i}}</li>
<li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
<li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
...
@@ -24,10 +51,17 @@
...
@@ -24,10 +51,17 @@
</ul>
</ul>
<p>{{_i}}<spanclass="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}</p>
<p>{{_i}}<spanclass="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}</p>
<h3>{{_i}}Default example{{/i}}</h3>
<p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
<hrclass="bs-docs-separator">
<divclass="">
<divclass="btn-group"style="margin: 9px 0;">
<h2>{{_i}}Examples and variations{{/i}}</h2>
<p>{{_i}}Two basic options, along with two more specific variations.{{/i}}</p>
<h3>{{_i}}Basic button group{{/i}}</h3>
<p>{{_i}}Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="btn-group"style="margin: 9px 0 5px;">
<buttonclass="btn">{{_i}}Left{{/i}}</button>
<buttonclass="btn">{{_i}}Left{{/i}}</button>
<buttonclass="btn">{{_i}}Middle{{/i}}</button>
<buttonclass="btn">{{_i}}Middle{{/i}}</button>
<buttonclass="btn">{{_i}}Right{{/i}}</button>
<buttonclass="btn">{{_i}}Right{{/i}}</button>
...
@@ -40,9 +74,11 @@
...
@@ -40,9 +74,11 @@
<button class="btn">3</button>
<button class="btn">3</button>
</div>
</div>
</pre>
</pre>
<h3>{{_i}}Toolbar example{{/i}}</h3>
<h3>{{_i}}Toolbar example{{/i}}</h3>
<p>{{_i}}Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.{{/i}}</p>
<p>{{_i}}Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.{{/i}}</p>
<divclass="btn-toolbar">
<divclass="bs-docs-example">
<divclass="btn-toolbar"style="margin: 0;">
<divclass="btn-group">
<divclass="btn-group">
<buttonclass="btn">1</button>
<buttonclass="btn">1</button>
<buttonclass="btn">2</button>
<buttonclass="btn">2</button>
...
@@ -58,6 +94,7 @@
...
@@ -58,6 +94,7 @@
<buttonclass="btn">8</button>
<buttonclass="btn">8</button>
</div>
</div>
</div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="btn-toolbar">
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
...
@@ -65,9 +102,10 @@
...
@@ -65,9 +102,10 @@
</div>
</div>
</div>
</div>
</pre>
</pre>
<h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
<h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <ahref="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
<p><aclass="btn js-btn"href="./javascript.html#buttons">{{_i}}Get the javascript »{{/i}}</a></p>
<h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
<h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
</section>
</section>
...
@@ -81,11 +119,11 @@
...
@@ -81,11 +119,11 @@
<h1>{{_i}}Button dropdown menus{{/i}}<small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
<h1>{{_i}}Button dropdown menus{{/i}}<small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
</div>
</div>
<h2>{{_i}}Button dropdowns{{/i}}</h2>
<h3>{{_i}}Overview and examples{{/i}}</h3>
<h2>{{_i}}Overview and examples{{/i}}</h2>
<p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
<p>{{_i}}Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.{{/i}}</p>
<p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
<p>{{_i}}Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.{{/i}}</p>
<p>{{_i}}Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.{{/i}}</p>
<p>{{_i}}Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
<p>{{_i}}Button dropdowns require the <ahref="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
<p>{{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}</p>
<br>
<h2>{{_i}}Split button dropdowns{{/i}}</h2>
<hrclass="bs-docs-separator">
<h3>{{_i}}Overview and examples{{/i}}</h3>
<h2>{{_i}}Split button dropdowns{{/i}}</h2>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
<p>{{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}</p>
<p>{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.{{/i}}</p>
<p>{{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.{{/i}}</p>
<h2>{{_i}}Lightweight defaults{{/i}}<small>{{_i}}Same markup, different classes{{/i}}</small></h2>
<h2>{{_i}}Lightweight defaults{{/i}}<small>{{_i}}Same markup, different classes{{/i}}</small></h2>
<h3>{{_i}}Powerful base class{{/i}}</h3>
<p>{{_i}}All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
<p>{{_i}}All nav components here—tabs, pills, and lists—<strong>share the same base markup and styles</strong> through the <code>.nav</code> class.{{/i}}</p>
<h3>{{_i}}When to use{{/i}}</h3>
<p>{{_i}}Tabs and pills are great for sections of content or navigating between pages of related content.{{/i}}</p>
<h3>{{_i}}Component alignment{{/i}}</h3>
<p>{{_i}}To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
<h3>{{_i}}Basic tabs{{/i}}</h3>
<h3>{{_i}}Basic tabs{{/i}}</h3>
<p>{{_i}}Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:{{/i}}</p>
<p>{{_i}}Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:{{/i}}</p>
<p>{{_i}}To align nav links, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
<hrclass="bs-docs-separator">
<h2>{{_i}}Stackable{{/i}}<small>{{_i}}Make tabs or pills vertical{{/i}}</small></h2>
<h3>{{_i}}How to stack 'em{{/i}}</h3>
<h2>{{_i}}Stackable{{/i}}</h2>
<p>{{_i}}As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.{{/i}}</p>
<p>{{_i}}As tabs and pills are horizontal by default, just add a second class, <code>.nav-stacked</code>, to make them appear vertically stacked.{{/i}}</p>
<h2>{{_i}}Nav lists{{/i}}<small>{{_i}}Build simple stacked navs, great for sidebars{{/i}}</small></h2>
<h3>{{_i}}Application-style navigation{{/i}}</h3>
<hrclass="bs-docs-separator">
<p>{{_i}}Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}</p>
<p>{{_i}}Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.{{/i}}</p>
<hr>
<h2>{{_i}}Nav lists{{/i}}</h2>
<h4>{{_i}}With icons{{/i}}</h4>
<p>{{_i}}A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.{{/i}}</p>
<p>{{_i}}Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.{{/i}}</p>
<h4>{{_i}}Horizontal dividers{{/i}}</h4>
<p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>
<preclass="prettyprint linenums">
<ul class="nav nav-list">
...
<li class="divider"></li>
...
</ul>
</pre>
<h3>{{_i}}Example nav list{{/i}}</h3>
<h3>{{_i}}Example nav list{{/i}}</h3>
<p>{{_i}}Take a list of links and add <code>class="nav nav-list"</code>:{{/i}}</p>
<p>{{_i}}Take a list of links and add <code>class="nav nav-list"</code>:{{/i}}</p>
<p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>
<preclass="prettyprint linenums">
<ul class="nav nav-list">
...
<li class="divider"></li>
...
</ul>
</pre>
<hrclass="bs-docs-separator">
<h2>{{_i}}Tabbable nav{{/i}}<small>{{_i}}Bring tabs to life via javascript{{/i}}</small></h2>
<h3>{{_i}}What's included{{/i}}</h3>
<h2>{{_i}}Tabbable nav{{/i}}</h2>
<p>{{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}</p>
<p>{{_i}}Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.{{/i}}</p>
<p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p>
<hr>
<h4>{{_i}}Fade in tabs{{/i}}</h4>
<p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
<hr>
<h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <ahref="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
<p><aclass="btn"href="./javascript.html#tabs">{{_i}}Get the javascript →{{/i}}</a></p>
<h3>{{_i}}Tabbable example{{/i}}</h3>
<h3>{{_i}}Tabbable example{{/i}}</h3>
<p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</p>
<p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</p>
<p>{{_i}}For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.{{/i}}</p>
</div>{{! /example }}
<h3>{{_i}}Straightforward markup{{/i}}</h3>
<p>{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="tabbable"><!-- Only required for left/right tabs -->
<div class="tabbable"><!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<ul class="nav nav-tabs">
...
@@ -686,11 +731,17 @@
...
@@ -686,11 +731,17 @@
</div>
</div>
</pre>
</pre>
<h4>{{_i}}Fade in tabs{{/i}}</h4>
<p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
<h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
<p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <ahref="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
<h4>{{_i}}Tabs on the bottom{{/i}}</h4>
<h4>{{_i}}Tabs on the bottom{{/i}}</h4>
<p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>
<p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>
<p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
<h2>{{_i}}Basic navbar{{/i}}</h2>
<p>{{_i}}To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a <code>.container</code>, which sets the width of your site and content.{{/i}}</p>
<p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
<preclass="prettyprint linenums">
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</pre>
<h3>{{_i}}Forms{{/i}}</h3>
<p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
<preclass="prettyprint linenums">
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
</pre>
<h3>{{_i}}Search form{{/i}}</h3>
<p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
<p>{{_i}}Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
<h3>{{_i}}Using dropdowns{{/i}}</h3>
<p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <ahref="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
<p>{{_i}}Visit the <ahref="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
<h3>{{_i}}Text{{/i}}</h3>
<p>{{_i}}Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p>
<hrclass="bs-docs-separator">
<h2>{{_i}}Fixed navigation{{/i}}</h2>
<p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
<h3>Fixed to top</h3>
<p>{{_i}}Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<p>{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="navbar">
<divclass="navbar">
<divclass="navbar-inner">
<divclass="navbar-inner">
<divclass="container">
<divclass="container">
...
@@ -842,55 +1054,7 @@
...
@@ -842,55 +1054,7 @@
</div>
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div><!-- /navbar -->
</div>{{! /example }}
<h3>{{_i}}Navbar scaffolding{{/i}}</h3>
<p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
<preclass="prettyprint linenums">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
</pre>
<h3>{{_i}}Fixed navbar{{/i}}</h3>
<p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-top">
...
</div>
</pre>
<preclass="prettyprint linenums">
<div class="navbar navbar-fixed-bottom">
...
</div>
</pre>
<p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<h3>{{_i}}Brand name{{/i}}</h3>
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
<preclass="prettyprint linenums">
<a class="brand" href="#">
{{_i}}Project name{{/i}}
</a>
</pre>
<h3>{{_i}}Forms in navbar{{/i}}</h3>
<p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
<preclass="prettyprint linenums">
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
</pre>
<p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
<p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="navbar">
<div class="navbar">
<div class="navbar-inner">
<div class="navbar-inner">
...
@@ -919,49 +1083,6 @@
...
@@ -919,49 +1083,6 @@
<strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <ahref="./javascript.html#collapse">collapse plugin</a> and <ahref="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
<strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <ahref="./javascript.html#collapse">collapse plugin</a> and <ahref="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
</div>
</div>
<h3>{{_i}}Nav links{{/i}}</h3>
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
<p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
<preclass="prettyprint linenums">
<ul class="nav">
...
<li class="divider-vertical"></li>
...
</ul>
</pre>
<h3>{{_i}}Component alignment{{/i}}</h3>
<p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
<h3>{{_i}}Adding dropdown menus{{/i}}</h3>
<p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <ahref="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
<preclass="prettyprint linenums">
<ul class="nav">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown">
{{_i}}Account{{/i}}
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
</pre>
<p><aclass="btn"href="./javascript.html#dropdowns">{{_i}}Get the javascript →{{/i}}</a></p>
<hr>
<h3>{{_i}}Text in the navbar{{/i}}</h3>
<p>{{_i}}Wrap strings of text in a <code><.navbar-text></code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p>
</section>
</section>
...
@@ -973,11 +1094,9 @@
...
@@ -973,11 +1094,9 @@
<h1>{{_i}}Breadcrumbs{{/i}}<small></small></h1>
<h1>{{_i}}Breadcrumbs{{/i}}<small></small></h1>
</div>
</div>
<h3>{{_i}}Why use them{{/i}}</h3>
<h2>{{_i}}Examples{{/i}}</h2>
<p>{{_i}}Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.{{/i}}</p>
<h3>{{_i}}Examples{{/i}}</h3>
<p>{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}</p>
<p>{{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}</p>
<h1>{{_i}}Pagination{{/i}}<small>{{_i}}Two options for paging through content{{/i}}</small></h1>
<h1>{{_i}}Pagination{{/i}}<small>{{_i}}Two options for paging through content{{/i}}</small></h1>
</div>
</div>
<h2>{{_i}}Multicon-page pagination{{/i}}</h2>
<h2>{{_i}}Standard pagination{{/i}}</h2>
<p>{{_i}}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.{{/i}}</p>
<h3>{{_i}}When to use{{/i}}</h3>
<divclass="bs-docs-example">
<p>{{_i}}Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}</p>
<h3>{{_i}}Stateful page links{{/i}}</h3>
<p>{{_i}}Links are customizable and work in a number of circumstances with the right class. <code>.disabled</code> for unclickable links and <code>.active</code> for current page.{{/i}}</p>
<h3>{{_i}}Flexible alignment{{/i}}</h3>
<p>{{_i}}Add either of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>
<h3>{{_i}}Examples{{/i}}</h3>
<p>{{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}</p>
<p>{{_i}}Links are customizable for different circumstances. Use <code>.disabled</code> for unclickable links and <code>.active</code> to indicate the current page.{{/i}}</p>
<p>{{_i}}Add one of two optional classes to change the alignment of pagination links: <code>.pagination-centered</code> and <code>.pagination-right</code>.{{/i}}</p>
<h2>{{_i}}Pager{{/i}}<small>{{_i}}For quick previous and next links{{/i}}</small></h2>
<h3>{{_i}}About pager{{/i}}</h3>
<hrclass="bs-docs-separator">
<p>{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
<h4>{{_i}}Optional disabled state{{/i}}</h4>
<p>{{_i}}Pager links also use the general <code>.disabled</code> class from the pagination.{{/i}}</p>
<h2>{{_i}}Pager{{/i}}</h2>
<p>{{_i}}Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.{{/i}}</p>
<h3>{{_i}}Default example{{/i}}</h3>
<h3>{{_i}}Default example{{/i}}</h3>
<p>{{_i}}By default, the pager centers links.{{/i}}</p>
<p>{{_i}}By default, the pager centers links.{{/i}}</p>
<divclass="bs-docs-example">
<ulclass="pager">
<ulclass="pager">
<li><ahref="#">{{_i}}Previous{{/i}}</a></li>
<li><ahref="#">{{_i}}Previous{{/i}}</a></li>
<li><ahref="#">{{_i}}Next{{/i}}</a></li>
<li><ahref="#">{{_i}}Next{{/i}}</a></li>
</ul>
</ul>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="pager">
<ul class="pager">
<li>
<li>
...
@@ -1108,10 +1255,12 @@
...
@@ -1108,10 +1255,12 @@
<h3>{{_i}}Aligned links{{/i}}</h3>
<h3>{{_i}}Aligned links{{/i}}</h3>
<p>{{_i}}Alternatively, you can align each link to the sides:{{/i}}</p>
<p>{{_i}}Alternatively, you can align each link to the sides:{{/i}}</p>
<h1>{{_i}}Typographic components{{/i}}<small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
<h1>{{_i}}Typographic components{{/i}}<small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
</div>
</div>
<h2>{{_i}}Hero unit{{/i}}</h2>
<p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<h2>{{_i}}Hero unit{{/i}}</h2>
<h3>{{_i}}Markup{{/i}}</h3>
<p>{{_i}}A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
<p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
<divclass="bs-docs-example">
<divclass="hero-unit">
<h1>{{_i}}Hello, world!{{/i}}</h1>
<p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
<p>{{_i}}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).{{/i}}</p>
<p>{{_i}}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).{{/i}}</p>
<divclass="bs-docs-example">
<divclass="bs-docs-example">
<divclass="page-header">
<divclass="page-header">
...
@@ -1475,51 +1637,69 @@
...
@@ -1475,51 +1637,69 @@
<h1>{{_i}}Alerts{{/i}}<small>{{_i}}Styles for success, warning, and error messages{{/i}}</small></h1>
<h1>{{_i}}Alerts{{/i}}<small>{{_i}}Styles for success, warning, and error messages{{/i}}</small></h1>
</div>
</div>
<h2>{{_i}}Lightweight defaults{{/i}}</h2>
<h2>{{_i}}Default alert{{/i}}</h2>
<p>{{_i}}Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.{{/i}}</p>
<h3>{{_i}}Rewritten base class{{/i}}</h3>
<divclass="bs-docs-example">
<p>{{_i}}With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outer <code><div></code>.{{/i}}</p>
<h3>{{_i}}Single alert message{{/i}}</h3>
<p>{{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.{{/i}}</p>
<hr>
<h3>{{_i}}Goes great with javascript{{/i}}</h3>
<p>{{_i}}Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.{{/i}}</p>
<p><aclass="btn js-btn"href="./javascript.html#alerts">{{_i}}Get the plugin »</a>{{/i}}</p>
<h3>{{_i}}Example alerts{{/i}}</h3>
<p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
<strong>{{_i}}Warning!{{/i}}</strong>{{_i}}Best check yo self, you're not looking too good.{{/i}}
<strong>{{_i}}Warning!{{/i}}</strong>{{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
</div>
</pre>
</pre>
<p><spanclass="label label-info">{{_i}}Heads up!{{/i}}</span>{{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
<p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
<h3>{{_i}}Dismiss buttons{{/i}}</h3>
<p>{{_i}}Mobile Safari and Mobile Opera browsers, in addition to the <code>data-dismiss="alert"</code> attribute, require an <code>href="#"</code> for the dismissal of alerts when using an <code><a></code> tag.{{/i}}</p>
<p>{{_i}}Alternatively, you may use a <code><button></code> element with the data attribute, which we have opted to do for our docs. When using <code><button></code>, you must include <code>type="button"</code> or your forms may not submit.{{/i}}</p>
<p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>{{_i}}Takes the striped example and animates it (no IE).{{/i}}</p>
<p>{{_i}}Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in all versions of IE.{{/i}}</p>
<p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
<p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
<h3>{{_i}}Browser support{{/i}}</h3>
<h2>{{_i}}Browser support{{/i}}</h2>
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p>
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p>
<p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p>
<p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p>
...
@@ -1653,21 +1875,33 @@
...
@@ -1653,21 +1875,33 @@
<h2>{{_i}}Wells{{/i}}</h2>
<h2>{{_i}}Wells{{/i}}</h2>
<p>{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}</p>
<p>{{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="well">
<divclass="well">
{{_i}}Look, I'm in a well!{{/i}}
{{_i}}Look, I'm in a well!{{/i}}
</div>
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="well">
<div class="well">
...
...
</div>
</div>
</pre>
</pre>
<h4>{{_i}}Optional classes{{/i}}</h4>
<h3>{{_i}}Optional classes{{/i}}</h3>
<p>{{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}</p>
<p>{{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}</p>
<divclass="bs-docs-example">
<divclass="well well-large">
{{_i}}Look, I'm in a well!{{/i}}
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="well well-large">
<div class="well well-large">
...
...
</div>
</div>
</pre>
</pre>
<divclass="bs-docs-example">
<divclass="well well-small">
{{_i}}Look, I'm in a well!{{/i}}
</div>
</div>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<div class="well well-small">
<div class="well well-small">
...
...
...
@@ -1675,7 +1909,9 @@
...
@@ -1675,7 +1909,9 @@
</pre>
</pre>
<h2>{{_i}}Close icon{{/i}}</h2>
<h2>{{_i}}Close icon{{/i}}</h2>
<p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
<p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
<pclass="lead">{{_i}}<ahref="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p>
<pclass="lead">{{_i}}<ahref="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p>
<p>{{_i}}We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.{{/i}}</p>
<p>{{_i}}We love building awesome products on the web just like you, so we made Bootstrap. No matter your skill level, use it as a complete kit or use to start something more complex.{{/i}}</p>
...
@@ -58,7 +58,7 @@
...
@@ -58,7 +58,7 @@
<h2>{{_i}}Responsive design{{/i}}</h2>
<h2>{{_i}}Responsive design{{/i}}</h2>
<p>{{_i}}As of Bootstrap 2, our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}</p>
<p>{{_i}}As of Bootstrap 2, our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}</p>
<p>{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}</p>
<p>{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}</p>
...
@@ -82,26 +82,26 @@
...
@@ -82,26 +82,26 @@
<h1>{{_i}}Built with Bootstrap.{{/i}}</h1>
<h1>{{_i}}Built with Bootstrap.{{/i}}</h1>
<pclass="marketing-byline">{{_i}}For even more sites built with Bootstrap, <ahref="http://builtwithbootstrap.tumblr.com/"target="_blank">visit the unofficial Tumblr</a> or <ahref="./examples.html">browse the examples</a>.{{/i}}</p>
<pclass="marketing-byline">{{_i}}For even more sites built with Bootstrap, <ahref="http://builtwithbootstrap.tumblr.com/"target="_blank">visit the unofficial Tumblr</a> or <ahref="./examples.html">browse the examples</a>.{{/i}}</p>
<pclass="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <ahref="http://jquery.com/"target="_blank">jQuery</a> plugins.{{/i}}
<pclass="lead">{{_i}}Bring Bootstrap's components to life—now with 12 custom <ahref="http://jquery.com/"target="_blank">jQuery</a> plugins.{{/i}}
<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}}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>{{_i}}If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.{{/i}}</p>
<p>{{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}</p>
<p>{{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}</p>
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
<p>{{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}</p>
<pclass="muted"><strong>*</strong>{{_i}}Required for animation in plugins{{/i}}</p>
<pclass="muted"><strong>*</strong>{{_i}}Required for animation in plugins{{/i}}</p>
</div>
</div><!-- /row -->
<divclass="alert alert-info"><strong>{{_i}}Heads up!{{/i}}</strong>{{_i}} If you have downloaded the latest version of Bootstrap, both <strong>bootstrap.js</strong> and <strong>bootstrap.min.js</strong> contain all of these plugins.{{/i}}</div>
</section>
</section>
...
@@ -83,7 +65,6 @@
...
@@ -83,7 +65,6 @@
<h3>{{_i}}About modals{{/i}}</h3>
<h3>{{_i}}About modals{{/i}}</h3>
<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}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}</p>
<p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
<p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
...
@@ -273,7 +254,6 @@ $('#myModal').on('hidden', function () {
...
@@ -273,7 +254,6 @@ $('#myModal').on('hidden', function () {
<h3>{{_i}}About dropdowns{{/i}}</h3>
<h3>{{_i}}About dropdowns{{/i}}</h3>
<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>{{_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>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
<p>{{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}</p>
...
@@ -648,7 +626,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
...
@@ -648,7 +626,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
<h3>{{_i}}About Tooltips{{/i}}</h3>
<h3>{{_i}}About Tooltips{{/i}}</h3>
<p>{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}</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, use css3 for animations, and data-attributes for local title storage.{{/i}}</p>
<pclass="lead">{{_i}}Customize and extend Bootstrap with <ahref="http://lesscss.org"target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
<pclass="lead">{{_i}}Customize and extend Bootstrap with <ahref="http://lesscss.org"target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
</header>
<divclass="subnav">
<ulclass="nav nav-pills">
<sectionid="contents">
<divclass="bs-docs-contents">
<h3>{{_i}}Contents{{/i}}</h3>
<ol>
<li><ahref="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
<li><ahref="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
<pclass="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<pclass="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <ahref="http://glyphicons.com">Glyphicons Free</a>, licensed under <ahref="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
