From 2948d1c3b247a5aff1fd1f15cf72540e3f492f57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jan 2012 20:40:28 -0800 Subject: overhaul the entire tabs component structure and docs; remove side nav and make it a nav list to build on new .nav base class --- docs/components.html | 837 +++++++++++++++++++++++++++------------------------ 1 file changed, 438 insertions(+), 399 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index ce16c8092..eb9932473 100644 --- a/docs/components.html +++ b/docs/components.html @@ -54,397 +54,218 @@ - -
+
-

Thumbnails Grids of images, videos, text, and more

+

Nav, tabs, and pills Highly customizable list-style navigation

+

Lightweight defaults Same markup, different classes

-
-

Default thumbnails

-

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

-
    -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • -
  • - - - -
    • +
    +

    Powerful base class

    +

    All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.

    +

    Why tabs and pills

    +

    Tabs and pills in Bootstrap are built on a <ul> with the same core HTML, a list of links. Swap between tabs or pills with only a class.

    +

    Both options are great for sub-sections of content or navigating between pages of related content.

    +
    +
    +

    Basic tabs

    +

    Take a regular <ul> of links and add .tabs:

    + +
    +<ul class="nav tabs">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">...</a></li>
+  <li><a href="#">...</a></li>
+</ul>
+
    -
    -

    Highly customizable

    -

    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    -
      -
    • -
      - -
      -
      Thumbnail label
      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      -
      -
      -
      • -
    • -
      - -
      -
      Thumbnail label
      -

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      -

      Action Action

      -
      -
      -
      • +
      +

      Basic pills

      +

      Take that same HTML, but use .pills instead:

      + +
      +<ul class="nav pills">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">...</a></li>
+  <li><a href="#">...</a></li>
+</ul>
+
    +

    Stackable Make tabs or pills vertical

    -

    Why use thumbnails

    -

    Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

    +

    How to stack 'em

    +

    As tabs and pills are horizontal by default, just add a second class, .stacked, to make them appear vertically stacked.

    -

    Simple, flexible markup

    -

    Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

    -
    -
    -

    Uses grid column sizes

    -

    Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

    -
    -
    - -
    -
    -

    The markup

    -

    As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

    +

    Stacked tabs

    + 
    -<ul class="thumbnails">
-  <li class="span3">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
-    </a>
-  </li>
+<ul class="nav tabs stacked">
   ...
 </ul>
    -

    For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

    +
    +
    +

    Stacked pills

    + 
    -<ul class="thumbnails">
-  <li class="span3">
-    <div class="thumbnail">
-      <img src="http://placehold.it/210x150" alt="">
-      <h5>Thumbnail label</h5>
-      <p>Thumbnail caption right here...</p>
-    </div>
-  </li>
+<ul class="nav pills stacked">
   ...
 </ul>
    -
    -

    More examples

    -

    Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

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

Autocomplete

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

Side nav for lists of links

+

Dropdowns For advanced nav components

-
-

Examples

-

Side navs can be just links, links with headings, and links with icons.

-
- -
Your account
- -
Your account
- -
-
-
-

Why use it

-

+
+

Rich menus made easy

+

Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.

+

Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.

-
-

Markup

-

Marking up a side nav is at the core just writing an unordered list of links.

+
+

Tabs with dropdowns

+ 
-  <ul class="nav-group">
-    <li class="active">
-      <a class="nav-item" href="#">Home</a>
-    </li>
-    <li><a class="nav-item" href="#">Library</a></li>
-    <li><a class="nav-item" href="#">Help</a></li>
-  </ul>
+<ul class="nav tabs">
+  <li class="dropdown">
+    <a class="dropdown-toggle" 
+       data-toggle="dropdown"
+       href="#">
+        Dropdown
+        <b class="caret"></b>
+      </a>
+    <ul class="dropdown-menu">
+      <!-- links -->
+    </ul>
+  </li>
+</ul>
-

Bootstrap also makes it easy to expand a regular list of links with multiple groups and headings.

+
+
+

Pills with dropdowns

+ 
-  <h6 class="nav-label"></h6>
-  <ul class="nav-group">
-    ...
-  </ul>
-  <h6 class="nav-label"></h6>
-  <ul class="nav-group">
-    ...
-  </ul>
+<ul class="nav pills">
+  <li class="dropdown">
+    <a class="dropdown-toggle" 
+       data-toggle="dropdown"
+       href="#">
+        Dropdown
+        <b class="caret"></b>
+      </a>
+    <ul class="dropdown-menu">
+      <!-- links -->
+    </ul>
+  </li>
+</ul>
- -
- - - - - -
-
-

Tabs and pills

-
-
-
-

Create simple secondary navigation with a <ul>. Swap between tabs or pills by adding the appropriate class.

-

Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.

-
-
-

Basic tabs example

-

Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a tabs plugin that can be used to integrate the latter.

- -
-<ul class="tabs">
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Profile</a></li>
-  <li><a href="#">Messages</a></li>
-  <li><a href="#">Settings</a></li>
-  <li><a href="#">Contact</a></li>
-</ul>
-
+ + + + +

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.

@@ -543,37 +364,119 @@
- -

In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.

-
-

Basic pills example

- +
+ + + + + @@ -629,39 +532,6 @@ - - - -