From 2376da40fb020289bcec4d2fe49ca2dc6f4eae97 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 8 Jan 2012 03:11:51 -0800
Subject: cleanup organization of tabbable nav section

---
 docs/components.html | 53 +++++++++++++---------------------------------------
 1 file changed, 13 insertions(+), 40 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index bd8753401..3208e2390 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -262,23 +262,13 @@
   <div class="row">
     <div class="span4">
       <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:</p>
-      <ul>
-        <li>top (default)</li>
-        <li>right</li>
-        <li>bottom</li>
-        <li>left</li>
-      </ul>
+      <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>
-      <h3>Custom jQuery plugin</h3>
-      <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
-      <p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
     </div>
-    <div class="span8">
+    <div class="span4">
       <h3>Tabbable example</h3>
       <p>To make tabs tabbable, wrap the <code>.tabs</code> in another div with class <code>.tabbable</code>.</p>
-      <div class="tabbable">
+      <div class="tabbable" style="margin-bottom: 9px;">
         <ul class="nav tabs">
           <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
           <li><a href="#2" data-toggle="tab">Section 2</a></li>
@@ -296,9 +286,16 @@
           </div>
         </div>
       </div> <!-- /tabbable -->
-      <hr>
-      <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>
+    <div class="span4">
+      <h3>Custom jQuery plugin</h3>
+      <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the javascript docs page.</p>
+      <p><a class="btn" href="./javascript.html/#tabs">Get the javascript &rarr;</a></p>
+    </div>
+  </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>
 <pre class="prettyprint linenums">
 &lt;div class="tabbable"&gt;
   &lt;ul class="nav tabs"&gt;
@@ -315,8 +312,6 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-    </div>
-  </div>
 
   <h3>Tabbable in any direction</h3>
   <div class="row">
@@ -809,28 +804,6 @@
 
 
 
-<!-- Autocomplete
-================================================== -->
-<section id="autocomplete">
-  <div class="page-header">
-    <h1>Autocomplete <small></small></h1>
-  </div>
-
-</section>
-
-
-
-<!-- Carousel
-================================================== -->
-<section id="carousel">
-  <div class="page-header">
-    <h1>Carousel <small></small></h1>
-  </div>
-
-</section>
-
-
-
 <!-- Alerts & Messages
 ================================================== -->
 <section id="alerts">
-- 
cgit v1.2.3


From 21eb2dac8a650ba13dabb41fd2d221ff918cdd30 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 8 Jan 2012 03:18:48 -0800
Subject: add icons in nav list example and markup

---
 docs/components.html | 36 ++++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 3208e2390..2a9d15846 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -222,9 +222,12 @@
       <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>
+      <h4>With icons</h4>
+      <p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
     </div>
     <div class="span4">
-      <h3>Example sidebar navigation</h3>
+      <h3>Example nav list</h3>
+      <p>Take a list of links and add <code>class="nav list"</code>:</p>
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="nav-header">List header</li>
@@ -237,9 +240,6 @@
           <li><a href="#">Help</a></li>
         </ul>
       </div> <!-- /well -->
-    </div>
-    <div class="span4">
-      <h3>Simple markup</h3>
 <pre class="prettyprint linenums">
 &lt;ul class="nav list"&gt;
   &lt;li class="nav-header"&gt;
@@ -253,6 +253,34 @@
   &lt;/li&gt;
   ...
 &lt;/ul&gt;
+</pre>
+    </div>
+    <div class="span4">
+      <h3>Example with icons</h3>
+      <p>Same example, but with <code>&lt;i&gt;</code> tags for icons.</p>
+      <div class="well" style="padding: 8px 0;">
+        <ul class="nav list">
+          <li class="nav-header">List header</li>
+          <li class="active"><a href="#"><i class="home"></i> Home</a></li>
+          <li><a href="#"><i class="book"></i> Library</a></li>
+          <li><a href="#"><i class="pencil"></i> Applications</a></li>
+          <li class="nav-header">Another list header</li>
+          <li><a href="#"><i class="user"></i> Profile</a></li>
+          <li><a href="#"><i class="cog"></i> Settings</a></li>
+          <li><a href="#"><i class="flag"></i> Help</a></li>
+        </ul>
+      </div> <!-- /well -->
+<pre class="prettyprint linenums">
+&lt;ul class="nav list"&gt;
+  ...
+  &lt;li&gt;
+    &lt;a href="#"&gt;
+      &lt;i class="book"&gt;&lt;/i&gt;
+      Library
+    &lt;/a&gt;
+  &lt;/li&gt;
+  ...
+&lt;/ul&gt;
 </pre>
     </div>
   </div>
-- 
cgit v1.2.3