remove tabbable tabs on left, right, and bottom; instead, from here out use stacked...

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e9be2056472b8616f348441a9a9af0711194cd6f..c0b6ef3957ba9fb2859bb769bfb9112f7b85ebca 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3612,12 +3612,6 @@ input[type="button"].btn-block {
   overflow: auto;
 }
 
-.tabs-below > .nav-tabs,
-.tabs-right > .nav-tabs,
-.tabs-left > .nav-tabs {
-  border-bottom: 0;
-}
-
 .tab-content > .tab-pane,
 .pill-content > .pill-pane {
   display: none;
@@ -3628,81 +3622,6 @@ input[type="button"].btn-block {
   display: block;
 }
 
-.tabs-below > .nav-tabs {
-  border-top: 1px solid #ddd;
-}
-
-.tabs-below > .nav-tabs > li {
-  margin-top: -1px;
-  margin-bottom: 0;
-}
-
-.tabs-below > .nav-tabs > li > a {
-  border-radius: 0 0 4px 4px;
-}
-
-.tabs-below > .nav-tabs > li > a:hover {
-  border-top-color: #ddd;
-  border-bottom-color: transparent;
-}
-
-.tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover {
-  border-color: transparent #ddd #ddd #ddd;
-}
-
-.tabs-left > .nav-tabs > li,
-.tabs-right > .nav-tabs > li {
-  float: none;
-}
-
-.tabs-left > .nav-tabs > li > a,
-.tabs-right > .nav-tabs > li > a {
-  min-width: 74px;
-  margin-right: 0;
-  margin-bottom: 3px;
-}
-
-.tabs-left > .nav-tabs {
-  float: left;
-  margin-right: 19px;
-  border-right: 1px solid #ddd;
-}
-
-.tabs-left > .nav-tabs > li > a {
-  margin-right: -1px;
-  border-radius: 4px 0 0 4px;
-}
-
-.tabs-left > .nav-tabs > li > a:hover {
-  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
-}
-
-.tabs-left > .nav-tabs .active > a,
-.tabs-left > .nav-tabs .active > a:hover {
-  border-color: #ddd transparent #ddd #ddd;
-}
-
-.tabs-right > .nav-tabs {
-  float: right;
-  margin-left: 19px;
-  border-left: 1px solid #ddd;
-}
-
-.tabs-right > .nav-tabs > li > a {
-  margin-left: -1px;
-  border-radius: 0 4px 4px 0;
-}
-
-.tabs-right > .nav-tabs > li > a:hover {
-  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
-}
-
-.tabs-right > .nav-tabs .active > a,
-.tabs-right > .nav-tabs .active > a:hover {
-  border-color: #ddd #ddd #ddd transparent;
-}
-
 .nav > .disabled > a {
   color: #999999;
 }

diff --git a/docs/components.html b/docs/components.html
index 7808d0477402a4b1ffa2b746d783056375b2efd9..87bef8db28d14e8393b04fc9d780a52e20d783ea 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -860,159 +860,6 @@
 </ul>
 </pre>
 
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>Tabbable nav</h2>
-          <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>
-
-          <h3>Tabbable example</h3>
-          <p>To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.</p>
-          <div class="bs-docs-example">
-            <div class="tabbable" style="margin-bottom: 18px;">
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
-                <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
-                <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
-              </ul>
-              <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
-                <div class="tab-pane active" id="tab1">
-                  <p>I'm in Section 1.</p>
-                </div>
-                <div class="tab-pane" id="tab2">
-                  <p>Howdy, I'm in Section 2.</p>
-                </div>
-                <div class="tab-pane" id="tab3">
-                  <p>What up girl, this is Section 3.</p>
-                </div>
-              </div>
-            </div> <!-- /tabbable -->
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    &lt;div class="tab-pane active" id="tab1"&gt;
-      &lt;p&gt;I'm in Section 1.&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;div class="tab-pane" id="tab2"&gt;
-      &lt;p&gt;Howdy, I'm in Section 2.&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>Fade in tabs</h4>
-          <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
-
-          <h4>Requires jQuery plugin</h4>
-          <p>All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.</p>
-
-          <h3>Tabbable in any direction</h3>
-
-          <h4>Tabs on the bottom</h4>
-          <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>
-          <div class="bs-docs-example">
-            <div class="tabbable tabs-below">
-              <div class="tab-content">
-                <div class="tab-pane active" id="A">
-                  <p>I'm in Section A.</p>
-                </div>
-                <div class="tab-pane" id="B">
-                  <p>Howdy, I'm in Section B.</p>
-                </div>
-                <div class="tab-pane" id="C">
-                  <p>What up girl, this is Section C.</p>
-                </div>
-              </div>
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
-                <li><a href="#B" data-toggle="tab">Section 2</a></li>
-                <li><a href="#C" data-toggle="tab">Section 3</a></li>
-              </ul>
-            </div> <!-- /tabbable -->
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-below"&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>Tabs on the left</h4>
-          <p>Swap the class to put tabs on the left.</p>
-          <div class="bs-docs-example">
-            <div class="tabbable tabs-left">
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#lA" data-toggle="tab">Section 1</a></li>
-                <li><a href="#lB" data-toggle="tab">Section 2</a></li>
-                <li><a href="#lC" data-toggle="tab">Section 3</a></li>
-              </ul>
-              <div class="tab-content">
-                <div class="tab-pane active" id="lA">
-                  <p>I'm in Section A.</p>
-                </div>
-                <div class="tab-pane" id="lB">
-                  <p>Howdy, I'm in Section B.</p>
-                </div>
-                <div class="tab-pane" id="lC">
-                  <p>What up girl, this is Section C.</p>
-                </div>
-              </div>
-            </div> <!-- /tabbable -->
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-left"&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>Tabs on the right</h4>
-          <p>Swap the class to put tabs on the right.</p>
-          <div class="bs-docs-example">
-            <div class="tabbable tabs-right">
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#rA" data-toggle="tab">Section 1</a></li>
-                <li><a href="#rB" data-toggle="tab">Section 2</a></li>
-                <li><a href="#rC" data-toggle="tab">Section 3</a></li>
-              </ul>
-              <div class="tab-content">
-                <div class="tab-pane active" id="rA">
-                  <p>I'm in Section A.</p>
-                </div>
-                <div class="tab-pane" id="rB">
-                  <p>Howdy, I'm in Section B.</p>
-                </div>
-                <div class="tab-pane" id="rC">
-                  <p>What up girl, this is Section C.</p>
-                </div>
-              </div>
-            </div> <!-- /tabbable -->
-          </div>
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-right"&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
         </section>
 
 

diff --git a/docs/javascript.html b/docs/javascript.html
index 03d67013282d2fbe10f790d2ea22fa587c533bcd..241ea9cd0316fdb7121dcf1e3a7b50979bc36f24 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -691,6 +691,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   <li><a href="#messages" data-toggle="tab">Messages</a></li>
   <li><a href="#settings" data-toggle="tab">Settings</a></li>
 &lt;/ul&gt;</pre>
+          <p>To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.</p>
 
           <h3>Methods</h3>
           <h4>$().tab</h4>

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 2ea87c16fe926e5bfc532d827c3274d013a71a6d..c6a6776d049c602985967bcca62367879917d0dc 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -791,159 +791,6 @@
 </ul>
 </pre>
 
-
-          <hr class="bs-docs-separator">
-
-
-          <h2>{{_i}}Tabbable nav{{/i}}</h2>
-          <p>{{_i}}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.{{/i}}</p>
-
-          <h3>{{_i}}Tabbable example{{/i}}</h3>
-          <p>{{_i}}To make tabs tabbable, create a <code>.tab-pane</code> with unique ID for every tab and wrap them in <code>.tab-content</code>.{{/i}}</p>
-          <div class="bs-docs-example">
-            <div class="tabbable" style="margin-bottom: 18px;">
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#tab1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-                <li><a href="#tab2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-                <li><a href="#tab3" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
-              </ul>
-              <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
-                <div class="tab-pane active" id="tab1">
-                  <p>{{_i}}I'm in Section 1.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="tab2">
-                  <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>
-                </div>
-              </div>
-            </div> <!-- /tabbable -->
-          </div>{{! /example }}
-<pre class="prettyprint linenums">
-&lt;div class="tabbable"&gt; &lt;!-- Only required for left/right tabs --&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    &lt;li class="active"&gt;&lt;a href="#tab1" data-toggle="tab"&gt;{{_i}}Section 1{{/i}}&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#tab2" data-toggle="tab"&gt;{{_i}}Section 2{{/i}}&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    &lt;div class="tab-pane active" id="tab1"&gt;
-      &lt;p&gt;{{_i}}I'm in Section 1.{{/i}}&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;div class="tab-pane" id="tab2"&gt;
-      &lt;p&gt;{{_i}}Howdy, I'm in Section 2.{{/i}}&lt;/p&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>{{_i}}Fade in tabs{{/i}}</h4>
-          <p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
-
-          <h4>{{_i}}Requires jQuery plugin{{/i}}</h4>
-          <p>{{_i}}All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life <a href="./javascript.html#tabs">on the JavaScript docs page</a>.{{/i}}</p>
-
-          <h3>{{_i}}Tabbable in any direction{{/i}}</h3>
-
-          <h4>{{_i}}Tabs on the bottom{{/i}}</h4>
-          <p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>
-          <div class="bs-docs-example">
-            <div class="tabbable tabs-below">
-              <div class="tab-content">
-                <div class="tab-pane active" id="A">
-                  <p>{{_i}}I'm in Section A.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="B">
-                  <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>
-                </div>
-              </div>
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#A" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-                <li><a href="#B" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-                <li><a href="#C" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
-              </ul>
-            </div> <!-- /tabbable -->
-          </div>{{! /example }}
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-below"&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>{{_i}}Tabs on the left{{/i}}</h4>
-          <p>{{_i}}Swap the class to put tabs on the left.{{/i}}</p>
-          <div class="bs-docs-example">
-            <div class="tabbable tabs-left">
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#lA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-                <li><a href="#lB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-                <li><a href="#lC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
-              </ul>
-              <div class="tab-content">
-                <div class="tab-pane active" id="lA">
-                  <p>{{_i}}I'm in Section A.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="lB">
-                  <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>
-                </div>
-              </div>
-            </div> <!-- /tabbable -->
-          </div>{{! /example }}
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-left"&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <h4>{{_i}}Tabs on the right{{/i}}</h4>
-          <p>{{_i}}Swap the class to put tabs on the right.{{/i}}</p>
-          <div class="bs-docs-example">
-            <div class="tabbable tabs-right">
-              <ul class="nav nav-tabs">
-                <li class="active"><a href="#rA" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-                <li><a href="#rB" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
-                <li><a href="#rC" data-toggle="tab">{{_i}}Section 3{{/i}}</a></li>
-              </ul>
-              <div class="tab-content">
-                <div class="tab-pane active" id="rA">
-                  <p>{{_i}}I'm in Section A.{{/i}}</p>
-                </div>
-                <div class="tab-pane" id="rB">
-                  <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>
-                </div>
-              </div>
-            </div> <!-- /tabbable -->
-          </div>{{! /example }}
-<pre class="prettyprint linenums">
-&lt;div class="tabbable tabs-right"&gt;
-  &lt;ul class="nav nav-tabs"&gt;
-    ...
-  &lt;/ul&gt;
-  &lt;div class="tab-content"&gt;
-    ...
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
         </section>
 
 

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 6b7821f101710a3072fe28445b116d4e9498a07f..e3a5e5cedb93f5b4a8b4eb026af2c9f10302ac5c 100644 (file)
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -623,6 +623,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
   <li><a href="#messages" data-toggle="tab">{{_i}}Messages{{/i}}</a></li>
   <li><a href="#settings" data-toggle="tab">{{_i}}Settings{{/i}}</a></li>
 &lt;/ul&gt;</pre>
+          <p>{{_i}}To make tabs fade in, add <code>.fade</code> to each <code>.tab-pane</code>.{{/i}}</p>
 
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().tab</h4>

diff --git a/less/navs.less b/less/navs.less
index 841b773cec11ab19a8b7580074a6930d18265f12..923f728526503d717ff1df82b67ca055001a969e 100644 (file)
--- a/less/navs.less
+++ b/less/navs.less
@@ -274,13 +274,6 @@
   overflow: auto; // prevent content from running below tabs
 }
 
-// Remove border on bottom, left, right
-.tabs-below > .nav-tabs,
-.tabs-right > .nav-tabs,
-.tabs-left > .nav-tabs {
-  border-bottom: 0;
-}
-
 // Show/hide tabbable areas
 .tab-content > .tab-pane,
 .pill-content > .pill-pane {
@@ -292,80 +285,6 @@
 }
 
 
-// BOTTOM
-// ------
-
-.tabs-below > .nav-tabs {
-  border-top: 1px solid #ddd;
-}
-.tabs-below > .nav-tabs > li {
-  margin-top: -1px;
-  margin-bottom: 0;
-}
-.tabs-below > .nav-tabs > li > a {
-  border-radius: 0 0 4px 4px;
-  &:hover {
-    border-bottom-color: transparent;
-    border-top-color: #ddd;
-  }
-}
-.tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover {
-  border-color: transparent #ddd #ddd #ddd;
-}
-
-// LEFT & RIGHT
-// ------------
-
-// Common styles
-.tabs-left > .nav-tabs > li,
-.tabs-right > .nav-tabs > li {
-  float: none;
-}
-.tabs-left > .nav-tabs > li > a,
-.tabs-right > .nav-tabs > li > a {
-  min-width: 74px;
-  margin-right: 0;
-  margin-bottom: 3px;
-}
-
-// Tabs on the left
-.tabs-left > .nav-tabs {
-  float: left;
-  margin-right: 19px;
-  border-right: 1px solid #ddd;
-}
-.tabs-left > .nav-tabs > li > a {
-  margin-right: -1px;
-  border-radius: 4px 0 0 4px;
-}
-.tabs-left > .nav-tabs > li > a:hover {
-  border-color: @grayLighter #ddd @grayLighter @grayLighter;
-}
-.tabs-left > .nav-tabs .active > a,
-.tabs-left > .nav-tabs .active > a:hover {
-  border-color: #ddd transparent #ddd #ddd;
-}
-
-// Tabs on the right
-.tabs-right > .nav-tabs {
-  float: right;
-  margin-left: 19px;
-  border-left: 1px solid #ddd;
-}
-.tabs-right > .nav-tabs > li > a {
-  margin-left: -1px;
-  border-radius: 0 4px 4px 0;
-}
-.tabs-right > .nav-tabs > li > a:hover {
-  border-color: @grayLighter @grayLighter @grayLighter #ddd;
-}
-.tabs-right > .nav-tabs .active > a,
-.tabs-right > .nav-tabs .active > a:hover {
-  border-color: #ddd #ddd #ddd transparent;
-}
-
-
 
 // DISABLED STATES
 // ---------------