From b001c8a6cf0e49bb1335b3a53bca154dbd4c5516 Mon Sep 17 00:00:00 2001
From: Arnold Daniels <arnold@adaniels.nl>
Date: Mon, 16 Jul 2012 22:01:39 +0200
Subject: [PATCH] Documented tabbable improvements Added
 jasny/navs-tabbable.less to jasny/bootstrap.less

---
 docs/templates/pages/components.mustache | 48 ++++++++++++++++++++++--
 docs/templates/pages/index.mustache      |  4 ++
 less/jasny/bootstrap.less                |  3 ++
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index b1f85899..381af28c 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -727,7 +727,7 @@
             <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
           </div>
           <div class="tab-pane" id="tab3">
-            <p>{{_i}}What up girl, this is Section 3.{{/i}}</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros. </p>
           </div>
         </div>
       </div> <!-- /tabbable -->
@@ -769,7 +769,7 @@
             <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
           </div>
           <div class="tab-pane" id="C">
-            <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros. </p>
           </div>
         </div>
         <ul class="nav nav-tabs">
@@ -806,7 +806,7 @@
             <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
           </div>
           <div class="tab-pane" id="lC">
-            <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros.</p>
           </div>
         </div>
       </div> <!-- /tabbable -->
@@ -838,7 +838,7 @@
             <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
           </div>
           <div class="tab-pane" id="rC">
-            <p>{{_i}}What up girl, this is Section C.{{/i}}</p>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros.</p>
           </div>
         </div>
       </div> <!-- /tabbable -->
@@ -855,6 +855,46 @@
     </div>
   </div>
 
+  <h3>{{_i}}Bordered tabbable{{/i}}</h3>
+  <div class="row">
+    <div class="span4">
+      <p>{{_i}}You can place a border around the tab content by adding <code>.tabbable-bordered</code> to the <code>.tabbable</code>.{{/i}}</p>
+      <div class="alert">{{_i}}<b>Warning!</b> A bordered tabbable with the tabs on the left or right side, will not look well if the height of <code>.tab-content</code> is less than the height of <code>.nav-tabs</code>.{{/i}}</div>
+    </div>
+    <div class="span4">
+      <div class="tabbable tabbable-bordered">
+        <ul class="nav nav-tabs">
+          <li class="active"><a href="#bA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
+          <li><a href="#bB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
+          <li><a href="#bC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
+        </ul>
+        <div class="tab-content">
+          <div class="tab-pane active" id="bA">
+            <p>{{_i}}I'm in Section A.{{/i}}</p>
+          </div>
+          <div class="tab-pane" id="bB">
+            <p>{{_i}}Howdy, I'm in Section B.{{/i}}</p>
+          </div>
+          <div class="tab-pane" id="bC">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis sapien lorem. Nullam justo leo, rhoncus et convallis id, tincidunt non lacus. Curabitur cursus dignissim ipsum, id ultricies est rhoncus sed. Proin vel dapibus lacus. Sed vulputate iaculis turpis vel egestas. Curabitur in accumsan nunc. In et urna ligula. Sed lorem neque, suscipit sed consequat at, laoreet vitae sapien. Curabitur congue dapibus dolor et eleifend. Curabitur vel lacinia eros.</p>
+          </div>
+        </div>
+      </div> <!-- /tabbable -->
+    </div>
+    <div class="span4">
+<pre class="prettyprint linenums">
+&lt;div class="tabbable tabbable-bordered"&gt;
+  &lt;ul class="nav nav-tabs"&gt;
+    ...
+  &lt;/ul&gt;
+  &lt;div class="tab-content"&gt;
+    ...
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div>  
+
 </section>
 
 
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 3773af6b..8edff7bf 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -56,6 +56,10 @@
       <p>{{_i}}Go beyond uneditable input and create a full uneditable form, with disabled and uneditable elements.{{/i}}</p>
       <p>{{_i}}Add .editor to a textarea to create a larger field for content editing.{{/i}}</p>
     </div>
+    <div class="span3">
+      <h3><a href="./components.html#navs">{{_i}}Tabbable{{/i}}</a></h3>
+      <p>{{_i}}Tabs work better than ever. You now have a bordered tabbable available. Also, a container can be turned into a tabbable.{{/i}}</p>
+    </div>
   </div><!--/row-->
 </div>
 
diff --git a/less/jasny/bootstrap.less b/less/jasny/bootstrap.less
index e6f96cc2..2f8a1309 100644
--- a/less/jasny/bootstrap.less
+++ b/less/jasny/bootstrap.less
@@ -16,3 +16,6 @@
 @import "forms-uneditable.less";
 @import "forms-editor.less";
 
+
+// Components: Nav
+@import "navs-tabbable.less";