From c0eacca0dbf9fec606968e08e1b21f8ec80e67ef Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Sat, 3 Nov 2012 16:14:44 -0700
Subject: Navs refactor, restoring .nav-list

---
 docs/components.html | 82 ++++++++++++++++++++++------------------------------
 1 file changed, 35 insertions(+), 47 deletions(-)

(limited to 'docs/components.html')

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&mdash;tabs, pills, and lists&mdash;<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>&lt;ul&gt;</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 @@
 &lt;/ul&gt;
 </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">
-&lt;ul class="nav nav-pills"&gt;
+&lt;ul class="nav nav-list"&gt;
   &lt;li class="active"&gt;
     &lt;a href="#"&gt;Home&lt;/a&gt;
   &lt;/li&gt;
@@ -716,50 +715,27 @@
 &lt;/ul&gt;
 </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">
-&lt;ul class="nav nav-pills"&gt;
-  ...
-  &lt;li class="disabled"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
-  ...
-&lt;/ul&gt;
-</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">
-&lt;ul class="nav nav-tabs nav-stacked"&gt;
-  ...
+&lt;ul class="nav nav-pills"&gt;
+  &lt;li class="active"&gt;
+    &lt;a href="#"&gt;Home&lt;/a&gt;
+  &lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;...&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </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 @@
 &lt;/ul&gt;
 </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">
-&lt;ul class="nav nav-tabs nav-stacked"&gt;
+&lt;ul class="nav nav-pills"&gt;
   ...
-  &lt;li class="divider"&gt;&lt;/li&gt;
+  &lt;li class="disabled"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
   ...
 &lt;/ul&gt;
 </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">
 
-- 
cgit v1.2.3