start adding examples to docs for alternate tabs and pills

mdo · mdo · commit 770e7647d137 · 2011-10-09T22:55:12.000-07:00
diff --git a/docs/index.html b/docs/index.html
@@ -1447,6 +1447,7 @@ <h2>Tabs and pills</h2>
       <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 @@ <h2>Tabs and pills</h2>
   &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 @@ <h2>Tabs and pills</h2>
   &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 -->
 
