diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 889e3008d3..d6791ff072 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -745,7 +745,8 @@ form.well { .bs-docs-example .alert, .bs-docs-example .hero-unit, .bs-docs-example .pagination, -.bs-docs-example .navbar { +.bs-docs-example .navbar, +.bs-docs-example .nav { margin-bottom: 5px; } .bs-docs-example .pagination { diff --git a/docs/components.html b/docs/components.html index c96e4aa034..9d25a8b057 100644 --- a/docs/components.html +++ b/docs/components.html @@ -532,21 +532,17 @@

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:

- +
+ + 
 <ul class="nav nav-tabs">
   <li class="active">
@@ -559,11 +555,13 @@
 
   
Basic pills

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

-  
+  

+    
+  

 
 <ul class="nav nav-pills">
   <li class="active">
@@ -574,18 +572,24 @@
 </ul>
 

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

 
-  
Stackable Make tabs or pills vertical

 
-  
How to stack 'em

+  

+
+
+  
Stackable

   
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">
   ...
@@ -593,38 +597,43 @@
 

 
   
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.

+  

+
+
+  
Dropdowns

+  
Add dropdown menus with a little extra HTML and the dropdowns javascript plugin.

 
   
Tabs with dropdowns

-  
+  

+    
+  

 
 <ul class="nav nav-tabs">
   <li class="dropdown">
@@ -642,20 +651,22 @@
 

 
   
Pills with dropdowns

-  
+  

+    
+  

 
 <ul class="nav nav-pills">
   <li class="dropdown">
@@ -672,39 +683,30 @@
 </ul>
 

 
-  
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:

-
-<ul class="nav nav-list">
-  ...
-  <li class="divider"></li>
-  ...
-</ul>
-

+  

+
+
+  
Nav lists

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

 
   
Example nav list

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

-  

-    
-  
 
+  

+    

+      
+    
 
+  

 
 <ul class="nav nav-list">
   <li class="nav-header">
@@ -722,19 +724,21 @@
 
   
Example with icons

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

-  

-    
-  
 
+  

+    

+      
+    
 
+  

 
 <ul class="nav nav-list">
   ...
@@ -748,44 +752,45 @@
 </ul>
 

 
+  
Horizontal dividers

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

+
+<ul class="nav nav-list">
+  ...
+  <li class="divider"></li>
+  ...
+</ul>
+

 
-  
Tabbable nav Bring tabs to life via javascript

 
-  
What's included

+  

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

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

+  

+    

+      
+      

+        

+          
I'm in Section 1.

+        

+        

+          
Howdy, I'm in Section 2.

+        

+        

+          
What up girl, this is Section 3.

+        

       

-      

-        
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">
@@ -803,30 +808,37 @@
 </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.

+  

+    

+      

+        

+          
I'm in Section A.

+        

+        

+          
Howdy, I'm in Section B.

+        

+        

+          
What up girl, this is Section C.

+        

       

-      

-        
Howdy, I'm in Section B.

-      

-      

-        
What up girl, this is Section C.

-      

-    

-    
-  
 
-
+      
+    
 
+  

+
 <div class="tabbable tabs-below">
   <div class="tab-content">
     ...
@@ -839,24 +851,26 @@
 
   
Tabs on the left

   
Swap the class to put tabs on the left.

-  

-    
-    

-      

-        
I'm in Section A.

+  

+    

+      
+      

+        

+          
I'm in Section A.

+        

+        

+          
Howdy, I'm in Section B.

+        

+        

+          
What up girl, this is Section C.

+        

       

-      

-        
Howdy, I'm in Section B.

-      

-      

-        
What up girl, this is Section C.

-      

-    

-  
 
+    
 
+  

 
 <div class="tabbable tabs-left">
   <ul class="nav nav-tabs">
@@ -870,24 +884,26 @@
 
   
Tabs on the right

   
Swap the class to put tabs on the right.

-  

-    
-    

-      

-        
I'm in Section A.

+  

+    

+      
+      

+        

+          
I'm in Section A.

+        

+        

+          
Howdy, I'm in Section B.

+        

+        

+          
What up girl, this is Section C.

+        

       

-      

-        
Howdy, I'm in Section B.

-      

-      

-        
What up girl, this is Section C.

-      

-    

-  
 
+    
 
+  

 
 <div class="tabbable tabs-right">
   <ul class="nav nav-tabs">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index cf40248afb..ea8621b45e 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -455,21 +455,17 @@
   

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

-  
+  

+    
+  

 
 <ul class="nav nav-tabs">
   <li class="active">
@@ -482,11 +478,13 @@
 
   
{{_i}}Basic pills{{/i}}

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

-  
+  

+    
+  

 
 <ul class="nav nav-pills">
   <li class="active">
@@ -497,18 +495,24 @@
 </ul>
 

 
+  
{{_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}}Stackable{{/i}} {{_i}}Make tabs or pills vertical{{/i}}

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

+  

+
+
+  
{{_i}}Stackable{{/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">
   ...
@@ -516,38 +520,43 @@
 

 
   
{{_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}}Dropdowns{{/i}}

+  
{{_i}}Add dropdown menus with a little extra HTML and the dropdowns javascript plugin.{{/i}}

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

-  
+  

+    
+  

 
 <ul class="nav nav-tabs">
   <li class="dropdown">
@@ -565,20 +574,22 @@
 

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

-  
+  

+    
+  
{{! /example }}
 
 <ul class="nav nav-pills">
   <li class="dropdown">
@@ -595,39 +606,30 @@
 </ul>
 

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

-
-<ul class="nav nav-list">
-  ...
-  <li class="divider"></li>
-  ...
-</ul>
-

+  

+
+
+  
{{_i}}Nav lists{{/i}}

+  
{{_i}}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}}Example nav list{{/i}}

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

-  

-    
-  
 
+  

+    

+      
+    
 
+  
{{! /example }}
 
 <ul class="nav nav-list">
   <li class="nav-header">
@@ -645,19 +647,21 @@
 
   
{{_i}}Example with icons{{/i}}

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

-  

-    
-  
 
+  

+    

+      
+    
 
+  
{{! /example }}
 
 <ul class="nav nav-list">
   ...
@@ -671,44 +675,45 @@
 </ul>
 

 
+  
{{_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">
+  ...
+  <li class="divider"></li>
+  ...
+</ul>
+

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

 
-  
{{_i}}What's included{{/i}}

+  

+
+
+  
{{_i}}Tabbable nav{{/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}}I'm in Section 1.{{/i}}

+        

+        

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

+        

+        

+          
{{_i}}What up girl, this is Section 3.{{/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}}

+    
 
+  
{{! /example }}
 
 <div class="tabbable"> <!-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
@@ -726,30 +731,37 @@
 </div>
 

 
+  
{{_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}}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}}I'm in Section A.{{/i}}

+        

+        

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

+        

+        

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

+        

       

-      

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

-      

-      

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

-      

-    

-    
-  
 
-
+      
+    
 
+  
{{! /example }}
+
 <div class="tabbable tabs-below">
   <div class="tab-content">
     ...
@@ -762,24 +774,26 @@
 
   
{{_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}}I'm in Section A.{{/i}}

+        

+        

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

+        

+        

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

+        

       

-      

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

-      

-      

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

-      

-    

-  
 
+    
 
+  
{{! /example }}
 
 <div class="tabbable tabs-left">
   <ul class="nav nav-tabs">
@@ -793,24 +807,26 @@
 
   
{{_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}}I'm in Section A.{{/i}}

+        

+        

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

+        

+        

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

+        

       

-      

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

-      

-      

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

-      

-    

-  
 
+    
 
+  
{{! /example }}
 
 <div class="tabbable tabs-right">
   <ul class="nav nav-tabs">