From 93d42ca80e7f100f7543a9689ae80de51b978eae Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Mar 2012 17:35:06 -0700 Subject: [PATCH] fix #2832: clarify docs on use of .tabbable and add mention of .fade --- docs/assets/bootstrap.zip | Bin 56915 -> 56915 bytes docs/components.html | 52 ++++++++++++----------- docs/templates/pages/components.mustache | 52 ++++++++++++----------- 3 files changed, 56 insertions(+), 48 deletions(-) diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index 22a565198e970f7fa8229aa4500286f761363ef6..48d9fdd1ba225e946498ace75f4ce5f551b46ba3 100644 GIT binary patch delta 445 zcmcb-hxzgzW}X0VW)?065OD9A$fKytx~|xt9f(USxEUB(zA`c}u!sO9QIrL!vax}c zP4=skW&-M)VG9;uTetD{1x}#AsLnQULj$p&!+)cDESb#8G`u(;rp`!k30Va>0$?xZ@uz_68 zz7D3(Y=HsTeD-yla~5WWBp=AQ8S>#!P-7 z5m^u~>6SMV@7yhaB%a-E2Z&y<%K5ilAaY11$xK$bBaWmd;!YqE@6;V{WV=CbzH7t; X^a03jAg}YT9TM-wT_+Gv=bkzMW9z0K 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}}