From 26386ad615a48be02d896a41b7c72a7470c8a9c3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 1 Oct 2012 00:05:18 -0700 Subject: remove tabbable tabs on left, right, and bottom; instead, from here out use stacked pills or tabs --- docs/components.html | 153 --------------------------------------------------- 1 file changed, 153 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 7808d0477..87bef8db2 100644 --- a/docs/components.html +++ b/docs/components.html @@ -860,159 +860,6 @@ </ul> - -
- - -

Tabbable nav

-

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.

- -

Tabbable example

-

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.

-
-
-
-
-
-<div class="tabbable"> <!-- Only required for left/right tabs -->
-  <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>
-  </ul>
-  <div class="tab-content">
-    <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>
-</div>
-
- -

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.

- -

Tabbable in any direction

- -

Tabs on the bottom

-

Flip the order of the HTML and add a class to put tabs on the bottom.

-
-
-
-
-

I'm in Section A.

-
-
-

Howdy, I'm in Section B.

-
-
-

What up girl, this is Section C.

-
-
- -
-
-
-<div class="tabbable tabs-below">
-  <div class="tab-content">
-    ...
-  </div>
-  <ul class="nav nav-tabs">
-    ...
-  </ul>
-</div>
-
- -

Tabs on the left

-

Swap the class to put tabs on the left.

-
-
- -
-
-

I'm in Section A.

-
-
-

Howdy, I'm in Section B.

-
-
-

What up girl, this is Section C.

-
-
-
-
-
-<div class="tabbable tabs-left">
-  <ul class="nav nav-tabs">
-    ...
-  </ul>
-  <div class="tab-content">
-    ...
-  </div>
-</div>
-
- -

Tabs on the right

-

Swap the class to put tabs on the right.

-
-
- -
-
-

I'm in Section A.

-
-
-

Howdy, I'm in Section B.

-
-
-

What up girl, this is Section C.

-
-
-
-
-
-<div class="tabbable tabs-right">
-  <ul class="nav nav-tabs">
-    ...
-  </ul>
-  <div class="tab-content">
-    ...
-  </div>
-</div>
-
- -- cgit v1.2.3