diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 22a565198e..48d9fdd1ba 100644 Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ diff --git a/docs/components.html b/docs/components.html index 7854df5236..66f62329af 100644 --- a/docs/components.html +++ b/docs/components.html @@ -779,54 +779,58 @@

What's included

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.

Changing between them is easy and only requires changing very little markup.

+
+

Fade in tabs

+

To make tabs fade in, add .fade to each .tab-pane.

+
+

Requires jQuery plugin

+

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.

+

Get the javascript →

-
+

Tabbable example

-

To make tabs tabbable, wrap the .nav-tabs in another div with class .tabbable.

-
+

To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

+
-
-
+
+

I'm in Section 1.

-
+

Howdy, I'm in Section 2.

-
+

What up girl, this is Section 3.

-
-
-

Custom jQuery plugin

-

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.

-

Get the javascript →

-
-
+

For right or left aligned tabs, wrap the .nav-tabs and .tab-content in .tabbable.

-

Straightforward markup

-

Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

+

Straightforward markup

+

Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.

-<div class="tabbable">
+<div class="tabbable"> <-- Only required for left/right tabs -->
   <ul class="nav 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>
+    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
+    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
   </ul>
   <div class="tab-content">
-    <div class="tab-pane active" id="1">
+    <div class="tab-pane active" id="tab1">
       <p>I'm in Section 1.</p>
     </div>
-    <div class="tab-pane" id="2">
+    <div class="tab-pane" id="tab2">
       <p>Howdy, I'm in Section 2.</p>
     </div>
   </div>
 </div>
+
+
+

Tabbable in any direction

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index b0d88dd14f..aff449c734 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -702,54 +702,58 @@

{{_i}}What's included{{/i}}

{{_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}}

{{_i}}Changing between them is easy and only requires changing very little markup.{{/i}}

+
+

{{_i}}Fade in tabs{{/i}}

+

{{_i}}To make tabs fade in, add .fade to each .tab-pane.{{/i}}

+
+

{{_i}}Requires jQuery plugin{{/i}}

+

{{_i}}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.{{/i}}

+

{{_i}}Get the javascript →{{/i}}

-
+

{{_i}}Tabbable example{{/i}}

-

{{_i}}To make tabs tabbable, wrap the .nav-tabs in another div with class .tabbable.{{/i}}

-
+

{{_i}}To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.{{/i}}

+
-
-
+
+

{{_i}}I'm in Section 1.{{/i}}

-
+

{{_i}}Howdy, I'm in Section 2.{{/i}}

-
+

{{_i}}What up girl, this is Section 3.{{/i}}

-
-
-

{{_i}}Custom jQuery plugin{{/i}}

-

{{_i}}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.{{/i}}

-

{{_i}}Get the javascript →{{/i}}

-
-
+

{{_i}}For right or left aligned tabs, wrap the .nav-tabs and .tab-content in .tabbable.{{/i}}

-

{{_i}}Straightforward markup{{/i}}

-

{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}

+

{{_i}}Straightforward markup{{/i}}

+

{{_i}}Using tabbable tabs requires a wrapping div, a set of tabs, and a set of tabbable panes of content.{{/i}}

-<div class="tabbable">
+<div class="tabbable"> <-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
-    <li class="active"><a href="#1" data-toggle="tab">{{_i}}Section 1{{/i}}</a></li>
-    <li><a href="#2" data-toggle="tab">{{_i}}Section 2{{/i}}</a></li>
+    <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>
   </ul>
   <div class="tab-content">
-    <div class="tab-pane active" id="1">
+    <div class="tab-pane active" id="tab1">
       <p>{{_i}}I'm in Section 1.{{/i}}</p>
     </div>
-    <div class="tab-pane" id="2">
+    <div class="tab-pane" id="tab2">
       <p>{{_i}}Howdy, I'm in Section 2.{{/i}}</p>
     </div>
   </div>
 </div>
+
+
+

{{_i}}Tabbable in any direction{{/i}}