From 770e7647d1372974a7e89d53259ce6b3a6ba8f68 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Sun, 9 Oct 2011 22:55:12 -0700
Subject: [PATCH] start adding examples to docs for alternate tabs and pills

---
 docs/index.html | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/docs/index.html b/docs/index.html
index 846d26ed10..a83b75e629 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1447,6 +1447,7 @@
       <p>Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.</p>
     </div>
     <div class="span12">
+      <h3>Basic tab example</h3>
       <ul class="tabs">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Profile</a></li>
@@ -1472,6 +1473,29 @@
   &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
+      <h3>Alternate styles</h3>
+      <p>You can also use tabs that are stacked on either side of an element, or on the bottom.</p>
+      <ul class="tabs tabs-left">
+        <li class="active"><a href="#">Active link</a></li>
+        <li><a href="#">Link</a></li>
+        <li><a href="#">Linky link</a></li>
+        <li><a href="#">What up link</a></li>
+      </ul>
+      <ul class="tabs tabs-right">
+        <li class="active"><a href="#">Active link</a></li>
+        <li><a href="#">Link</a></li>
+        <li><a href="#">Linky link</a></li>
+        <li><a href="#">What up link</a></li>
+      </ul>
+      <ul class="tabs tabs-bottom">
+        <li class="active"><a href="#">Active link</a></li>
+        <li><a href="#">Link</a></li>
+        <li><a href="#">Linky link</a></li>
+        <li><a href="#">What up link</a></li>
+      </ul>
+      <p>In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.</p>
+      <hr>
+      <h3>Basic pills example</h3>
       <ul class="pills">
         <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Profile</a></li>
@@ -1488,6 +1512,15 @@
   &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
+      <h3>Alternate styles</h3>
+      <p>With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs</p>
+      <ul class="pills pills-vertical">
+        <li class="active"><a href="#">Home</a></li>
+        <li><a href="#">Profile</a></li>
+        <li><a href="#">Messages</a></li>
+        <li><a href="#">Settings</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
     </div>
   </div><!-- /row -->