<h2>Lightweight defaults <small>Same markup, different classes</small></h2>
<h2>Lightweight defaults <small>Same markup, different classes</small></h2>
<divclass="row">
<divclass="span4">
<h3>Powerful base class</h3>
<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>
<h3>When to use</h3>
<p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
<p>Tabs and pills are great for sections of content or navigating between pages of related content.</p>
<h3>Component alignment</h3>
<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>
<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>
</div>
<h3>Basic tabs</h3>
<divclass="span4">
<p>Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:</p>
<h3>Basic tabs</h3>
<ulclass="nav nav-tabs">
<p>Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:</p>
<h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
<h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
<divclass="row">
<divclass="span4">
<h3>Application-style navigation</h3>
<h3>Application-style navigation</h3>
<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>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>
<p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
<hr>
<hr>
<h4>With icons</h4>
<h4>With icons</h4>
<p>Nav lists are also easy to equip with icons. Add the proper <code><i></code> tag with class and you're set.</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>
<h4>Horizontal dividers</h4>
<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
<p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav nav-list">
<ul class="nav nav-list">
...
...
...
@@ -693,23 +678,22 @@
...
@@ -693,23 +678,22 @@
...
...
</ul>
</ul>
</pre>
</pre>
</div>
<divclass="span4">
<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>
<divclass="well"style="padding: 8px 0;">
<divclass="well"style="padding: 8px 0;">
<ulclass="nav nav-list">
<ulclass="nav nav-list">
<liclass="nav-header">List header</li>
<liclass="nav-header">List header</li>
<liclass="active"><ahref="#">Home</a></li>
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Library</a></li>
<li><ahref="#">Library</a></li>
<li><ahref="#">Applications</a></li>
<li><ahref="#">Applications</a></li>
<liclass="nav-header">Another list header</li>
<liclass="nav-header">Another list header</li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Profile</a></li>
<li><ahref="#">Settings</a></li>
<li><ahref="#">Settings</a></li>
<liclass="divider"></li>
<liclass="divider"></li>
<li><ahref="#">Help</a></li>
<li><ahref="#">Help</a></li>
</ul>
</ul>
</div><!-- /well -->
</div><!-- /well -->
<preclass="prettyprint linenums">
<preclass="prettyprint linenums">
<ul class="nav nav-list">
<ul class="nav nav-list">
<li class="nav-header">
<li class="nav-header">
...
@@ -724,23 +708,22 @@
...
@@ -724,23 +708,22 @@
...
...
</ul>
</ul>
</pre>
</pre>
</div>
<divclass="span4">
<h3>Example with icons</h3>
<h3>Example with icons</h3>
<p>Same example, but with <code><i></code> tags for icons.</p>
<p>Same example, but with <code><i></code> tags for icons.</p>
<h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
<h2>Tabbable nav <small>Bring tabs to life via javascript</small></h2>
<divclass="row">
<divclass="span4">
<h3>What's included</h3>
<h3>What's included</h3>
<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>
<p>Changing between them is easy and only requires changing very little markup.</p>
<hr>
<hr>
<h4>Fade in tabs</h4>
<h4>Fade in tabs</h4>
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
<hr>
<hr>
<h4>Requires jQuery plugin</h4>
<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>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>
<p><aclass="btn"href="./javascript.html#tabs">Get the javascript →</a></p>
<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>
<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>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Powerful base class{{/i}}</h3>
<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>
<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>
<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>
<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>
<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>
</div>
<h3>{{_i}}Basic tabs{{/i}}</h3>
<divclass="span4">
<p>{{_i}}Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:{{/i}}</p>
<h3>{{_i}}Basic tabs{{/i}}</h3>
<ulclass="nav nav-tabs">
<p>{{_i}}Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:{{/i}}</p>
<h2>{{_i}}Stackable{{/i}}<small>{{_i}}Make tabs or pills vertical{{/i}}</small></h2>
<h2>{{_i}}Stackable{{/i}}<small>{{_i}}Make tabs or pills vertical{{/i}}</small></h2>
<divclass="row">
<divclass="span4">
<h3>{{_i}}How to stack 'em{{/i}}</h3>
<h3>{{_i}}How to stack 'em{{/i}}</h3>
<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>
<h2>{{_i}}Nav lists{{/i}}<small>{{_i}}Build simple stacked navs, great for sidebars{{/i}}</small></h2>
<divclass="row">
<divclass="span4">
<h3>{{_i}}Application-style navigation{{/i}}</h3>
<h3>{{_i}}Application-style navigation{{/i}}</h3>
<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}}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>
<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>
<hr>
<h4>{{_i}}With icons{{/i}}</h4>
<h4>{{_i}}With icons{{/i}}</h4>
<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>
<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>
<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>
<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">
<preclass="prettyprint linenums">
<ul class="nav nav-list">
<ul class="nav nav-list">
...
...
...
@@ -615,23 +600,22 @@
...
@@ -615,23 +600,22 @@
...
...
</ul>
</ul>
</pre>
</pre>
</div>
<divclass="span4">
<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>
<h2>{{_i}}Tabbable nav{{/i}}<small>{{_i}}Bring tabs to life via javascript{{/i}}</small></h2>
<h2>{{_i}}Tabbable nav{{/i}}<small>{{_i}}Bring tabs to life via javascript{{/i}}</small></h2>
<divclass="row">
<divclass="span4">
<h3>{{_i}}What's included{{/i}}</h3>
<h3>{{_i}}What's included{{/i}}</h3>
<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>
<p>{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}</p>
<hr>
<hr>
<h4>{{_i}}Fade in tabs{{/i}}</h4>
<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>
<p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
<hr>
<hr>
<h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
<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>{{_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>
<p><aclass="btn"href="./javascript.html#tabs">{{_i}}Get the javascript →{{/i}}</a></p>
<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>
