From 47e2c43401bfe0cae3a62ee215af75c4ea8333a0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 23:37:18 -0700 Subject: navs tabs pills to single column --- docs/components.html | 450 ++++++++++++++++++++++++--------------------------- 1 file changed, 211 insertions(+), 239 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 1dccd2082..281cea964 100644 --- a/docs/components.html +++ b/docs/components.html @@ -521,23 +521,21 @@

Lightweight defaults Same markup, different classes

-
-
-

Powerful base class

-

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

-

When to use

-

Tabs and pills are great for sections of content or navigating between pages of related content.

-

Component alignment

-

To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

-
-
-

Basic tabs

-

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

- + +

Powerful base class

+

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

+

When to use

+

Tabs and pills are great for sections of content or navigating between pages of related content.

+

Component alignment

+

To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

+ +

Basic tabs

+

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

+ 
 <ul class="nav nav-tabs">
   <li class="active">
@@ -547,15 +545,14 @@
   <li><a href="#">...</a></li>
 </ul>
-
-
-

Basic pills

-

Take that same HTML, but use .nav-pills instead:

- + +

Basic pills

+

Take that same HTML, but use .nav-pills instead:

+ 
 <ul class="nav nav-pills">
   <li class="active">
@@ -565,66 +562,58 @@
   <li><a href="#">...</a></li>
 </ul>
-
-
+

Stackable Make tabs or pills vertical

-
-
-

How to stack 'em

-

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

-
-
-

Stacked tabs

- + +

How to stack 'em

+

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

+ +

Stacked tabs

+ 
 <ul class="nav nav-tabs nav-stacked">
   ...
 </ul>
-
-
-

Stacked pills

- + +

Stacked pills

+ 
 <ul class="nav nav-pills nav-stacked">
   ...
 </ul>
-
-

Dropdowns For advanced nav components

-
-
-

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.

-
-
-

Tabs with dropdowns

-
-
-

Pills with dropdowns

-
-

Nav lists Build simple stacked navs, great for sidebars

-
-
-

Application-style navigation

-

Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

-

Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.

-
-

With icons

-

Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.

-

Horizontal dividers

-

Add a horizontal divider by creating an empty list item with the class .divider, like so:

+ +

Application-style navigation

+

Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.

+

Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.

+
+

With icons

+

Nav lists are also easy to equip with icons. Add the proper <i> tag with class and you're set.

+

Horizontal dividers

+

Add a horizontal divider by creating an empty list item with the class .divider, like so:

 <ul class="nav nav-list">
   ...
@@ -693,23 +678,22 @@
   ...
 </ul>
-
-
-

Example nav list

-

Take a list of links and add class="nav nav-list":

-
- -
+ +

Example nav list

+

Take a list of links and add class="nav nav-list":

+
+ + 
 <ul class="nav nav-list">
   <li class="nav-header">
@@ -724,23 +708,22 @@
   ...
 </ul>
-
-
-

Example with icons

-

Same example, but with <i> tags for icons.

-
- -
+ +

Example with icons

+

Same example, but with <i> tags for icons.

+
+ + 
 <ul class="nav nav-list">
   ...
@@ -753,49 +736,45 @@
   ...
 </ul>
-
-

Tabbable nav Bring tabs to life via javascript

-
-
-

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 →

+ +

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, 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.

+
-
-

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.

-
-
-
-

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

+
+

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"> <!-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
@@ -812,33 +791,30 @@
   </div>
 </div>
-
-

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.

-
-
- -
+ +

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">
@@ -849,28 +825,27 @@
   </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.

+
-
-

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">
@@ -881,28 +856,27 @@
   </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.

+
-
-

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">
@@ -913,8 +887,6 @@
   </div>
 </div>
-
-
-- cgit v1.2.3