From 22e0c5f7c8c092531b111b6042a7d7ee87d406b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 22:06:44 -0800 Subject: redoing the tabs on bottom, left, and right --- docs/components.html | 186 +++++++++++++++++++++++++++------------------------ 1 file changed, 99 insertions(+), 87 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index e0ce81297..6fca1268f 100644 --- a/docs/components.html +++ b/docs/components.html @@ -258,7 +258,7 @@ -

Tabbable tabs

+

Tabbable nav Bring tabs to life via javascript

What's included

@@ -270,116 +270,128 @@
  • left

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

    +
    +

    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 →

    -
    -
    -
    -
    -
    - - - - - - - -

    Tabbable tabs

    -

    As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.

    - +
    +

    Tabbable example

    +

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

    -
      +
      -

      Oh hai #1!

      +

      I'm in Section 1.

      -

      Oh hai #2!

      +

      Howdy, I'm in Section 2.

      -

      Oh hai #3!

      -
      -
      -

      Oh hai #4!

      +

      What up girl, this is Section 3.

      -
    +
    +
    +

    Straightforward markup

    +

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

    +
    +<div class="tabbable">
+  <ul class="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>
+  </ul>
+  <div class="tab-content">
+    <div class="tab-pane active" id="1">
+      <p>I'm in Section 1.</p>
+    </div>
+    <div class="tab-pane" id="2">
+      <p>Howdy, I'm in Section 2.</p>
+    </div>
+  </div>
+</div>
+
    + + -
    -
    -
    - -
    -
    -

    Section 1

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 2

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 3

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    +

    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.

    -
    -
    -
    - -
    -
    -

    Section 1

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 2

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    -

    Section 3

    -

    Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

    -
    -
    +
    +

    Howdy, I'm in Section B.

    +
    +
    +

    What up girl, this is Section C.

    -
    - -
    + +
    +
    +
    +

    Tabs on the left

    +

    Swap the class to put tabs on the left.

    +
    +
    -
    -

    Oh hai #1!

    -
    -
    -

    Oh hai #2!

    +
    +

    I'm in Section A.

    -
    -

    Oh hai #3!

    +
    +

    Howdy, I'm in Section B.

    -
    -

    Oh hai #4!

    +
    +

    What up girl, this is Section C.

    -
    +
    +
    +

    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.

    +
    +
    +
    +
    +
    -- cgit v1.2.3