diff options
Diffstat (limited to 'docs/components.html')
| -rw-r--r-- | docs/components.html | 82 |
1 files changed, 35 insertions, 47 deletions
diff --git a/docs/components.html b/docs/components.html index 969bd0eeb..e59351782 100644 --- a/docs/components.html +++ b/docs/components.html @@ -668,18 +668,17 @@ - <!-- Nav, Tabs, & Pills + <!-- Navs ================================================== --> <section id="navs"> <div class="page-header"> - <h1>Nav: tabs, pills, and lists</small></h1> + <h1>Navs</small></h1> </div> - <h2>Lightweight defaults <small>Same markup, different classes</small></h2> - <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 class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p> - <h3>Basic tabs</h3> - <p>Take a regular <code><ul></code> of links and add <code>.nav-tabs</code>:</p> + <h2>Tabs</h2> + <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p> <div class="bs-docs-example"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> @@ -697,17 +696,17 @@ </ul> </pre> - <h3>Basic pills</h3> - <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> + <h2>List</h2> + <p>Swap the tabs class for <code>.nav-list</code>.</p> <div class="bs-docs-example"> - <ul class="nav nav-pills"> + <ul class="nav nav-list" style="max-width: 300px;"> <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"> +<ul class="nav nav-list"> <li class="active"> <a href="#">Home</a> </li> @@ -716,50 +715,27 @@ </ul> </pre> - <h3>Disabled state</h3> - <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p> + <h2>Pills</h2> + <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> <div class="bs-docs-example"> <ul class="nav nav-pills"> - <li><a href="#">Clickable link</a></li> - <li><a href="#">Clickable link</a></li> - <li class="disabled"><a href="#">Disabled link</a></li> - </ul> - </div> -<pre class="prettyprint linenums"> -<ul class="nav nav-pills"> - ... - <li class="disabled"><a href="#">Home</a></li> - ... -</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</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> - <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"> - ... +<ul class="nav nav-pills"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> </ul> </pre> - - <h3>Stacked pills</h3> + <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p> <div class="bs-docs-example"> - <ul class="nav nav-pills nav-stacked"> + <ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> @@ -771,16 +747,28 @@ </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> + <h2>Options</h2> + + <h3>Disabled state</h3> + <p>For any nav component (tabs, pills, or list), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>. Links will remain clickable, however, unless you remove the <code>href</code> attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.</p> + <div class="bs-docs-example"> + <ul class="nav nav-pills"> + <li><a href="#">Clickable link</a></li> + <li><a href="#">Clickable link</a></li> + <li class="disabled"><a href="#">Disabled link</a></li> + </ul> + </div> <pre class="prettyprint linenums"> -<ul class="nav nav-tabs nav-stacked"> +<ul class="nav nav-pills"> ... - <li class="divider"></li> + <li class="disabled"><a href="#">Home</a></li> ... </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"> |