From a0cd886c56708bbd8d6896ee81b04579f86fb0aa Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Sun, 10 Jun 2012 21:24:13 -0700
Subject: [PATCH] rewrite the rest of the nav section
---
docs/assets/css/docs.css | 3 +-
docs/components.html | 386 ++++++++++++-----------
docs/templates/pages/components.mustache | 386 ++++++++++++-----------
3 files changed, 404 insertions(+), 371 deletions(-)
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 889e3008d3..d6791ff072 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -745,7 +745,8 @@ form.well {
.bs-docs-example .alert,
.bs-docs-example .hero-unit,
.bs-docs-example .pagination,
-.bs-docs-example .navbar {
+.bs-docs-example .navbar,
+.bs-docs-example .nav {
margin-bottom: 5px;
}
.bs-docs-example .pagination {
diff --git a/docs/components.html b/docs/components.html
index c96e4aa034..9d25a8b057 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -532,21 +532,17 @@
</div>
<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>
- <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>
<p>Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:</p>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs">
<li class="active">
@@ -559,11 +555,13 @@
<h3>Basic pills</h3>
<p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
- <ul class="nav nav-pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-pills">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-pills">
<li class="active">
@@ -574,18 +572,24 @@
</ul>
</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>
+
+
+ <hr class="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>
<h3>Stacked tabs</h3>
- <ul class="nav nav-tabs nav-stacked">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-tabs nav-stacked">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs nav-stacked">
...
@@ -593,38 +597,43 @@
</pre>
<h3>Stacked pills</h3>
- <ul class="nav nav-pills nav-stacked">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Messages</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-pills nav-stacked">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Messages</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-pills nav-stacked">
...
</ul>
</pre>
- <h2>Dropdowns <small>For advanced nav components</small></h2>
- <h3>Rich menus made easy</h3>
- <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 <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.</p>
+ <hr class="bs-docs-separator">
+
+
+ <h2>Dropdowns</h2>
+ <p>Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
<h3>Tabs with dropdowns</h3>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Help</a></li>
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Help</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs">
<li class="dropdown">
@@ -642,20 +651,22 @@
</pre>
<h3>Pills with dropdowns</h3>
- <ul class="nav nav-pills">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Help</a></li>
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">Action</a></li>
- <li><a href="#">Another action</a></li>
- <li><a href="#">Something else here</a></li>
- <li class="divider"></li>
- <li><a href="#">Separated link</a></li>
- </ul>
- </li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-pills">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Help</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-pills">
<li class="dropdown">
@@ -672,39 +683,30 @@
</ul>
</pre>
- <h2>Nav lists <small>Build simple stacked navs, great for sidebars</small></h2>
- <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>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
- <hr>
- <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>
- <h4>Horizontal dividers</h4>
- <p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
-<pre class="prettyprint linenums">
-<ul class="nav nav-list">
- ...
- <li class="divider"></li>
- ...
-</ul>
-</pre>
+ <hr class="bs-docs-separator">
+
+
+ <h2>Nav lists</h2>
+ <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>
<h3>Example nav list</h3>
<p>Take a list of links and add <code>class="nav nav-list"</code>:</p>
- <div class="well" style="padding: 8px 0;">
- <ul class="nav nav-list">
- <li class="nav-header">List header</li>
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">Library</a></li>
- <li><a href="#">Applications</a></li>
- <li class="nav-header">Another list header</li>
- <li><a href="#">Profile</a></li>
- <li><a href="#">Settings</a></li>
- <li class="divider"></li>
- <li><a href="#">Help</a></li>
- </ul>
- </div> <!-- /well -->
+ <div class="bs-docs-example">
+ <div class="well" style="max-width: 340px; padding: 8px 0;">
+ <ul class="nav nav-list">
+ <li class="nav-header">List header</li>
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Library</a></li>
+ <li><a href="#">Applications</a></li>
+ <li class="nav-header">Another list header</li>
+ <li><a href="#">Profile</a></li>
+ <li><a href="#">Settings</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Help</a></li>
+ </ul>
+ </div> <!-- /well -->
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-list">
<li class="nav-header">
@@ -722,19 +724,21 @@
<h3>Example with icons</h3>
<p>Same example, but with <code><i></code> tags for icons.</p>
- <div class="well" style="padding: 8px 0;">
- <ul class="nav nav-list">
- <li class="nav-header">List header</li>
- <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
- <li><a href="#"><i class="icon-book"></i> Library</a></li>
- <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
- <li class="nav-header">Another list header</li>
- <li><a href="#"><i class="icon-user"></i> Profile</a></li>
- <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
- <li class="divider"></li>
- <li><a href="#"><i class="icon-flag"></i> Help</a></li>
- </ul>
- </div> <!-- /well -->
+ <div class="bs-docs-example">
+ <div class="well" style="max-width: 340px; padding: 8px 0;">
+ <ul class="nav nav-list">
+ <li class="nav-header">List header</li>
+ <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
+ <li><a href="#"><i class="icon-book"></i> Library</a></li>
+ <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
+ <li class="nav-header">Another list header</li>
+ <li><a href="#"><i class="icon-user"></i> Profile</a></li>
+ <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
+ <li class="divider"></li>
+ <li><a href="#"><i class="icon-flag"></i> Help</a></li>
+ </ul>
+ </div> <!-- /well -->
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-list">
...
@@ -748,44 +752,45 @@
</ul>
</pre>
+ <h3>Horizontal dividers</h3>
+ <p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
+<pre class="prettyprint linenums">
+<ul class="nav nav-list">
+ ...
+ <li class="divider"></li>
+ ...
+</ul>
+</pre>
+
+
+ <hr class="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>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 <a href="./javascript.html#tabs">on the javascript docs page</a>.</p>
- <p><a class="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>
- <div class="tabbable" style="margin-bottom: 18px;">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
- <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
- <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
- </ul>
- <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
- <div class="tab-pane active" id="tab1">
- <p>I'm in Section 1.</p>
- </div>
- <div class="tab-pane" id="tab2">
- <p>Howdy, I'm in Section 2.</p>
- </div>
- <div class="tab-pane" id="tab3">
- <p>What up girl, this is Section 3.</p>
+ <div class="bs-docs-example">
+ <div class="tabbable" style="margin-bottom: 18px;">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
+ <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
+ <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
+ </ul>
+ <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+ <div class="tab-pane active" id="tab1">
+ <p>I'm in Section 1.</p>
+ </div>
+ <div class="tab-pane" id="tab2">
+ <p>Howdy, I'm in Section 2.</p>
+ </div>
+ <div class="tab-pane" id="tab3">
+ <p>What up girl, this is Section 3.</p>
+ </div>
</div>
- </div>
- </div> <!-- /tabbable -->
- <p>For right or left aligned tabs, wrap the <code>.nav-tabs</code> and <code>.tab-content</code> in <code>.tabbable</code>.</p>
-
- <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>
+ </div> <!-- /tabbable -->
+ </div>
<pre class="prettyprint linenums">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
@@ -803,30 +808,37 @@
</div>
</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 <a href="./javascript.html#tabs">on the javascript docs page</a>.</p>
<h3>Tabbable in any direction</h3>
<h4>Tabs on the bottom</h4>
<p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
- <div class="tabbable tabs-below">
- <div class="tab-content">
- <div class="tab-pane active" id="A">
- <p>I'm in Section A.</p>
- </div>
- <div class="tab-pane" id="B">
- <p>Howdy, I'm in Section B.</p>
- </div>
- <div class="tab-pane" id="C">
- <p>What up girl, this is Section C.</p>
+ <div class="bs-docs-example">
+ <div class="tabbable tabs-below">
+ <div class="tab-content">
+ <div class="tab-pane active" id="A">
+ <p>I'm in Section A.</p>
+ </div>
+ <div class="tab-pane" id="B">
+ <p>Howdy, I'm in Section B.</p>
+ </div>
+ <div class="tab-pane" id="C">
+ <p>What up girl, this is Section C.</p>
+ </div>
</div>
- </div>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
- <li><a href="#B" data-toggle="tab">Section 2</a></li>
- <li><a href="#C" data-toggle="tab">Section 3</a></li>
- </ul>
- </div> <!-- /tabbable -->
-<pre class="prettyprint linenums" style="margin-top: 11px;">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
+ <li><a href="#B" data-toggle="tab">Section 2</a></li>
+ <li><a href="#C" data-toggle="tab">Section 3</a></li>
+ </ul>
+ </div> <!-- /tabbable -->
+ </div>
+<pre class="prettyprint linenums">
<div class="tabbable tabs-below">
<div class="tab-content">
...
@@ -839,24 +851,26 @@
<h4>Tabs on the left</h4>
<p>Swap the class to put tabs on the left.</p>
- <div class="tabbable tabs-left">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
- <li><a href="#lB" data-toggle="tab">Section 2</a></li>
- <li><a href="#lC" data-toggle="tab">Section 3</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="lA">
- <p>I'm in Section A.</p>
- </div>
- <div class="tab-pane" id="lB">
- <p>Howdy, I'm in Section B.</p>
- </div>
- <div class="tab-pane" id="lC">
- <p>What up girl, this is Section C.</p>
+ <div class="bs-docs-example">
+ <div class="tabbable tabs-left">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
+ <li><a href="#lB" data-toggle="tab">Section 2</a></li>
+ <li><a href="#lC" data-toggle="tab">Section 3</a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="lA">
+ <p>I'm in Section A.</p>
+ </div>
+ <div class="tab-pane" id="lB">
+ <p>Howdy, I'm in Section B.</p>
+ </div>
+ <div class="tab-pane" id="lC">
+ <p>What up girl, this is Section C.</p>
+ </div>
</div>
- </div>
- </div> <!-- /tabbable -->
+ </div> <!-- /tabbable -->
+ </div>
<pre class="prettyprint linenums">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
@@ -870,24 +884,26 @@
<h4>Tabs on the right</h4>
<p>Swap the class to put tabs on the right.</p>
- <div class="tabbable tabs-right">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
- <li><a href="#rB" data-toggle="tab">Section 2</a></li>
- <li><a href="#rC" data-toggle="tab">Section 3</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="rA">
- <p>I'm in Section A.</p>
- </div>
- <div class="tab-pane" id="rB">
- <p>Howdy, I'm in Section B.</p>
- </div>
- <div class="tab-pane" id="rC">
- <p>What up girl, this is Section C.</p>
+ <div class="bs-docs-example">
+ <div class="tabbable tabs-right">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
+ <li><a href="#rB" data-toggle="tab">Section 2</a></li>
+ <li><a href="#rC" data-toggle="tab">Section 3</a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="rA">
+ <p>I'm in Section A.</p>
+ </div>
+ <div class="tab-pane" id="rB">
+ <p>Howdy, I'm in Section B.</p>
+ </div>
+ <div class="tab-pane" id="rC">
+ <p>What up girl, this is Section C.</p>
+ </div>
</div>
- </div>
- </div> <!-- /tabbable -->
+ </div> <!-- /tabbable -->
+ </div>
<pre class="prettyprint linenums">
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index cf40248afb..ea8621b45e 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -455,21 +455,17 @@
</div>
<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>
- <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>
<p>{{_i}}Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:{{/i}}</p>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
- <li><a href="#">{{_i}}Messages{{/i}}</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+ <li><a href="#">{{_i}}Messages{{/i}}</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs">
<li class="active">
@@ -482,11 +478,13 @@
<h3>{{_i}}Basic pills{{/i}}</h3>
<p>{{_i}}Take that same HTML, but use <code>.nav-pills</code> instead:{{/i}}</p>
- <ul class="nav nav-pills">
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
- <li><a href="#">{{_i}}Messages{{/i}}</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-pills">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+ <li><a href="#">{{_i}}Messages{{/i}}</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-pills">
<li class="active">
@@ -497,18 +495,24 @@
</ul>
</pre>
+ <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>
+
+
+ <hr class="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>
<h3>{{_i}}Stacked tabs{{/i}}</h3>
- <ul class="nav nav-tabs nav-stacked">
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
- <li><a href="#">{{_i}}Messages{{/i}}</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-tabs nav-stacked">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+ <li><a href="#">{{_i}}Messages{{/i}}</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs nav-stacked">
...
@@ -516,38 +520,43 @@
</pre>
<h3>{{_i}}Stacked pills{{/i}}</h3>
- <ul class="nav nav-pills nav-stacked">
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
- <li><a href="#">{{_i}}Messages{{/i}}</a></li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-pills nav-stacked">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+ <li><a href="#">{{_i}}Messages{{/i}}</a></li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-pills nav-stacked">
...
</ul>
</pre>
- <h2>{{_i}}Dropdowns{{/i}} <small>{{_i}}For advanced nav components{{/i}}</small></h2>
- <h3>{{_i}}Rich menus made easy{{/i}}</h3>
- <p>{{_i}}Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.{{/i}}</p>
- <p>{{_i}}Head over to the Javascript page to read the docs on <a href="./javascript.html#tabs">initializing dropdowns</a> in Bootstrap.{{/i}}</p>
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}Dropdowns{{/i}}</h2>
+ <p>{{_i}}Add dropdown menus with a little extra HTML and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
<h3>{{_i}}Tabs with dropdowns{{/i}}</h3>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Help{{/i}}</a></li>
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
- </ul>
- </li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Help{{/i}}</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li class="divider"></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
<pre class="prettyprint linenums">
<ul class="nav nav-tabs">
<li class="dropdown">
@@ -565,20 +574,22 @@
</pre>
<h3>{{_i}}Pills with dropdowns{{/i}}</h3>
- <ul class="nav nav-pills">
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Help{{/i}}</a></li>
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
- <ul class="dropdown-menu">
- <li><a href="#">{{_i}}Action{{/i}}</a></li>
- <li><a href="#">{{_i}}Another action{{/i}}</a></li>
- <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
- <li class="divider"></li>
- <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
- </ul>
- </li>
- </ul>
+ <div class="bs-docs-example">
+ <ul class="nav nav-pills">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Help{{/i}}</a></li>
+ <li class="dropdown">
+ <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+ <ul class="dropdown-menu">
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li class="divider"></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>{{! /example }}
<pre class="prettyprint linenums">
<ul class="nav nav-pills">
<li class="dropdown">
@@ -595,39 +606,30 @@
</ul>
</pre>
- <h2>{{_i}}Nav lists{{/i}} <small>{{_i}}Build simple stacked navs, great for sidebars{{/i}}</small></h2>
- <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}}Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.{{/i}}</p>
- <hr>
- <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>
- <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>
-<pre class="prettyprint linenums">
-<ul class="nav nav-list">
- ...
- <li class="divider"></li>
- ...
-</ul>
-</pre>
+ <hr class="bs-docs-separator">
+
+
+ <h2>{{_i}}Nav lists{{/i}}</h2>
+ <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>
<h3>{{_i}}Example nav list{{/i}}</h3>
<p>{{_i}}Take a list of links and add <code>class="nav nav-list"</code>:{{/i}}</p>
- <div class="well" style="padding: 8px 0;">
- <ul class="nav nav-list">
- <li class="nav-header">{{_i}}List header{{/i}}</li>
- <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
- <li><a href="#">{{_i}}Library{{/i}}</a></li>
- <li><a href="#">{{_i}}Applications{{/i}}</a></li>
- <li class="nav-header">{{_i}}Another list header{{/i}}</li>
- <li><a href="#">{{_i}}Profile{{/i}}</a></li>
- <li><a href="#">{{_i}}Settings{{/i}}</a></li>
- <li class="divider"></li>
- <li><a href="#">{{_i}}Help{{/i}}</a></li>
- </ul>
- </div> <!-- /well -->
+ <div class="bs-docs-example">
+ <div class="well" style="max-width: 340px; padding: 8px 0;">
+ <ul class="nav nav-list">
+ <li class="nav-header">{{_i}}List header{{/i}}</li>
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Library{{/i}}</a></li>
+ <li><a href="#">{{_i}}Applications{{/i}}</a></li>
+ <li class="nav-header">{{_i}}Another list header{{/i}}</li>
+ <li><a href="#">{{_i}}Profile{{/i}}</a></li>
+ <li><a href="#">{{_i}}Settings{{/i}}</a></li>
+ <li class="divider"></li>
+ <li><a href="#">{{_i}}Help{{/i}}</a></li>
+ </ul>
+ </div> <!-- /well -->
+ </div>{{! /example }}
<pre class="prettyprint linenums">
<ul class="nav nav-list">
<li class="nav-header">
@@ -645,19 +647,21 @@
<h3>{{_i}}Example with icons{{/i}}</h3>
<p>{{_i}}Same example, but with <code><i></code> tags for icons.{{/i}}</p>
- <div class="well" style="padding: 8px 0;">
- <ul class="nav nav-list">
- <li class="nav-header">{{_i}}List header{{/i}}</li>
- <li class="active"><a href="#"><i class="icon-white icon-home"></i> {{_i}}Home{{/i}}</a></li>
- <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
- <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
- <li class="nav-header">{{_i}}Another list header{{/i}}</li>
- <li><a href="#"><i class="icon-user"></i> {{_i}}Profile{{/i}}</a></li>
- <li><a href="#"><i class="icon-cog"></i> {{_i}}Settings{{/i}}</a></li>
- <li class="divider"></li>
- <li><a href="#"><i class="icon-flag"></i> {{_i}}Help{{/i}}</a></li>
- </ul>
- </div> <!-- /well -->
+ <div class="bs-docs-example">
+ <div class="well" style="max-width: 340px; padding: 8px 0;">
+ <ul class="nav nav-list">
+ <li class="nav-header">{{_i}}List header{{/i}}</li>
+ <li class="active"><a href="#"><i class="icon-white icon-home"></i> {{_i}}Home{{/i}}</a></li>
+ <li><a href="#"><i class="icon-book"></i> {{_i}}Library{{/i}}</a></li>
+ <li><a href="#"><i class="icon-pencil"></i> {{_i}}Applications{{/i}}</a></li>
+ <li class="nav-header">{{_i}}Another list header{{/i}}</li>
+ <li><a href="#"><i class="icon-user"></i> {{_i}}Profile{{/i}}</a></li>
+ <li><a href="#"><i class="icon-cog"></i> {{_i}}Settings{{/i}}</a></li>
+ <li class="divider"></li>
+ <li><a href="#"><i class="icon-flag"></i> {{_i}}Help{{/i}}</a></li>
+ </ul>
+ </div> <!-- /well -->
+ </div>{{! /example }}
<pre class="prettyprint linenums">
<ul class="nav nav-list">
...
@@ -671,44 +675,45 @@
</ul>
</pre>
+ <h3>{{_i}}Horizontal dividers{{/i}}</h3>
+ <p>{{_i}}Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:{{/i}}</p>
+<pre class="prettyprint linenums">
+<ul class="nav nav-list">
+ ...
+ <li class="divider"></li>
+ ...
+</ul>
+</pre>
+
+
+ <hr class="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}}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 <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
- <p><a class="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>
- <div class="tabbable" style="margin-bottom: 18px;">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
- <li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
- <li><a href="#tab3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
- </ul>
- <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
- <div class="tab-pane active" id="tab1">
- <p>{{_i}}I'm in Section 1.{{/i}}</p>
- </div>
- <div class="tab-pane" id="tab2">
- <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
- </div>
- <div class="tab-pane" id="tab3">
- <p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
+ <div class="bs-docs-example">
+ <div class="tabbable" style="margin-bottom: 18px;">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
+ <li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
+ <li><a href="#tab3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
+ </ul>
+ <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
+ <div class="tab-pane active" id="tab1">
+ <p>{{_i}}I'm in Section 1.{{/i}}</p>
+ </div>
+ <div class="tab-pane" id="tab2">
+ <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
+ </div>
+ <div class="tab-pane" id="tab3">
+ <p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
+ </div>
</div>
- </div>
- </div> <!-- /tabbable -->
- <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>
-
- <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>
+ </div> <!-- /tabbable -->
+ </div>{{! /example }}
<pre class="prettyprint linenums">
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
@@ -726,30 +731,37 @@
</div>
</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 <a href="./javascript.html#tabs">on the javascript docs page</a>.{{/i}}</p>
<h3>{{_i}}Tabbable in any direction{{/i}}</h3>
<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>
- <div class="tabbable tabs-below">
- <div class="tab-content">
- <div class="tab-pane active" id="A">
- <p>{{_i}}I'm in Section A.{{/i}}</p>
- </div>
- <div class="tab-pane" id="B">
- <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
- </div>
- <div class="tab-pane" id="C">
- <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
+ <div class="bs-docs-example">
+ <div class="tabbable tabs-below">
+ <div class="tab-content">
+ <div class="tab-pane active" id="A">
+ <p>{{_i}}I'm in Section A.{{/i}}</p>
+ </div>
+ <div class="tab-pane" id="B">
+ <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
+ </div>
+ <div class="tab-pane" id="C">
+ <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
+ </div>
</div>
- </div>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#A" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
- <li><a href="#B" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
- <li><a href="#C" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
- </ul>
- </div> <!-- /tabbable -->
-<pre class="prettyprint linenums" style="margin-top: 11px;">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#A" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
+ <li><a href="#B" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
+ <li><a href="#C" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
+ </ul>
+ </div> <!-- /tabbable -->
+ </div>{{! /example }}
+<pre class="prettyprint linenums">
<div class="tabbable tabs-below">
<div class="tab-content">
...
@@ -762,24 +774,26 @@
<h4>{{_i}}Tabs on the left{{/i}}</h4>
<p>{{_i}}Swap the class to put tabs on the left.{{/i}}</p>
- <div class="tabbable tabs-left">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#lA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
- <li><a href="#lB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
- <li><a href="#lC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="lA">
- <p>{{_i}}I'm in Section A.{{/i}}</p>
- </div>
- <div class="tab-pane" id="lB">
- <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
- </div>
- <div class="tab-pane" id="lC">
- <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
+ <div class="bs-docs-example">
+ <div class="tabbable tabs-left">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#lA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
+ <li><a href="#lB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
+ <li><a href="#lC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="lA">
+ <p>{{_i}}I'm in Section A.{{/i}}</p>
+ </div>
+ <div class="tab-pane" id="lB">
+ <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
+ </div>
+ <div class="tab-pane" id="lC">
+ <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
+ </div>
</div>
- </div>
- </div> <!-- /tabbable -->
+ </div> <!-- /tabbable -->
+ </div>{{! /example }}
<pre class="prettyprint linenums">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
@@ -793,24 +807,26 @@
<h4>{{_i}}Tabs on the right{{/i}}</h4>
<p>{{_i}}Swap the class to put tabs on the right.{{/i}}</p>
- <div class="tabbable tabs-right">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#rA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
- <li><a href="#rB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
- <li><a href="#rC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
- </ul>
- <div class="tab-content">
- <div class="tab-pane active" id="rA">
- <p>{{_i}}I'm in Section A.{{/i}}</p>
- </div>
- <div class="tab-pane" id="rB">
- <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
- </div>
- <div class="tab-pane" id="rC">
- <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
+ <div class="bs-docs-example">
+ <div class="tabbable tabs-right">
+ <ul class="nav nav-tabs">
+ <li class="active"><a href="#rA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
+ <li><a href="#rB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
+ <li><a href="#rC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
+ </ul>
+ <div class="tab-content">
+ <div class="tab-pane active" id="rA">
+ <p>{{_i}}I'm in Section A.{{/i}}</p>
+ </div>
+ <div class="tab-pane" id="rB">
+ <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
+ </div>
+ <div class="tab-pane" id="rC">
+ <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
+ </div>
</div>
- </div>
- </div> <!-- /tabbable -->
+ </div> <!-- /tabbable -->
+ </div>{{! /example }}
<pre class="prettyprint linenums">
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
--
GitLab