From 47e2c43401bfe0cae3a62ee215af75c4ea8333a0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 23:37:18 -0700 Subject: [PATCH] navs tabs pills to single column --- docs/components.html | 452 +++++++++++------------ docs/templates/pages/components.mustache | 452 +++++++++++------------ 2 files changed, 424 insertions(+), 480 deletions(-) diff --git a/docs/components.html b/docs/components.html index 1dccd20825..281cea9647 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 →

-
-
-

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.

-

Straightforward markup

-

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

+

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.

+
+
+
+

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.

 <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>
-
-
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index db466b5c08..99d98dab70 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -443,23 +443,21 @@

{{_i}}Lightweight defaults{{/i}} {{_i}}Same markup, different classes{{/i}}

-
-
-

{{_i}}Powerful base class{{/i}}

-

{{_i}}All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.{{/i}}

-

{{_i}}When to use{{/i}}

-

{{_i}}Tabs and pills are great for sections of content or navigating between pages of related content.{{/i}}

-

{{_i}}Component alignment{{/i}}

-

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

-
-
-

{{_i}}Basic tabs{{/i}}

-

{{_i}}Take a regular <ul> of links and add .nav-tabs:{{/i}}

- + +

{{_i}}Powerful base class{{/i}}

+

{{_i}}All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.{{/i}}

+

{{_i}}When to use{{/i}}

+

{{_i}}Tabs and pills are great for sections of content or navigating between pages of related content.{{/i}}

+

{{_i}}Component alignment{{/i}}

+

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

+ +

{{_i}}Basic tabs{{/i}}

+

{{_i}}Take a regular <ul> of links and add .nav-tabs:{{/i}}

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

{{_i}}Basic pills{{/i}}

-

{{_i}}Take that same HTML, but use .nav-pills instead:{{/i}}

- + +

{{_i}}Basic pills{{/i}}

+

{{_i}}Take that same HTML, but use .nav-pills instead:{{/i}}

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

{{_i}}Stackable{{/i}} {{_i}}Make tabs or pills vertical{{/i}}

-
-
-

{{_i}}How to stack 'em{{/i}}

-

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

-
-
-

{{_i}}Stacked tabs{{/i}}

- + +

{{_i}}How to stack 'em{{/i}}

+

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

+ +

{{_i}}Stacked tabs{{/i}}

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

{{_i}}Stacked pills{{/i}}

- + +

{{_i}}Stacked pills{{/i}}

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

{{_i}}Dropdowns{{/i}} {{_i}}For advanced nav components{{/i}}

-
-
-

{{_i}}Rich menus made easy{{/i}}

-

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

-

{{_i}}Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.{{/i}}

-
-
-

{{_i}}Tabs with dropdowns{{/i}}

-
-
-

{{_i}}Pills with dropdowns{{/i}}

-
-

{{_i}}Nav lists{{/i}} {{_i}}Build simple stacked navs, great for sidebars{{/i}}

-
-
-

{{_i}}Application-style navigation{{/i}}

-

{{_i}}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.{{/i}}

-

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

-
-

{{_i}}With icons{{/i}}

-

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

-

{{_i}}Horizontal dividers{{/i}}

-

{{_i}}Add a horizontal divider by creating an empty list item with the class .divider, like so:{{/i}}

+ +

{{_i}}Application-style navigation{{/i}}

+

{{_i}}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.{{/i}}

+

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

+
+

{{_i}}With icons{{/i}}

+

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

+

{{_i}}Horizontal dividers{{/i}}

+

{{_i}}Add a horizontal divider by creating an empty list item with the class .divider, like so:{{/i}}

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

{{_i}}Example nav list{{/i}}

-

{{_i}}Take a list of links and add class="nav nav-list":{{/i}}

-
- -
+ +

{{_i}}Example nav list{{/i}}

+

{{_i}}Take a list of links and add class="nav nav-list":{{/i}}

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

{{_i}}Example with icons{{/i}}

-

{{_i}}Same example, but with <i> tags for icons.{{/i}}

-
- -
+ +

{{_i}}Example with icons{{/i}}

+

{{_i}}Same example, but with <i> tags for icons.{{/i}}

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

{{_i}}Tabbable nav{{/i}} {{_i}}Bring tabs to life via javascript{{/i}}

-
-
-

{{_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, 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}}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}}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, 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}}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}}

 <div class="tabbable"> <!-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
@@ -734,33 +713,30 @@
   </div>
 </div>
-
-

{{_i}}Tabbable in any direction{{/i}}

-
-
-

{{_i}}Tabs on the bottom{{/i}}

-

{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}

-
-
-
-

{{_i}}I'm in Section A.{{/i}}

-
-
-

{{_i}}Howdy, I'm in Section B.{{/i}}

-
-
-

{{_i}}What up girl, this is Section C.{{/i}}

-
-
- -
+ +

{{_i}}Tabs on the bottom{{/i}}

+

{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}

+
+
+
+

{{_i}}I'm in Section A.{{/i}}

+
+
+

{{_i}}Howdy, I'm in Section B.{{/i}}

+
+
+

{{_i}}What up girl, this is Section C.{{/i}}

+
+
+ + 
 <div class="tabbable tabs-below">
   <div class="tab-content">
@@ -771,28 +747,27 @@
   </ul>
 </div>
+ +

{{_i}}Tabs on the left{{/i}}

+

{{_i}}Swap the class to put tabs on the left.{{/i}}

+
+ +
+
+

{{_i}}I'm in Section A.{{/i}}

+
+
+

{{_i}}Howdy, I'm in Section B.{{/i}}

+
+
+

{{_i}}What up girl, this is Section C.{{/i}}

+
-
-

{{_i}}Tabs on the left{{/i}}

-

{{_i}}Swap the class to put tabs on the left.{{/i}}

-
- -
-
-

{{_i}}I'm in Section A.{{/i}}

-
-
-

{{_i}}Howdy, I'm in Section B.{{/i}}

-
-
-

{{_i}}What up girl, this is Section C.{{/i}}

-
-
-
+ 
 <div class="tabbable tabs-left">
   <ul class="nav nav-tabs">
@@ -803,28 +778,27 @@
   </div>
 </div>
+ +

{{_i}}Tabs on the right{{/i}}

+

{{_i}}Swap the class to put tabs on the right.{{/i}}

+
+ +
+
+

{{_i}}I'm in Section A.{{/i}}

+
+
+

{{_i}}Howdy, I'm in Section B.{{/i}}

+
+
+

{{_i}}What up girl, this is Section C.{{/i}}

+
-
-

{{_i}}Tabs on the right{{/i}}

-

{{_i}}Swap the class to put tabs on the right.{{/i}}

-
- -
-
-

{{_i}}I'm in Section A.{{/i}}

-
-
-

{{_i}}Howdy, I'm in Section B.{{/i}}

-
-
-

{{_i}}What up girl, this is Section C.{{/i}}

-
-
-
+ 
 <div class="tabbable tabs-right">
   <ul class="nav nav-tabs">
@@ -835,8 +809,6 @@
   </div>
 </div>
-
-