From ff6dd0cf56c1b50b7fa7cba35aab4d13cb251f05 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 14:01:03 -0700 Subject: [PATCH 01/20] nav and content tweaks --- docs/assets/css/docs.css | 17 +++++------------ docs/base-css.html | 2 +- docs/components.html | 2 +- docs/download.html | 2 +- docs/examples.html | 2 +- docs/index.html | 2 +- docs/javascript.html | 2 +- docs/less.html | 2 +- docs/scaffolding.html | 14 ++++++-------- docs/templates/pages/scaffolding.mustache | 12 +++++------- docs/upgrading.html | 2 +- 11 files changed, 24 insertions(+), 35 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 1e02c299ea..88d93e4611 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -158,6 +158,7 @@ hr.soften { line-height: 1; } .jumbotron p { + max-width: 780px; margin-bottom: 20px; font-weight: 300; } @@ -772,13 +773,6 @@ form.bs-docs-example { border: 1px solid #d6e9c6; } -/* Grid examples -------------------------- */ -.bs-docs-grid { - width: 940px; - margin-left: -80px; -} - /* Responsive Docs @@ -988,14 +982,13 @@ form.bs-docs-example { /* LARGE DESKTOP SCREENS */ @media (min-width: 1210px) { + .bs-docs-container { + max-width: 970px; + } + /* Update subnav container */ .subnav-fixed .nav { width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ } - .bs-docs-grid { - width: 1170px; - margin-left: -195px; - } - } diff --git a/docs/base-css.html b/docs/base-css.html index 7ed6c68ac2..58fbecc39d 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/components.html b/docs/components.html index 63cfac9ae6..15df4f5ce6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/download.html b/docs/download.html index 20e8605591..10b35f3eaf 100644 --- a/docs/download.html +++ b/docs/download.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/examples.html b/docs/examples.html index 374b69ef62..e0e4b5be88 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/index.html b/docs/index.html index ccba2ee61b..27d74dc3f0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/javascript.html b/docs/javascript.html index d21ca2d616..abf5df7905 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/less.html b/docs/less.html index c383660d20..a904d31dd7 100644 --- a/docs/less.html +++ b/docs/less.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/scaffolding.html b/docs/scaffolding.html index 9b7b66cd2e..ae69f51dbe 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -27,7 +27,7 @@ - +
@@ -173,24 +173,22 @@
1
1
1
-
1
-
1
-
4
+
2
4
4
4
-
8
+
6
-
6
-
6
+
5
+
5
-
12
+
10
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache index ee447da3d3..8eabe21cfa 100644 --- a/docs/templates/pages/scaffolding.mustache +++ b/docs/templates/pages/scaffolding.mustache @@ -62,24 +62,22 @@
1
1
1
-
1
-
1
-
4
+
2
4
4
4
-
8
+
6
-
6
-
6
+
5
+
5
-
12
+
10
diff --git a/docs/upgrading.html b/docs/upgrading.html index 9611ffc41d..f16fe60368 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -27,7 +27,7 @@ - +
From df869f1eb074f5c2baaaf744f333c5f5d6ce0bee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 21:45:37 -0700 Subject: [PATCH 02/20] fix grids --- docs/base-css.html | 2 +- docs/components.html | 2 +- docs/download.html | 2 +- docs/examples.html | 2 +- docs/index.html | 2 +- docs/javascript.html | 2 +- docs/less.html | 2 +- docs/scaffolding.html | 24 +++++++++++------------ docs/templates/pages/scaffolding.mustache | 22 ++++++++++----------- docs/upgrading.html | 2 +- 10 files changed, 31 insertions(+), 31 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 58fbecc39d..7ed6c68ac2 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/components.html b/docs/components.html index 15df4f5ce6..63cfac9ae6 100644 --- a/docs/components.html +++ b/docs/components.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/download.html b/docs/download.html index 10b35f3eaf..20e8605591 100644 --- a/docs/download.html +++ b/docs/download.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/examples.html b/docs/examples.html index e0e4b5be88..374b69ef62 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/index.html b/docs/index.html index 27d74dc3f0..ccba2ee61b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/javascript.html b/docs/javascript.html index abf5df7905..d21ca2d616 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/less.html b/docs/less.html index a904d31dd7..c383660d20 100644 --- a/docs/less.html +++ b/docs/less.html @@ -27,7 +27,7 @@ - +
diff --git a/docs/scaffolding.html b/docs/scaffolding.html index ae69f51dbe..bb2b5b03d8 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -27,7 +27,7 @@ - +
@@ -181,7 +181,7 @@
4
-
6
+
6
5
@@ -207,14 +207,14 @@
4
-
4 offset 4
+
4 offset 2
-
3 offset 3
-
3 offset 3
+
3 offset 2
+
3 offset 2
-
8 offset 4
+
6 offset 4
@@ -229,13 +229,13 @@
     
Example

     
Here two nested .span4 columns are placed within a .span8.

     

-      

+      

         Level 1 of column
         

-          

+          

             Level 2
           

-          

+          

             Level 2
           

         

@@ -243,11 +243,11 @@
     

 
 <div class="row">
-  <div class="span8">
+  <div class="span10">
     Level 1 column
     <div class="row">
-      <div class="span4">Level 2</div>
-      <div class="span4">Level 2</div>
+      <div class="span5">Level 2</div>
+      <div class="span5">Level 2</div>
     </div>
   </div>
 </div>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 8eabe21cfa..3ccc87a2b6 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -70,7 +70,7 @@
     

     

       
4

-      
6

+      
6

     

     

       
5

@@ -96,14 +96,14 @@
   

     

       
4

-      
4 offset 4

+      
4 offset 2

     

     

-      
3 offset 3

-      
3 offset 3

+      
3 offset 2

+      
3 offset 2

     

     

-      
8 offset 4

+      
6 offset 4

     

   

 
@@ -118,13 +118,13 @@
     
{{_i}}Example{{/i}}

     
{{_i}}Here two nested .span4 columns are placed within a .span8.{{/i}}

     

-      

+      

         {{_i}}Level 1 of column{{/i}}
         

-          

+          

             {{_i}}Level 2{{/i}}
           

-          

+          

             {{_i}}Level 2{{/i}}
           

         

@@ -132,11 +132,11 @@
     

 
 <div class="row">
-  <div class="span8">
+  <div class="span10">
     {{_i}}Level 1 column{{/i}}
     <div class="row">
-      <div class="span4">{{_i}}Level 2{{/i}}</div>
-      <div class="span4">{{_i}}Level 2{{/i}}</div>
+      <div class="span5">{{_i}}Level 2{{/i}}</div>
+      <div class="span5">{{_i}}Level 2{{/i}}</div>
     </div>
   </div>
 </div>
diff --git a/docs/upgrading.html b/docs/upgrading.html
index f16fe60368..9611ffc41d 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     

       

From c1c7528dd9f0617cb65bc5fac7aa6b2cfc2eb822 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 7 Jun 2012 21:48:03 -0700
Subject: [PATCH 03/20] drop the side nav, restore topbar

---
 docs/assets/css/docs.css       |  7 +++---
 docs/base-css.html             | 44 ++++++++++++++++++++++++++++++++++
 docs/components.html           | 44 ++++++++++++++++++++++++++++++++++
 docs/download.html             | 44 ++++++++++++++++++++++++++++++++++
 docs/examples.html             | 44 ++++++++++++++++++++++++++++++++++
 docs/index.html                | 44 ++++++++++++++++++++++++++++++++++
 docs/javascript.html           | 44 ++++++++++++++++++++++++++++++++++
 docs/less.html                 | 44 ++++++++++++++++++++++++++++++++++
 docs/scaffolding.html          | 44 ++++++++++++++++++++++++++++++++++
 docs/templates/layout.mustache | 44 ++++++++++++++++++++++++++++++++++
 docs/upgrading.html            | 44 ++++++++++++++++++++++++++++++++++
 11 files changed, 444 insertions(+), 3 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 88d93e4611..fd0a71edb9 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -12,18 +12,18 @@
 
 body {
   position: relative;
-  padding-top: 40px;
+  padding-top: 100px;
   font-size: 14px;
   background-color: #fff;
   background-image: url(../img/grid-20px.png);
   background-repeat: repeat-x;
-  background-position: 0 0;
+  background-position: 0 40px;
 }
 
 /* Custom container for the narrow docs */
 .bs-docs-container {
   max-width: 780px;
-  margin: 0 0 0 240px;
+  margin: 0 auto;
 }
 
 /* Increase docs base type size and line-heights */
@@ -43,6 +43,7 @@ li {
 -------------------------------------------------- */
 
 .bs-docs-nav {
+  display: none;
   position: fixed;
   top: 0;
   left: 0;
diff --git a/docs/base-css.html b/docs/base-css.html
index 7ed6c68ac2..56756b81ff 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -29,6 +29,50 @@
 
   
 
+    
+    

+      

+        

+          
+          Bootstrap
+          

+            
+          

+        

+      

+    

+
     

       
       
    
diff --git a/docs/components.html b/docs/components.html
index 63cfac9ae6..8716963bdf 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -29,6 +29,50 @@
 
   
 
+    
+    
    
+      
    
+        
    
+          
+          Bootstrap
+          
    
+            
+          
    
+        
    
+      
    
+    
    
+
     
    
       
       
      
diff --git a/docs/download.html b/docs/download.html
index 20e8605591..ebba8fa8f8 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -29,6 +29,50 @@
 
   
 
+    
+    
      
+      
      
+        
      
+          
+          Bootstrap
+          
      
+            
+          
      
+        
      
+      
      
+    
      
+
     
      
       
       
        
diff --git a/docs/examples.html b/docs/examples.html
index 374b69ef62..06844c6cdc 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -29,6 +29,50 @@
 
   
 
+    
+    
        
+      
        
+        
        
+          
+          Bootstrap
+          
        
+            
+          
        
+        
        
+      
        
+    
        
+
     
        
       
       
          
diff --git a/docs/index.html b/docs/index.html
index ccba2ee61b..9f36d3bc9f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -29,6 +29,50 @@
 
   
 
+    
+    
          
+      
          
+        
          
+          
+          Bootstrap
+          
          
+            
+          
          
+        
          
+      
          
+    
          
+
     
          
       
       
            
diff --git a/docs/javascript.html b/docs/javascript.html
index d21ca2d616..991ce7b2b0 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -29,6 +29,50 @@
 
   
 
+    
+    
            
+      
            
+        
            
+          
+          Bootstrap
+          
            
+            
+          
            
+        
            
+      
            
+    
            
+
     
            
       
       
              
diff --git a/docs/less.html b/docs/less.html
index c383660d20..775b02afe3 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -29,6 +29,50 @@
 
   
 
+    
+    
              
+      
              
+        
              
+          
+          Bootstrap
+          
              
+            
+          
              
+        
              
+      
              
+    
              
+
     
              
       
       
                
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index bb2b5b03d8..257cbc5648 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -29,6 +29,50 @@
 
   
 
+    
+    
                
+      
                
+        
                
+          
+          Bootstrap
+          
                
+            
+          
                
+        
                
+      
                
+    
                
+
     
                
       
       
                  
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 3c0d2b4ca3..779e106636 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -41,6 +41,50 @@
 
   
 
+    
+    
                  
+      
                  
+        
                  
+          
+          Bootstrap
+          
                  
+            
+          
                  
+        
                  
+      
                  
+    
                  
+
     
                  
       
       
                    
diff --git a/docs/upgrading.html b/docs/upgrading.html
index 9611ffc41d..eccb685a48 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -29,6 +29,50 @@
 
   
 
+    
+    
                    
+      
                    
+        
                    
+          
+          Bootstrap
+          
                    
+            
+          
                    
+        
                    
+      
                    
+    
                    
+
     
                    
       
       
                      

From bba0b34c36ae54e923cf89fe17914e715aaa9746 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 7 Jun 2012 22:10:36 -0700
Subject: [PATCH 04/20] restore top navs entirely

---
 docs/assets/css/docs.css                  | 38 +++++++++++++++++++++--
 docs/base-css.html                        | 18 ++++++++---
 docs/components.html                      | 35 ++++++++++++++++++---
 docs/download.html                        | 28 +++++++----------
 docs/examples.html                        |  8 ++---
 docs/index.html                           | 22 ++++++-------
 docs/javascript.html                      | 24 +++++++++++---
 docs/less.html                            | 22 +++++--------
 docs/scaffolding.html                     | 18 ++++++++---
 docs/templates/layout.mustache            |  8 ++---
 docs/templates/pages/base-css.mustache    | 10 ++++++
 docs/templates/pages/components.mustache  | 27 ++++++++++++++++
 docs/templates/pages/download.mustache    | 20 +++++-------
 docs/templates/pages/index.mustache       | 14 ++++-----
 docs/templates/pages/javascript.mustache  | 16 ++++++++++
 docs/templates/pages/less.mustache        | 14 +++------
 docs/templates/pages/scaffolding.mustache | 10 ++++++
 docs/upgrading.html                       |  8 ++---
 18 files changed, 240 insertions(+), 100 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fd0a71edb9..640dc5cfb7 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -39,6 +39,31 @@ li {
 
 
 
+/* Tweak navbar brand link to be super sleek
+-------------------------------------------------- */
+
+.navbar,
+.subnav {
+  font-size: 13px;
+}
+.navbar-fixed-top .brand {
+  padding-right: 0;
+  padding-left: 0;
+  margin-left: 20px;
+  float: right;
+  font-weight: bold;
+  color: #000;
+  text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
+  -webkit-transition: all .2s linear;
+     -moz-transition: all .2s linear;
+          transition: all .2s linear;
+}
+.navbar-fixed-top .brand:hover {
+  text-decoration: none;
+}
+
+
+
 /* Left nav
 -------------------------------------------------- */
 
@@ -150,6 +175,7 @@ hr.soften {
 ------------------------- */
 .jumbotron {
   position: relative;
+  text-align: center;
 }
 .jumbotron h1 {
   margin-bottom: 10px;
@@ -159,7 +185,6 @@ hr.soften {
   line-height: 1;
 }
 .jumbotron p {
-  max-width: 780px;
   margin-bottom: 20px;
   font-weight: 300;
 }
@@ -179,7 +204,8 @@ hr.soften {
 /* Masthead (docs home)
 ------------------------- */
 .masthead {
-  margin-bottom: 60px;
+  margin-top: 20px;
+  margin-bottom: 80px;
 }
 .masthead h1,
 .masthead p {
@@ -226,11 +252,14 @@ hr.soften {
 ------------------------- */
 /* supporting docs pages */
 .subhead {
+  text-align: left;
 }
 .subhead h1 {
   font-size: 60px;
 }
 .subhead .lead {
+  max-width: 780px;
+  margin-bottom: 30px;
   line-height: 25px;
 }
 
@@ -340,6 +369,7 @@ hr.soften {
   margin: 36px 0 27px;
   font-size: 40px;
   font-weight: 300;
+  text-align: center;
 }
 .marketing h2,
 .marketing h3 {
@@ -366,6 +396,7 @@ hr.soften {
   font-weight: 300;
   line-height: 24px;
   color: #999;
+  text-align: center;
 }
 
 
@@ -600,6 +631,9 @@ h2 + .row {
 }
 
 /* Example sites showcase */
+.example-sites {
+  margin-left: 20px;
+}
 .example-sites img {
   max-width: 100%;
   margin: 0 auto;
diff --git a/docs/base-css.html b/docs/base-css.html
index 56756b81ff..e012f2741c 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -33,7 +33,7 @@
     ================================================== -->
     
                      
       
                      
-        
                      
+        
                      
           
                      
 
   
                      {{_i}}This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.{{/i}}
                      
-  {{_i}}Download file{{/i}}
 
   
                      {{_i}}Example tabs{{/i}}
                      
   
                      {{_i}}Click the tabs below to toggle between hidden panes, even via dropdown menus.{{/i}}
                      
@@ -664,7 +659,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
   
                      {{_i}}About Tooltips{{/i}}
                      
   
                      {{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}
                      
-  {{_i}}Download file{{/i}}
 
   
                      {{_i}}Example use of Tooltips{{/i}}
                      
   
                      {{_i}}Hover over the links below to see tooltips:{{/i}}
                      
@@ -771,7 +765,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
   
                      {{_i}}About popovers{{/i}}
                      
   
                      {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}
                      
   
                      * {{_i}}Requires Tooltip to be included{{/i}}
                      
-  {{_i}}Download file{{/i}}
 
   
                      {{_i}}Example hover popover{{/i}}
                      
   
                      {{_i}}Hover over the button to trigger the popover.{{/i}}
                      
@@ -880,7 +873,6 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
 
   
                      {{_i}}About alerts{{/i}}
                      
   
                      {{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}
                      
-  {{_i}}Download{{/i}}
 
   
                      {{_i}}Example alerts{{/i}}
                      
   
                      {{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}
                      
@@ -951,7 +943,6 @@ $('#my-alert').bind('closed', function () {
 
   
                      {{_i}}About{{/i}}
                      
   
                      {{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}
                      
-  {{_i}}Download file{{/i}}
 
   
                      {{_i}}Example uses{{/i}}
                      
   
                      {{_i}}Use the buttons plugin for states and toggles.{{/i}}
                      
@@ -1046,7 +1037,6 @@ $('#my-alert').bind('closed', function () {
 
   
                      {{_i}}About{{/i}}
                      
   
                      {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}
                      
-  {{_i}}Download file{{/i}}
   
                      * {{_i}}Requires the Transitions plugin to be included.{{/i}}
                      
 
   
                      {{_i}}Example accordion{{/i}}
                      
@@ -1195,7 +1185,6 @@ $('#myCollapsible').on('hidden', function () {
 
   
                      {{_i}}About{{/i}}
                      
   
                      {{_i}}A generic plugin for cycling through elements. A merry-go-round.{{/i}}
                      
-  {{_i}}Download file{{/i}}
 
   
                      {{_i}}Example carousel{{/i}}
                      
   
                      {{_i}}Watch the slideshow below.{{/i}}
                      
@@ -1329,7 +1318,6 @@ $('.carousel').carousel({
 
   
                      {{_i}}About{{/i}}
                      
   
                      {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}
                      
-  {{_i}}Download file{{/i}}
 
   
                      {{_i}}Example{{/i}}
                      
   
                      {{_i}}Start typing in the field below to show the typeahead results.{{/i}}
                      

From 269ce715f1a722a10d0a4a9229bcca8da3aa682a Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 7 Jun 2012 22:24:47 -0700
Subject: [PATCH 06/20] overhaul js docs top sections, update subhead

---
 docs/assets/css/docs.css                 |  3 +-
 docs/javascript.html                     | 92 ++++++++---------------
 docs/templates/pages/javascript.mustache | 93 ++++++++----------------
 3 files changed, 61 insertions(+), 127 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 640dc5cfb7..b5e4cc33cb 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -258,9 +258,10 @@ hr.soften {
   font-size: 60px;
 }
 .subhead .lead {
-  max-width: 780px;
   margin-bottom: 30px;
   line-height: 25px;
+  font-size: 30px;
+  line-height: 40px;
 }
 
 /* Subnav */
diff --git a/docs/javascript.html b/docs/javascript.html
index 2aa5fce2c1..a6dcd301e4 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -177,69 +177,35 @@
 
 
 
-  
-  
                      
-    
                      
-      
                      jQuery plugins A dozen Bootstrap plugins to get you started
                      
-    
                      
-  
                      
-    
                      
-      
                      Modals
                      
-      
                      A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.
                      
-    
                      
-    
                      
-      
                      Dropdowns
                      
-      
                      Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.
                      
-    
                      
-    
                      
-      
                      Scrollspy
                      
-      
                      Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.
                      
-    
                      
-    
                      
-      
                      Togglable tabs
                      
-      
                      Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.
                      
-    
                      
-  
                       
-  
                      
-    
                      
-      
                      Tooltips
                      
-      
                      A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.
                      
-    
                      
-    
                      
-      
                      Popovers *
                      
-      
                      Add small overlays of content, like those on the iPad, to any element for housing secondary information.
                      
-      
                      * Requires Tooltips to be included
                      
-    
                      
-    
                      
-      
                      Alert messages
                      
-      
                      The alert plugin is a tiny class for adding close functionality to alerts.
                      
-    
                      
-    
                      
-      
                      Buttons
                      
-      
                      Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
                      
-    
                      
-  
                       
-  
                      
-    
                      
-      
                      Collapse
                      
-      
                      Get base styles and flexible support for collapsible components like accordions and navigation.
                      
-    
                      
-    
                      
-      
                      Carousel
                      
-      
                      Create a merry-go-round of any content you wish to provide an interactive slideshow of content.
                      
-    
                      
-    
                      
-      
                      Typeahead
                      
-      
                      A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.
                      
-    
                      
-    
                      
-      
                      Transitions *
                      
-      
                      For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.
                      
-      
                      * Required for animation in plugins
                      
-    
                      
-  
                       
-  
                      Heads up!  If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.
                      
+
+
+
                      
+  
                      
+    
                      Javascript in Bootstrap
                      
+  
                      
+  
                      Individual or compiled
                      
+  
                      If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.
                      
+  
                      Data attributea
                      
+  
                      ...
                      
+  
                      Programmatic API
                      
+  
                      ...
                      
+
+
+
+
                      
+
+
+
+
+
                      
+  
                      
+    
                      Transitions bootstrap-transition.js
                      
+  
                      
+  
                      About transitions
                      
+  
                      For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.
                      
+  
                      * Required for animation in plugins
                      
 
                      
 
 
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index e9e81ddb5c..d90184c7b8 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -22,69 +22,36 @@
 
 
 
-  
-  
                      
-    
                      
-      
                      {{_i}}jQuery plugins{{/i}} {{_i}}A dozen Bootstrap plugins to get you started{{/i}}
                      
-    
                      
-  
                      
-    
                      
-      
                      {{_i}}Modals{{/i}}
                      
-      
                      {{_i}}A streamlined, but flexible, take on the traditional javascript modal plugin with only the minimum required functionality and smart defaults.{{/i}}
                      
-    
                      
-    
                      
-      
                      {{_i}}Dropdowns{{/i}}
                      
-      
                      {{_i}}Add dropdown menus to nearly anything in Bootstrap with this simple plugin. Bootstrap features full dropdown menu support on in the navbar, tabs, and pills.{{/i}}
                      
-    
                      
-    
                      
-      
                      {{_i}}Scrollspy{{/i}}
                      
-      
                      {{_i}}Use scrollspy to automatically update the links in your navbar to show the current active link based on scroll position.{{/i}}
                      
-    
                      
-    
                      
-      
                      {{_i}}Togglable tabs{{/i}}
                      
-      
                      {{_i}}Use this plugin to make tabs and pills more useful by allowing them to toggle through tabbable panes of local content.{{/i}}
                      
-    
                      
-  
                       
-  
                      
-    
                      
-      
                      {{_i}}Tooltips{{/i}}
                      
-      
                      {{_i}}A new take on the jQuery Tipsy plugin, Tooltips don't rely on images—they use CSS3 for animations and data-attributes for local title storage.{{/i}}
                      
-    
                      
-    
                      
-      
                      {{_i}}Popovers{{/i}} *
                      
-      
                      {{_i}}Add small overlays of content, like those on the iPad, to any element for housing secondary information.{{/i}}
                      
-      
                      * {{_i}}Requires Tooltips to be included{{/i}}
                      
-    
                      
-    
                      
-      
                      {{_i}}Alert messages{{/i}}
                      
-      
                      {{_i}}The alert plugin is a tiny class for adding close functionality to alerts.{{/i}}
                      
-    
                      
-    
                      
-      
                      {{_i}}Buttons{{/i}}
                      
-      
                      {{_i}}Do more with buttons. Control button states or create groups of buttons for more components like toolbars.{{/i}}
                      
-    
                      
-  
                       
-  
                      
-    
                      
-      
                      {{_i}}Collapse{{/i}}
                      
-      
                      {{_i}}Get base styles and flexible support for collapsible components like accordions and navigation.{{/i}}
                      
-    
                      
-    
                      
-      
                      {{_i}}Carousel{{/i}}
                      
-      
                      {{_i}}Create a merry-go-round of any content you wish to provide an interactive slideshow of content.{{/i}}
                      
-    
                      
-    
                      
-      
                      Typeahead
                      
-      
                      {{_i}}A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.{{/i}}
                      
-    
                      
-    
                      
-      
                      {{_i}}Transitions{{/i}} *
                      
-      
                      {{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}
                      
-      
                      * {{_i}}Required for animation in plugins{{/i}}
                      
-    
                      
-  
                       
-  
                      {{_i}}Heads up!{{/i}} {{_i}} If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.{{/i}}
                      
+
+
+
                      
+  
                      
+    
                      {{_i}}Javascript in Bootstrap{{/i}}
                      
+  
                      
+  
                      {{_i}}Individual or compiled{{/i}}
                      
+  
                      {{_i}}If you have downloaded the latest version of Bootstrap, both bootstrap.js and bootstrap.min.js contain all of these plugins.{{/i}}
                      
+  
                      {{_i}}Data attributea{{/i}}
                      
+  
                      {{_i}}...{{/i}}
                      
+  
                      {{_i}}Programmatic API{{/i}}
                      
+  
                      {{_i}}...{{/i}}
                      
+
+
+  {{! Thought: consider porting much of the JS readme here? }}
+
+
                      
+
+
+
+
+
                      
+  
                      
+    
                      {{_i}}Transitions{{/i}} bootstrap-transition.js
                      
+  
                      
+  
                      {{_i}}About transitions{{/i}}
                      
+  
                      {{_i}}For simple transition effects, include bootstrap-transition.js once to slide in modals or fade out alerts.{{/i}}
                      
+  
                      * {{_i}}Required for animation in plugins{{/i}}
                      
 
                      
 
 

From 550e375af08a5b6ad401c043f8c0d2f3b1d3b6c2 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 8 Jun 2012 16:35:04 -0700
Subject: [PATCH 07/20] restore scrollspy to body

---
 docs/assets/css/docs.css       |  8 ++--
 docs/base-css.html             | 82 +---------------------------------
 docs/components.html           | 82 +---------------------------------
 docs/download.html             | 82 +---------------------------------
 docs/examples.html             | 82 +---------------------------------
 docs/index.html                | 82 +---------------------------------
 docs/javascript.html           | 82 +---------------------------------
 docs/less.html                 | 82 +---------------------------------
 docs/scaffolding.html          | 82 +---------------------------------
 docs/templates/layout.mustache | 82 +---------------------------------
 docs/upgrading.html            | 82 +---------------------------------
 11 files changed, 25 insertions(+), 803 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index b5e4cc33cb..bbf8e339a8 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -455,8 +455,12 @@ hr.soften {
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
           box-shadow: 0 1px 2px rgba(0,0,0,.075);
 }
+.mini-layout,
+.mini-layout .mini-layout-body,
+.mini-layout.fluid .mini-layout-sidebar {
+  height: 300px;
+}
 .mini-layout {
-  height: 240px;
   margin-bottom: 20px;
   padding: 9px;
 }
@@ -469,7 +473,6 @@ hr.soften {
   background-color: #dceaf4;
   margin: 0 auto;
   width: 70%;
-  height: 240px;
 }
 .mini-layout.fluid .mini-layout-sidebar,
 .mini-layout.fluid .mini-layout-header,
@@ -479,7 +482,6 @@ hr.soften {
 .mini-layout.fluid .mini-layout-sidebar {
   background-color: #bbd8e9;
   width: 20%;
-  height: 240px;
 }
 .mini-layout.fluid .mini-layout-body {
   width: 77.5%;
diff --git a/docs/base-css.html b/docs/base-css.html
index e012f2741c..de0363dd46 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     
@@ -73,84 +73,6 @@
       
                      
     
                      
 
-    
                      
-      
-      
-    
                      
-
     
                      
 
 
+    
                      
 
 
 
diff --git a/docs/components.html b/docs/components.html
index afd8d60f46..fc8857041b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     
@@ -73,84 +73,6 @@
       
                      
     
                    
 
-    
                    
-      
-      
-    
                    
-
     
                    
 
 
+    
                    
 
 
 
diff --git a/docs/download.html b/docs/download.html
index b8c3387938..83097b3d16 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     
@@ -73,84 +73,6 @@
       
                  
     
                
 
-    
                
-      
-      
-    
                
-
     
                
 
 
+    
                
 
 
 
diff --git a/docs/examples.html b/docs/examples.html
index 24e9b7de19..3c4b69169b 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     
@@ -73,84 +73,6 @@
       
              
     
            
 
-    
            
-      
-      
-    
            
-
     
            
 
 
+    
            
 
 
 
diff --git a/docs/index.html b/docs/index.html
index f498907b8f..4e2de4da5f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     
@@ -73,84 +73,6 @@
       
          
     
        
 
-    
        
-      
-      
-    
        
-
     
        
 
 
+    
        
 
 
 
diff --git a/docs/javascript.html b/docs/javascript.html
index a6dcd301e4..90079292b4 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     
@@ -73,84 +73,6 @@
       
      
     
    
 
-    
    
-      
-      
-    
    
-
     
    
 
 
+    
    
 
 
 
diff --git a/docs/less.html b/docs/less.html
index 6ba90e59f1..52b91e0c6d 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     
@@ -73,84 +73,6 @@
       

     

 
-    

-      
-      
-    

-
     

 
 
+    

 
 
 
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 299eec8277..f30bb8c322 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     
@@ -73,84 +73,6 @@
       

     

 
-    

-      
-      
-    

-
     

 
 
+    

 
 
 
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index f488780143..766cac8221 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -39,7 +39,7 @@
     {{/production}}
   
 
-  
+  
 
     
@@ -85,84 +85,6 @@
       

     

 
-    

-      
-      
-    

-
     

 
 {{>body}}
@@ -177,7 +99,7 @@
         
{{_i}}Icons from Glyphicons Free, licensed under CC BY 3.0.{{/i}}

       
 
-    

+    
{{! /container }}
 
 
 
diff --git a/docs/upgrading.html b/docs/upgrading.html
index 8d388f4273..1e5165db4d 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -27,7 +27,7 @@
 
   
 
-  
+  
 
     
@@ -73,84 +73,6 @@
       

     

 
-    

-      
-      
-    

-
     

 
 
+    

 
 
 

From aff3694f28946a0640f15dc07591dbfb332fcbaf Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 9 Jun 2012 12:58:55 -0700
Subject: [PATCH 08/20] remove mention of prettify from docs, fix docs subnav
 width when fixed

---
 docs/assets/css/docs.css               |  6 +++---
 docs/base-css.html                     | 15 ++-------------
 docs/templates/pages/base-css.mustache | 15 ++-------------
 3 files changed, 7 insertions(+), 29 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index bbf8e339a8..18b7f5c9f1 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -346,7 +346,7 @@ hr.soften {
     filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
   }
   .subnav-fixed .nav {
-    width: 938px;
+    max-width: 780px;
     margin: 0 auto;
     padding: 0 1px;
   }
@@ -918,7 +918,7 @@ form.bs-docs-example {
   /* Jumbotron buttons */
   .jumbotron .btn {
     margin-bottom: 10px;
-  }
+av  }
 
   /* Subnav */
   .subnav {
@@ -1026,7 +1026,7 @@ form.bs-docs-example {
 
   /* Update subnav container */
   .subnav-fixed .nav {
-    width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
+    max-width: 970px; /* 2px less to account for left/right borders being removed when in fixed mode */
   }
 
 }
diff --git a/docs/base-css.html b/docs/base-css.html
index de0363dd46..084654b27a 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -424,19 +424,6 @@ For example, <code>section</code> should be wrapped as inline.

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.

- -

Google Prettify

-

Take the same <pre> element and add two optional classes for enhanced rendering.

-
-<p>Sample text here...</p>
-
-
-<pre class="prettyprint
-     linenums">
-  &lt;p&gt;Sample text here...&lt;/p&gt;
-</pre>
-
-

Download google-code-prettify and view the readme for how to use.

@@ -448,6 +435,8 @@ For example, <code>section</code> should be wrapped as inline.

Tables For, you guessed it, tabular data

+ +

Table markup

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 9010bef7a0..ee95ac755d 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -355,19 +355,6 @@

{{_i}}Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.{{/i}}

{{_i}}You may optionally add the .pre-scrollable class which will set a max-height of 350px and provide a y-axis scrollbar.{{/i}}

- -

Google Prettify

-

Take the same <pre> element and add two optional classes for enhanced rendering.

-
-<p>{{_i}}Sample text here...{{/i}}</p>
-
-
-<pre class="prettyprint
-     linenums">
-  &lt;p&gt;{{_i}}Sample text here...{{/i}}&lt;/p&gt;
-</pre>
-
-

{{_i}}Download google-code-prettify and view the readme for how to use.{{/i}}

@@ -379,6 +366,8 @@

{{_i}}Tables For, you guessed it, tabular data{{/i}}

+ +

{{_i}}Table markup{{/i}}

From ca63ea2f26facca1510390f85eed77d55f8f2b89 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 13:15:28 -0700 Subject: [PATCH 09/20] overhaul tables docs for more streamlined content --- docs/base-css.html | 435 ++++++++++--------------- docs/templates/pages/base-css.mustache | 435 ++++++++++--------------- 2 files changed, 346 insertions(+), 524 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 084654b27a..71f8da87e5 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -435,10 +435,182 @@ For example, <code>section</code> should be wrapped as inline.

Tables For, you guessed it, tabular data

+

Default styles

+

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+<table class="table">
+  …
+</table>
+
-

Table markup

+
+ +

Optional classes

+

Add any of the follow classes to the .table base class.

+ +

.table-striped

+

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
+
+<table class="table table-striped">
+  …
+</table>
+
+ +

.table-bordered

+

Add borders and rounded corners to the table.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+<table class="table table-bordered">
+  …
+</table>
+
+ +

.table-condensed

+

Makes tables more compact by cutting cell padding in half.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
+
+<table class="table table-condensed">
+  …
+</table>
+
+ + +
+ + +

Supported table markup

+

List of supported table HTML elements and how they should be used.

@@ -527,267 +699,6 @@ For example, <code>section</code> should be wrapped as inline. </table> - -

Table options

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameClassDescription
DefaultNoneNo styles, just columns and rows
Basic - .table - Only horizontal lines between rows
Bordered - .table-bordered - Rounds corners and adds outer border
Zebra-stripe - .table-striped - Adds light gray background color to odd rows (1, 3, 5, etc)
Condensed - .table-condensed - Cuts vertical padding in half, from 8px to 4px, within all td and th elements
- - -

Example tables

- -

1. Default table styles

-

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-<table class="table">
-  …
-</table>
-
- -

2. Striped table

-

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

-

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
-
-<table class="table table-striped">
-  …
-</table>
-
- - -

3. Bordered table

-

Add borders around the entire table and rounded corners for aesthetic purposes.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-bordered">
-  …
-</table>
-
- -

4. Condensed table

-

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-condensed">
-  …
-</table>
-
- - -

5. Combine them all!

-

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Full name
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
-
-<table class="table table-striped table-bordered table-condensed">
-  ...
-</table>
-
- diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index ee95ac755d..5910d66bac 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -366,10 +366,182 @@

{{_i}}Tables For, you guessed it, tabular data{{/i}}

+

{{_i}}Default styles{{/i}}

+

{{_i}}For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.{{/i}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
{{! /example }} +
+<table class="table">
+  …
+</table>
+
-

{{_i}}Table markup{{/i}}

+
+ +

{{_i}}Optional classes{{/i}}

+

{{_i}}Add any of the follow classes to the .table base class.{{/i}}

+ +

{{_i}}.table-striped{{/i}}

+

{{_i}}Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).{{/i}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+
{{! /example }} +
+<table class="table table-striped">
+  …
+</table>
+
+ +

{{_i}}.table-bordered{{/i}}

+

{{_i}}Add borders and rounded corners to the table.{{/i}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
+
{{! /example }} +
+<table class="table table-bordered">
+  …
+</table>
+
+ +

{{_i}}.table-condensed{{/i}}

+

{{_i}}Makes tables more compact by cutting cell padding in half.{{/i}}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
{{! /example }} +
+<table class="table table-condensed">
+  …
+</table>
+
+ + +
+ + +

{{_i}}Supported table markup{{/i}}

+

{{_i}}List of supported table HTML elements and how they should be used.{{/i}}

@@ -458,267 +630,6 @@ </table> - -

{{_i}}Table options{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{_i}}Name{{/i}}{{_i}}Class{{/i}}{{_i}}Description{{/i}}
{{_i}}Default{{/i}}{{_i}}None{{/i}}{{_i}}No styles, just columns and rows{{/i}}
{{_i}}Basic{{/i}} - .table - {{_i}}Only horizontal lines between rows{{/i}}
{{_i}}Bordered{{/i}} - .table-bordered - {{_i}}Rounds corners and adds outer border{{/i}}
{{_i}}Zebra-stripe{{/i}} - .table-striped - {{_i}}Adds light gray background color to odd rows (1, 3, 5, etc){{/i}}
{{_i}}Condensed{{/i}} - .table-condensed - {{_i}}Cuts vertical padding in half, from 8px to 4px, within all td and th elements{{/i}}
- - -

{{_i}}Example tables{{/i}}

- -

1. {{_i}}Default table styles{{/i}}

-

{{_i}}Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
{{! /example }} -
-<table class="table">
-  …
-</table>
-
- -

2. {{_i}}Striped table{{/i}}

-

{{_i}}Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.{{/i}}

-

{{_i}}Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-
{{! /example }} -
-<table class="table table-striped">
-  …
-</table>
-
- - -

3. {{_i}}Bordered table{{/i}}

-

{{_i}}Add borders around the entire table and rounded corners for aesthetic purposes.{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter
-
{{! /example }} -
-<table class="table table-bordered">
-  …
-</table>
-
- -

4. {{_i}}Condensed table{{/i}}

-

{{_i}}Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
{{! /example }} -
-<table class="table table-condensed">
-  …
-</table>
-
- - -

5. {{_i}}Combine them all!{{/i}}

-

{{_i}}Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.{{/i}}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{_i}}Full name{{/i}}
#{{_i}}First Name{{/i}}{{_i}}Last Name{{/i}}{{_i}}Username{{/i}}
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
{{! /example }} -
-<table class="table table-striped table-bordered table-condensed">
-  ...
-</table>
-
- From c65006601e65cbfa23611f55c0af314fc762d84d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 19:15:46 -0700 Subject: [PATCH 10/20] overhaul forms docs to simplify presentation of everything, reduce text, and increase visibility of examples --- docs/assets/css/docs.css | 6 + docs/base-css.html | 759 +++++++++++++------------ docs/templates/pages/base-css.mustache | 759 +++++++++++++------------ 3 files changed, 828 insertions(+), 696 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 18b7f5c9f1..4c7a7ddab0 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -37,6 +37,12 @@ li { line-height: 25px; } +/* Code in headings */ +h3 code { + font-size: 14px; + font-weight: normal; +} + /* Tweak navbar brand link to be super sleek diff --git a/docs/base-css.html b/docs/base-css.html index 71f8da87e5..0525a96747 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -710,48 +710,11 @@ For example, <code>section</code> should be wrapped as inline.

Forms

-

Controls and layouts

-

Forms include styles for all the base form controls like input, textarea, and select you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.

-

Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.

-

Error, warning, and success states are included for form controls, as wel as disabled.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameClassDescription
Vertical (default).form-vertical (not required)Stacked, left-aligned labels over controls
Inline.form-inlineLeft-aligned label and inline-block controls for compact style
Search.form-searchExtra-rounded text input for a typical search aesthetic
Horizontal.form-horizontalFloat left, right-aligned labels on same line as controls
- -

Example forms using just form controls, no extra markup

-

Basic form

-

Smart and lightweight defaults without extra markup.

+

Default styles

+

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

- +

Example block-level help text here.

-

Example markup

-

Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.

 <form class="form-horizontal">
-  <fieldset>
-    <legend>Legend text</legend>
-    <div class="control-group">
-      <label class="control-label" for="input01">Text input</label>
-      <div class="controls">
-        <input type="text" class="input-xlarge" id="input01">
-        <p class="help-block">Supporting help text</p>
-      </div>
+  <div class="control-group">
+    <label class="control-label" for="">Email</label>
+    <div class="controls">
+      <input type="text" placeholder="Email">
     </div>
-  </fieldset>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="">Password</label>
+    <div class="controls">
+      <input type="password" placeholder="Password">
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> Remember me
+      </label>
+      <button type="submit" class="btn">Sign in</button>
+    </div>
+  </div>
 </form>
-
-

Form control states

-

Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.

-
-

Form validation

-

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

+
+ + +

Supported form controls

+

Examples of standard form controls supported in an example form layout.

+ +

Inputs

+

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

+

Requires the use of a specified type at all times.

+
+ + 
-<fieldset
-  class="control-group error">
-  …
-</fieldset>
+<input type="text" placeholder="Text input">
-
-
-
- -
- -
-
-
- -
- Some value here -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - Something may have gone wrong -
-
-
- -
- - Please correct the error -
-
-
- -
- - Woohoo! -
-
-
- -
- - Woohoo! -
-
-
- - -
-
+

Textarea

+

Form control which supports multiple lines of text. Change row attribute as necessary.

+ +
+
+<textarea id="textarea" rows="3"></textarea>
+
+ +

Checkboxes and radios

+

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

+

Default (stacked)

+
+ +
+ + +
+
+<label class="checkbox">
+  <input type="checkbox" value="">
+  Option one is this and that—be sure to include why it's great
+</label>
+
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+  Option one is this and that—be sure to include why it's great
+</label>
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+  Option two can be something else and selecting it will deselect option one
+</label>
+
+ +

Inline checkboxes

+

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

+
+ + + +
+
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+</label>
+
+ +

Selects

+

Use the default option or specify a multiple="multiple" to show multiple options at once.

+
+ +
+ +
+
+<select>
+  <option>something</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+ + +
-

Extending form controls

-

Prepend & append inputs

-

Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.

-
-

Checkboxes and radios

-

Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.

-

Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.

-
-

Inline forms and append/prepend

-

To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.

-
-

Form help text

-

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

+

Adding on top of existing browser controls, Bootstrap includes other useful form components.

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

Use the same .span* classes from the grid system for input sizes.

-
-
-
- -
- - - -

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).

-
-
-
- -
-
- @ -
-

Here's some help text

-
-
-
- -
-
- .00 -
- Here's more help text -
-
-
- -
-
- $.00 -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
- - - -
-
-
- -
- - - -

Note: Labels surround all the options for much larger click areas and a more usable form.

-
-
-
- -
- - -
-
-
- - -
-
+

Prepended and appended inputs

+

Add text or buttons before or after any text-based input.

+ +

Default options

+

Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

+ +
+ @ +
+
+
+ .00 +
+
+<div class="input-prepend">
+  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+</div>
+<div class="input-append">
+  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+</div>
+
+ +

Combined

+

Use both classes and two instances of .add-on to prepend and append an input.

+
+
+ $.00 +
+
+
+<div class="input-prepend input-append">
+  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+</div>
+
+ +

Buttons instead of text

+

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

+
+
+ +
+
+
+ +
+
+
+<div class="input-append">
+  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+</div>
+
+<div class="input-append">
+  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+</div>
+
+ +

Control sizing

+

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

+ +

Relative sizing

+
+
+ + + + + + +
+
+
+<input class="input-mini" type="text">
+<input class="input-small" type="text">
+<input class="input-medium" type="text">
+<input class="input-large" type="text">
+<input class="input-xlarge" type="text">
+<input class="input-xxlarge" type="text">
+
+ +

Grid sizing

+

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

+
+
+ + + + + + +
+
+
+<input class="span1" type="text">
+<input class="span2" type="text">
+<input class="span3" type="text">
+
+ +

Uneditable inputs

+

Present data in a form that's not editable without using actual form markup.

+
+ Some value here +
+
+  <span class="input-xlarge uneditable-input">Some value here</span>
+
+ +

Form actions

+

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.

+
+
+ + +
+
+
+<div class="form-actions">
+  <button type="submit" class="btn btn-primary">Save changes</button>
+  <button class="btn">Cancel</button>
+</div>
+
+ +

Help text

+

Inline and block level support for help text that appears around form controls.

+

Inline help

+
+ Inline help text +
+
+<span class="help-inline">Inline help text</span>
+
+ +

Block help

+
+ + A longer block of help text that breaks onto a new line and may extend beyond one line. +
+
+<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+
+ + +
+ + +

Form control states

+

Provide feedback to users or visitors with basic feedback states on form controls and labels.

+ +

Input focus

+

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

+
+ +
+
+<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
+
+ +

Disabled inputs

+

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.

+
+ +
+
+<input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+
+ +

Validation states

+

Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.

+ +
+
+ +
+ + Something may have gone wrong +
+
+
+ +
+ + Please correct the error +
+
+
+ +
+ + Woohoo! +
+
+
+
+<div class="control-group warning">
+  <label class="control-label" for="inputWarning">Input with warning</label>
+  <div class="controls">
+    <input type="text" id="inputWarning">
+    <span class="help-inline">Something may have gone wrong</span>
+  </div>
+</div>
+<div class="control-group error">
+  <label class="control-label" for="inputError">Input with error</label>
+  <div class="controls">
+    <input type="text" id="inputError">
+    <span class="help-inline">Please correct the error</span>
+  </div>
+</div>
+<div class="control-group success">
+  <label class="control-label" for="inputSuccess">Input with success</label>
+  <div class="controls">
+    <input type="text" id="inputSuccess">
+    <span class="help-inline">Woohoo!</span>
+  </div>
+</div>
+
+ diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 5910d66bac..24c5ae359a 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -641,48 +641,11 @@

{{_i}}Forms{{/i}}

-

{{_i}}Controls and layouts{{/i}}

-

{{_i}}Forms include styles for all the base form controls like input, textarea, and select you'd expect. There are also a number of custom components like appended and prepended inputs and support for lists of checkboxes.{{/i}}

-

{{_i}}Bootstrap provides simple markup and styles for four styles of common web forms. Each layout requires small changes to surrounding markup, but the controls themselves remain and behave the same.{{/i}}

-

{{_i}}Error, warning, and success states are included for form controls, as wel as disabled.{{/i}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{_i}}Name{{/i}}{{_i}}Class{{/i}}{{_i}}Description{{/i}}
{{_i}}Vertical (default){{/i}}.form-vertical ({{_i}}not required{{/i}}){{_i}}Stacked, left-aligned labels over controls{{/i}}
{{_i}}Inline{{/i}}.form-inline{{_i}}Left-aligned label and inline-block controls for compact style{{/i}}
{{_i}}Search{{/i}}.form-search{{_i}}Extra-rounded text input for a typical search aesthetic{{/i}}
{{_i}}Horizontal{{/i}}.form-horizontal{{_i}}Float left, right-aligned labels on same line as controls{{/i}}
- -

{{_i}}Example forms using just form controls, no extra markup{{/i}}

-

{{_i}}Basic form{{/i}}

-

{{_i}}Smart and lightweight defaults without extra markup.{{/i}}

+

{{_i}}Default styles{{/i}}

+

{{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

- +

{{_i}}Example block-level help text here.{{/i}}

-

{{_i}}Example markup{{/i}}

-

{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.{{/i}}

 <form class="form-horizontal">
-  <fieldset>
-    <legend>{{_i}}Legend text{{/i}}</legend>
-    <div class="control-group">
-      <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
-      <div class="controls">
-        <input type="text" class="input-xlarge" id="input01">
-        <p class="help-block">{{_i}}Supporting help text{{/i}}</p>
-      </div>
+  <div class="control-group">
+    <label class="control-label" for="">{{_i}}Email{{/i}}</label>
+    <div class="controls">
+      <input type="text" placeholder="{{_i}}Email{{/i}}">
     </div>
-  </fieldset>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="">{{_i}}Password{{/i}}</label>
+    <div class="controls">
+      <input type="password" placeholder="{{_i}}Password{{/i}}">
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> {{_i}}Remember me{{/i}}
+      </label>
+      <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
+    </div>
+  </div>
 </form>
-
-

{{_i}}Form control states{{/i}}

-

{{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.{{/i}}

-
-

{{_i}}Form validation{{/i}}

-

{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.{{/i}}

+
+ + +

{{_i}}Supported form controls{{/i}}

+

{{_i}}Examples of standard form controls supported in an example form layout.{{/i}}

+ +

{{_i}}Inputs{{/i}}

+

{{_i}}Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.{{/i}}

+

{{_i}}Requires the use of a specified type at all times.{{/i}}

+
+ + 
-<fieldset
-  class="control-group error">
-  …
-</fieldset>
+<input type="text" placeholder="Text input">
-
-
-
- -
- -
-
-
- -
- Some value here -
-
-
- -
- -
-
-
- -
- -
-
-
- -
- - {{_i}}Something may have gone wrong{{/i}} -
-
-
- -
- - {{_i}}Please correct the error{{/i}} -
-
-
- -
- - {{_i}}Woohoo!{{/i}} -
-
-
- -
- - {{_i}}Woohoo!{{/i}} -
-
-
- - -
-
+

{{_i}}Textarea{{/i}}

+

{{_i}}Form control which supports multiple lines of text. Change row attribute as necessary.{{/i}}

+ +
+
+<textarea id="textarea" rows="3"></textarea>
+
+ +

{{_i}}Checkboxes and radios{{/i}}

+

{{_i}}Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.{{/i}}

+

{{_i}}Default (stacked){{/i}}

+
+ +
+ + +
+
+<label class="checkbox">
+  <input type="checkbox" value="">
+  {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
+</label>
+
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+  {{_i}}Option one is this and that—be sure to include why it's great{{/i}}
+</label>
+<label class="radio">
+  <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+  {{_i}}Option two can be something else and selecting it will deselect option one{{/i}}
+</label>
+
+ +

{{_i}}Inline checkboxes{{/i}}

+

{{_i}}Add the .inline class to a series of checkboxes or radios for controls appear on the same line.{{/i}}

+
+ + + +
+
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
+</label>
+<label class="checkbox inline">
+  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
+</label>
+
+ +

{{_i}}Selects{{/i}}

+

{{_i}}Use the default option or specify a multiple="multiple" to show multiple options at once.{{/i}}

+
+ +
+ +
+
+<select>
+  <option>something</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+<select>
+  <option>1</option>
+  <option>2</option>
+  <option>3</option>
+  <option>4</option>
+  <option>5</option>
+</select>
+
+ + +
-

{{_i}}Extending form controls{{/i}}

-

{{_i}}Prepend & append inputs{{/i}}

-

{{_i}}Input groups—with appended or prepended text—provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}

-
-

{{_i}}Checkboxes and radios{{/i}}

-

{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <label class="checkbox"> that wraps the <input type="checkbox">.{{/i}}

-

{{_i}}Inline checkboxes and radios are also supported. Just add .inline to any .checkbox or .radio and you're done.{{/i}}

-
-

{{_i}}Inline forms and append/prepend{{/i}}

-

{{_i}}To use prepend or append inputs in an inline form, be sure to place the .add-on and input on the same line, without spaces.{{/i}}

-
-

{{_i}}Form help text{{/i}}

-

{{_i}}To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.{{/i}}

+

{{_i}}Adding on top of existing browser controls, Bootstrap includes other useful form components.{{/i}}

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

{{_i}}Use the same .span* classes from the grid system for input sizes.{{/i}}

-
-
-
- -
- - - -

{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., input vs. select).{{/i}}

-
-
-
- -
-
- @ -
-

{{_i}}Here's some help text{{/i}}

-
-
-
- -
-
- .00 -
- {{_i}}Here's more help text{{/i}} -
-
-
- -
-
- $.00 -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
- - - -
-
-
- -
- - - -

{{_i}}Note: Labels surround all the options for much larger click areas and a more usable form.{{/i}}

-
-
-
- -
- - -
-
-
- - -
-
+

{{_i}}Prepended and appended inputs{{/i}}

+

{{_i}}Add text or buttons before or after any text-based input.{{/i}}

+ +

{{_i}}Default options{{/i}}

+

{{_i}}Wrap a .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

+ +
+ @ +
+
+
+ .00 +
+
+<div class="input-prepend">
+  <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
+</div>
+<div class="input-append">
+  <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
+</div>
+
+ +

{{_i}}Combined{{/i}}

+

{{_i}}Use both classes and two instances of .add-on to prepend and append an input.{{/i}}

+
+
+ $.00 +
+
+
+<div class="input-prepend input-append">
+  <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+</div>
+
+ +

{{_i}}Buttons instead of text{{/i}}

+

{{_i}}Instead of a <span> with text, use a .btn to attach a button (or two) to an input.{{/i}}

+
+
+ +
+
+
+ +
+
+
+<div class="input-append">
+  <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+</div>
+
+<div class="input-append">
+  <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+</div>
+
+ +

{{_i}}Control sizing{{/i}}

+

{{_i}}Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.{{/i}}

+ +

{{_i}}Relative sizing{{/i}}

+
+
+ + + + + + +
+
+
+<input class="input-mini" type="text">
+<input class="input-small" type="text">
+<input class="input-medium" type="text">
+<input class="input-large" type="text">
+<input class="input-xlarge" type="text">
+<input class="input-xxlarge" type="text">
+
+ +

{{_i}}Grid sizing{{/i}}

+

{{_i}}Use .span1 to .span12 for inputs that match the same sizes of the grid columns.{{/i}}

+
+
+ + + + + + +
+
+
+<input class="span1" type="text">
+<input class="span2" type="text">
+<input class="span3" type="text">
+
+ +

{{_i}}Uneditable inputs{{/i}}

+

{{_i}}Present data in a form that's not editable without using actual form markup.{{/i}}

+
+ Some value here +
+
+  <span class="input-xlarge uneditable-input">Some value here</span>
+
+ +

{{_i}}Form actions{{/i}}

+

{{_i}}End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.{{/i}}

+
+
+ + +
+
+
+<div class="form-actions">
+  <button type="submit" class="btn btn-primary">{{_i}}Save changes{{/i}}</button>
+  <button class="btn">{{_i}}Cancel{{/i}}</button>
+</div>
+
+ +

{{_i}}Help text{{/i}}

+

{{_i}}Inline and block level support for help text that appears around form controls.{{/i}}

+

{{_i}}Inline help{{/i}}

+
+ Inline help text +
+
+<span class="help-inline">Inline help text</span>
+
+ +

{{_i}}Block help{{/i}}

+
+ + A longer block of help text that breaks onto a new line and may extend beyond one line. +
+
+<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
+
+ + +
+ + +

{{_i}}Form control states{{/i}}

+

{{_i}}Provide feedback to users or visitors with basic feedback states on form controls and labels.{{/i}}

+ +

{{_i}}Input focus{{/i}}

+

{{_i}}We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.{{/i}}

+
+ +
+
+<input class="input-xlarge" id="focusedInput" type="text" value="{{_i}}This is focused...{{/i}}">
+
+ +

{{_i}}Disabled inputs{{/i}}

+

{{_i}}Add the disabled attribute on an input to prevent user input and trigger a slightly different look.{{/i}}

+
+ +
+
+<input class="input-xlarge" id="disabledInput" type="text" placeholder="{{_i}}Disabled input here...{{/i}}" disabled>
+
+ +

{{_i}}Validation states{{/i}}

+

{{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding .control-group.{{/i}}

+ +
+
+ +
+ + {{_i}}Something may have gone wrong{{/i}} +
+
+
+ +
+ + {{_i}}Please correct the error{{/i}} +
+
+
+ +
+ + {{_i}}Woohoo!{{/i}} +
+
+
+
+<div class="control-group warning">
+  <label class="control-label" for="inputWarning">{{_i}}Input with warning{{/i}}</label>
+  <div class="controls">
+    <input type="text" id="inputWarning">
+    <span class="help-inline">{{_i}}Something may have gone wrong{{/i}}</span>
+  </div>
+</div>
+<div class="control-group error">
+  <label class="control-label" for="inputError">{{_i}}Input with error{{/i}}</label>
+  <div class="controls">
+    <input type="text" id="inputError">
+    <span class="help-inline">{{_i}}Please correct the error{{/i}}</span>
+  </div>
+</div>
+<div class="control-group success">
+  <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label>
+  <div class="controls">
+    <input type="text" id="inputSuccess">
+    <span class="help-inline">{{_i}}Woohoo!{{/i}}</span>
+  </div>
+</div>
+
+ From fc2481b8e57ec79a4ec0e7f6d26f4c8492bc84f7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 19:26:06 -0700 Subject: [PATCH 11/20] fix form display issue in docs --- docs/base-css.html | 2 +- docs/templates/pages/base-css.mustache | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 0525a96747..979a873853 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -963,7 +963,7 @@ For example, <code>section</code> should be wrapped as inline.

Default options

Wrap a .add-on and an input with one of two classes to prepend or append text to an input.

-
+
@
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 24c5ae359a..f7f12c8781 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -894,7 +894,7 @@

{{_i}}Default options{{/i}}

{{_i}}Wrap a .add-on and an input with one of two classes to prepend or append text to an input.{{/i}}

- +
@
From 5ef2b6561a8409cc26c413e4a152df89a383f0e8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 22:47:45 -0700 Subject: [PATCH 12/20] realign icons to five cols, fix buttons --- docs/base-css.html | 92 +++++++++++++++++--------- docs/templates/pages/base-css.mustache | 92 +++++++++++++++++--------- 2 files changed, 122 insertions(+), 62 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 979a873853..618dee29a4 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1202,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline.

Buttons

+ +

Default buttons

+

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

@@ -1249,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline.
-

Buttons for actions

-

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

-

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

-

Cross browser compatibility

+

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

-

Multiple sizes

+ +
+ + +

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

@@ -1269,29 +1273,51 @@ For example, <code>section</code> should be wrapped as inline.

-
-

Disabled state

-

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

-

+ + +

+ + +

Disabled state

+

Make buttons look unclickable by fading them back 50%.

+ +

Anchor element

+

Add the .disabled class to <a> buttons.

+

Primary link Link

-

- - -

+
+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>
+

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

-

One class, multiple tags

+

Button element

+

Add the disabled attribute to <button> buttons.

+

+ + +

+
+<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button class="btn btn-large" disabled>Button</button>
+
+ + +
+ + +

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

- -Link - - - + + Link + + + 
 <a class="btn" href="">Link</a>
@@ -1346,6 +1372,10 @@ For example, <code>section</code> should be wrapped as inline.
         
  •  icon-download
    • 
         
  •  icon-upload
    • 
         
  •  icon-inbox
    • 
+      
+
    +
    +
    • icon-play-circle
    • icon-repeat
    • icon-refresh
      • @@ -1353,10 +1383,6 @@ For example, <code>section</code> should be wrapped as inline.
    • icon-lock
    • icon-flag
    • icon-headphones
      • -
    -
    -
    -
    • icon-volume-off
    • icon-volume-down
    • icon-volume-up
      • @@ -1378,6 +1404,10 @@ For example, <code>section</code> should be wrapped as inline.
    • icon-align-right
    • icon-align-justify
    • icon-list
      • +
    +
    +
    +
    • icon-indent-left
    • icon-indent-right
    • icon-facetime-video
      • @@ -1392,10 +1422,6 @@ For example, <code>section</code> should be wrapped as inline.
    • icon-move
    • icon-step-backward
    • icon-fast-backward
      • -
    -
    -
    -
    • icon-backward
    • icon-play
    • icon-pause
      • @@ -1410,6 +1436,10 @@ For example, <code>section</code> should be wrapped as inline.
    • icon-minus-sign
    • icon-remove-sign
    • icon-ok-sign
      • +
    +
    +
    +
    • icon-question-sign
    • icon-info-sign
    • icon-screenshot
      • @@ -1431,10 +1461,6 @@ For example, <code>section</code> should be wrapped as inline.
    • icon-leaf
    • icon-fire
    • icon-eye-open
      • -
    -
    -
    -
    • icon-eye-close
    • icon-warning-sign
    • icon-plane
      • @@ -1442,6 +1468,10 @@ For example, <code>section</code> should be wrapped as inline.
    • icon-random
    • icon-comment
    • icon-magnet
      • +
    +
    +
    +
    • icon-chevron-up
    • icon-chevron-down
    • icon-retweet
      • diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index f7f12c8781..48043cbc8a 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1133,6 +1133,9 @@

      {{_i}}Buttons{{/i}}

      + +

      Default buttons

      +

      {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.{{/i}}

      @@ -1180,13 +1183,14 @@
      -

      {{_i}}Buttons for actions{{/i}}

      -

      {{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}

      -

      {{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.{{/i}}

      -

      {{_i}}Cross browser compatibility{{/i}}

      +

      {{_i}}Cross browser compatibility{{/i}}

      {{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}

      -

      {{_i}}Multiple sizes{{/i}}

      + +
      + + +

      {{_i}}Button sizes{{/i}}

      {{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}

      @@ -1200,29 +1204,51 @@

      -
      -

      {{_i}}Disabled state{{/i}}

      -

      {{_i}}For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.{{/i}}

      -

      + + +

      + + +

      {{_i}}Disabled state{{/i}}

      +

      {{_i}}Make buttons look unclickable by fading them back 50%.{{/i}}

      + +

      Anchor element

      +

      {{_i}}Add the .disabled class to <a> buttons.{{/i}}

      +

      {{_i}}Primary link{{/i}} {{_i}}Link{{/i}}

      -

      - - -

      +
      +<a href="#" class="btn btn-large btn-primary disabled">{{_i}}Primary link{{/i}}</a>
+<a href="#" class="btn btn-large disabled">{{_i}}Link{{/i}}</a>
+

      {{_i}}Heads up!{{/i}} {{_i}}We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.{{/i}}

      -

      {{_i}}One class, multiple tags{{/i}}

      +

      Button element

      +

      {{_i}}Add the disabled attribute to <button> buttons.{{/i}}

      +

      + + +

      +
      +<button class="btn btn-large btn-primary disabled" disabled="disabled">{{_i}}Primary button{{/i}}</button>
+<button class="btn btn-large" disabled>{{_i}}Button{{/i}}</button>
+
      + + +
      + + +

      {{_i}}One class, multiple tags{{/i}}

      {{_i}}Use the .btn class on an <a>, <button>, or <input> element.{{/i}}

      -
      -{{_i}}Link{{/i}} - - - + + {{_i}}Link{{/i}} + + + 
       <a class="btn" href="">{{_i}}Link{{/i}}</a>
@@ -1277,6 +1303,10 @@
         
    •  icon-download
      • 
         
    •  icon-upload
      • 
         
    •  icon-inbox
      • 
+
    +
    +
    +
    • icon-play-circle
    • icon-repeat
    • icon-refresh
      • @@ -1284,10 +1314,6 @@
    • icon-lock
    • icon-flag
    • icon-headphones
      • -
    -
    -
    -
    • icon-volume-off
    • icon-volume-down
    • icon-volume-up
      • @@ -1309,6 +1335,10 @@
    • icon-align-right
    • icon-align-justify
    • icon-list
      • +
    +
    +
    +
    • icon-indent-left
    • icon-indent-right
    • icon-facetime-video
      • @@ -1323,10 +1353,6 @@
    • icon-move
    • icon-step-backward
    • icon-fast-backward
      • -
    -
    -
    -
    • icon-backward
    • icon-play
    • icon-pause
      • @@ -1341,6 +1367,10 @@
    • icon-minus-sign
    • icon-remove-sign
    • icon-ok-sign
      • +
    +
    +
    +
    • icon-question-sign
    • icon-info-sign
    • icon-screenshot
      • @@ -1362,10 +1392,6 @@
    • icon-leaf
    • icon-fire
    • icon-eye-open
      • -
    -
    -
    -
    • icon-eye-close
    • icon-warning-sign
    • icon-plane
      • @@ -1373,6 +1399,10 @@
    • icon-random
    • icon-comment
    • icon-magnet
      • +
    +
    +
    +
    • icon-chevron-up
    • icon-chevron-down
    • icon-retweet
      • From 4a907709ba38767b118c1a880dadfb58df8ae1d6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 9 Jun 2012 23:26:46 -0700 Subject: [PATCH 13/20] redo icons section --- docs/base-css.html | 96 +++++++++++------------- docs/templates/pages/base-css.mustache | 100 +++++++++++-------------- 2 files changed, 86 insertions(+), 110 deletions(-) diff --git a/docs/base-css.html b/docs/base-css.html index 618dee29a4..ee12d62e2f 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1341,6 +1341,9 @@ For example, <code>section</code> should be wrapped as inline.

      Icons Graciously provided by Glyphicons

      + +

      Icon glyphs

      +

      140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

        @@ -1504,16 +1507,12 @@ For example, <code>section</code> should be wrapped as inline.
      -
      + +
      -

      Built as a sprite

      -

      Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.

      -

      All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.

      -

      Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.

      - -

      How to use

      -

      Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

      +

      How to use

      +

      All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

       <i class="icon-search"></i>
      @@ -1521,66 +1520,55 @@ For example, <code>section</code> should be wrapped as inline. 
       <i class="icon-search icon-white"></i>
      -

      There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.

      Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.

      -

      Use cases

      -

      Icons are great, but where would one use them? Here are a few ideas:

      -
        -
      • As visuals for your sidebar navigation
        • -
      • For a purely icon-driven navigation
        • -
      • For buttons to help convey the meaning of an action
        • -
      • With links to share context on a user's destination
        • -
      -

      Essentially, anywhere you can put an <i> tag, you can put an icon.

      + +
      -

      Examples

      +

      Icon examples

      Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

      -
      -
      - - - - +

      Buttons

      +
      +
      +
      + + + + +
      +
      + User + + +
      -
      - User - -
      + +

      Navigation

      +
      +
      +
      -

      - Refresh - Checkout - Delete -

      -

      - Comment - Settings - More Info -

      -
      - -
      - -
      +

      Form fields

      +
      diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 48043cbc8a..a1f4a3501d 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1272,6 +1272,9 @@

      {{_i}}Icons Graciously provided by Glyphicons{{/i}}

      + +

      {{_i}}Icon glyphs{{/i}}

      +

      {{_i}}140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.{{/i}}

        @@ -1435,16 +1438,12 @@
      -
      + +
      -

      {{_i}}Built as a sprite{{/i}}

      -

      {{_i}}Instead of making every icon an extra request, we've compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.{{/i}}

      -

      {{_i}}All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.{{/i}}

      -

      {{_i}}Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.{{/i}}

      - -

      {{_i}}How to use{{/i}}

      -

      {{_i}}Bootstrap uses an <i> tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:{{/i}}

      +

      {{_i}}How to use{{/i}}

      +

      {{_i}}All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:{{/i}}

       <i class="icon-search"></i>
      @@ -1452,66 +1451,55 @@ 
       <i class="icon-search icon-white"></i>
      -

      {{_i}}There are 140 classes to choose from for your icons. Just add an <i> tag with the right classes and you're set. You can find the full list in sprites.less or right here in this document.{{/i}}

      {{_i}}Heads up!{{/i}} {{_i}}When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.{{/i}}

      -

      {{_i}}Use cases{{/i}}

      -

      {{_i}}Icons are great, but where would one use them? Here are a few ideas:{{/i}}

      -
        -
      • {{_i}}As visuals for your sidebar navigation{{/i}}
        • -
      • {{_i}}For a purely icon-driven navigation{{/i}}
        • -
      • {{_i}}For buttons to help convey the meaning of an action{{/i}}
        • -
      • {{_i}}With links to share context on a user's destination{{/i}}
        • -
      -

      {{_i}}Essentially, anywhere you can put an <i> tag, you can put an icon.{{/i}}

      + +
      -

      {{_i}}Examples{{/i}}

      +

      {{_i}}Icon examples{{/i}}

      {{_i}}Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.{{/i}}

      -
      -
      - - - - +

      {{_i}}Buttons{{/i}}

      +
      +
      +
      + + + + +
      +
      + {{_i}}User{{/i}} + + +
      -
      - {{_i}}User{{/i}} - -
      {{! /bs-docs-example }} + +

      {{_i}}Navigation{{/i}}

      +
      +
      + -
      -
      -

      - {{_i}}Refresh{{/i}} - {{_i}}Checkout{{/i}} - {{_i}}Delete{{/i}} -

      -

      - {{_i}}Comment{{/i}} - {{_i}}Settings{{/i}} - {{_i}}More Info{{/i}} -

      +
      {{! /well }} +
      {{! /bs-docs-example }} -
      - -
      - - +

      {{_i}}Form fields{{/i}}

      +
      From f2e39233f54a733df54d5d998abd79233e0f143f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 15:12:02 -0700 Subject: [PATCH 14/20] rewrite alerts and progress bars sections --- docs/assets/css/bootstrap.css | 4 - docs/assets/css/docs.css | 5 +- docs/components.html | 238 +++++++++++++++-------- docs/templates/pages/components.mustache | 238 +++++++++++++++-------- less/alerts.less | 5 +- 5 files changed, 317 insertions(+), 173 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index fe957d19f1..9803e2a6a2 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -3169,10 +3169,6 @@ input[type="submit"].btn.btn-mini { border-radius: 4px; } -.alert-heading { - color: inherit; -} - .alert .close { position: relative; top: -2px; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 4c7a7ddab0..4d65f6b045 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -739,7 +739,10 @@ form.well { .bs-docs-example p:last-child { margin-bottom: 0; } -.bs-docs-example .table { +.bs-docs-example .table, +.bs-docs-example .progress, +.bs-docs-example .well, +.bs-docs-example .alert { margin-bottom: 5px; } form.bs-docs-example { diff --git a/docs/components.html b/docs/components.html index fc8857041b..312e03c201 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1579,50 +1579,68 @@

      Alerts Styles for success, warning, and error messages

      -

      Lightweight defaults

      - -

      Rewritten base class

      -

      With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.

      -

      Single alert message

      -

      For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.

      -
      -

      Goes great with javascript

      -

      Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.

      -

      Get the plugin »

      - -

      Example alerts

      -

      Wrap your message and an optional close icon in a div with simple class.

      -
      - - Warning! Best check yo self, you're not looking too good. +

      Default alert

      +

      Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

      +
      +
      + + Warning! Best check yo self, you're not looking too good. + 
       <div class="alert">
-  <button class="close" data-dismiss="alert">×</button>
+  <button type="button" class="close" data-dismiss="alert">×</button>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>
      -

      Heads up! iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

      -

      Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.

      -
      - -

      Warning!

      -

      Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      + +

      Dismiss buttons

      +

      Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.

      +
      +<a href="#" class="close" data-dismiss="alert">×</button>
+
      +

      Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.

      +
      +<button type="button" class="close" data-dismiss="alert">×</button>
+
      + +

      Dismiss alerts via javascript

      +

      Use the alerts jQuery plugin for quick and easy dismissal of alerts.

      + + +
      + + +

      Options

      +

      For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

      +
      +
      + +

      Warning!

      +

      Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

      + 
       <div class="alert alert-block">
-  <a class="close" data-dismiss="alert" href="#">×</a>
-  <h4 class="alert-heading">Warning!</h4>
+  <a class="close" data-dismiss="alert" href="#">&times;</a>
+  <h4>Warning!</h4>
   Best check yo self, you're not...
 </div>
      -

      Contextual alternatives Add optional classes to change an alert's connotation

      + +
      + + +

      Contextual alternatives

      +

      Add optional classes to change an alert's connotation.

      Error or danger

      -
      - - Oh snap! Change a few things up and try submitting again. +
      +
      + + Oh snap! Change a few things up and try submitting again. + 
       <div class="alert alert-error">
@@ -1631,9 +1649,11 @@

      Success

      -
      - - Well done! You successfully read this important alert message. +
      +
      + + Well done! You successfully read this important alert message. + 
       <div class="alert alert-success">
@@ -1642,9 +1662,11 @@

      Information

      -
      - - Heads up! This alert needs your attention, but it's not super important. +
      +
      + + Heads up! This alert needs your attention, but it's not super important. + 
       <div class="alert alert-info">
@@ -1667,78 +1689,116 @@
 
   
      Basic
      
   
      Default progress bar with a vertical gradient.
      
-  
      
-    
      
+  
      
+    
      
+      
      
+    
      
   
      
 
       <div class="progress">
-  <div class="bar"
-       style="width: 60%;"></div>
+  <div class="bar" style="width: 60%;"></div>
 </div>
 
      
 
   
      Striped
      
-  
      Uses a gradient to create a striped effect (no IE).
      
-  
      
-    
      
+  
      Uses a gradient to create a striped effect. Not available in IE7-8.
      
+  
      
+    
      
+      
      
+    
      
   
      
 
       <div class="progress progress-striped">
-  <div class="bar"
-       style="width: 20%;"></div>
+  <div class="bar" style="width: 20%;"></div>
 </div>
 
      
 
   
      Animated
      
-  
      Takes the striped example and animates it (no IE).
      
-  
      
-    
      
+  
      Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.
      
+  
      
+    
      
+      
      
+    
      
   
      
 
      -<div class="progress progress-striped
-     active">
-  <div class="bar"
-       style="width: 40%;"></div>
+<div class="progress progress-striped active">
+  <div class="bar" style="width: 40%;"></div>
 </div>
 
      
 
-  
      Options and browser support
      
+
+  
      
+
+
+  
      Options
      
 
   
      Additional colors
      
   
      Progress bars use some of the same button and alert classes for consistent styles.
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
+  
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
   
      
+
      +<div class="progress progress-info">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
      
 
   
      Striped bars
      
   
      Similar to the solid colors, we have varied striped progress bars.
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
+  
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
   
      
+
      +<div class="progress progress-info progress-striped">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success progress-striped">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning progress-striped">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger progress-striped">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
      
 
-  
      Behavior
      
-  
      Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
      
-  
      If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.
      
 
-  
      Browser support
      
+  
      
+
+
+  
      Browser support
      
   
      Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.
      
   
      Opera and IE do not support animations at this time.
      
 
@@ -1757,21 +1817,33 @@
 
   
      Wells
      
   
      Use the well as a simple effect on an element to give it an inset effect.
      
-  
      
-    Look, I'm in a well!
+  
      
+    
      
+      Look, I'm in a well!
+    
      
   
      
 
       <div class="well">
   ...
 </div>
 
      
-  
      Optional classes
      
+  
      Optional classes
      
   
      Control padding and rounded corners with two optional modifier classes.
      
+  
      
+    
      
+      Look, I'm in a well!
+    
      
+  
      
 
       <div class="well well-large">
   ...
 </div>
 
      
+  
      
+    
      
+      Look, I'm in a well!
+    
      
+  
      
 
       <div class="well well-small">
   ...
@@ -1779,7 +1851,9 @@
 
      
   
      Close icon
      
   
      Use the generic close icon for dismissing content like modals and alerts.
      
-  
      
+  
      
+    
      
+  
      
 
      <button class="close">&times;</button>
      
   
      iOS devices require an href="#" for click events if you rather use an anchor.
      
 
      <a class="close" href="#">&times;</a>
      
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index acdae3d925..c90b2997ea 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1502,50 +1502,68 @@
     
      {{_i}}Alerts{{/i}} {{_i}}Styles for success, warning, and error messages{{/i}}
      
   
      
 
-  
      {{_i}}Lightweight defaults{{/i}}
      
-
-  
      {{_i}}Rewritten base class{{/i}}
      
-  
      {{_i}}With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.{{/i}}
      
-  
      {{_i}}Single alert message{{/i}}
      
-  
      {{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.{{/i}}
      
-  
      
-  
      {{_i}}Goes great with javascript{{/i}}
      
-  
      {{_i}}Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.{{/i}}
      
-  
      {{_i}}Get the plugin »{{/i}}
      
-
-  
      {{_i}}Example alerts{{/i}}
      
-  
      {{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}
      
-  
      
-    
-    {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}}
+  
      {{_i}}Default alert{{/i}}
      
+  
      {{_i}}Wrap any text and an optional dismiss button in .alert for a basic warning alert message.{{/i}}
      
+  
      
+    
      
+      
+      {{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}}
+    
      
   
      
 
       <div class="alert">
-  <button class="close" data-dismiss="alert">×</button>
+  <button type="button" class="close" data-dismiss="alert">×</button>
   <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
 </div>
 
      
-  
      {{_i}}Heads up!{{/i}} {{_i}}iOS devices require an href="#" for the dismissal of alerts. Be sure to include it and the data attribute for anchor close icons. Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}
      
-  
      {{_i}}Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.{{/i}}
      
-  
      
-    
-    
      {{_i}}Warning!{{/i}}
      
-    
      {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
      
+
+  
      {{_i}}Dismiss buttons{{/i}}
      
+  
      {{_i}}Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.{{/i}}
      
+
      +<a href="#" class="close" data-dismiss="alert">×</button>
+
      
+  
      {{_i}}Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.{{/i}}
      
+
      +<button type="button" class="close" data-dismiss="alert">×</button>
+
      
+
+  
      {{_i}}Dismiss alerts via javascript{{/i}}
      
+  
      {{_i}}Use the alerts jQuery plugin for quick and easy dismissal of alerts.{{/i}}
      
+
+
+  
      
+
+
+  
      {{_i}}Options{{/i}}
      
+  
      {{_i}}For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.{{/i}}
      
+  
      
+    
      
+      
+      
      {{_i}}Warning!{{/i}}
      
+      
      {{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
      
+    
      
   
      
 
       <div class="alert alert-block">
-  <a class="close" data-dismiss="alert" href="#">×</a>
-  <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
+  <a class="close" data-dismiss="alert" href="#">&times;</a>
+  <h4>{{_i}}Warning!{{/i}}</h4>
   {{_i}}Best check yo self, you're not...{{/i}}
 </div>
 
      
 
-  
      {{_i}}Contextual alternatives{{/i}} {{_i}}Add optional classes to change an alert's connotation{{/i}}
      
+
+  
      
+
+
+  
      {{_i}}Contextual alternatives{{/i}}
      
+  
      {{_i}}Add optional classes to change an alert's connotation.{{/i}}
      
 
   
      {{_i}}Error or danger{{/i}}
      
-  
      
-    
-    {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}}
+  
      
+    
      
+      
+      {{_i}}Oh snap!{{/i}} {{_i}}Change a few things up and try submitting again.{{/i}}
+    
      
   
      
 
       <div class="alert alert-error">
@@ -1554,9 +1572,11 @@
 
      
 
   
      {{_i}}Success{{/i}}
      
-  
      
-    
-    {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}}
+  
      
+    
      
+      
+      {{_i}}Well done!{{/i}} {{_i}}You successfully read this important alert message.{{/i}}
+    
      
   
      
 
       <div class="alert alert-success">
@@ -1565,9 +1585,11 @@
 
      
 
   
      {{_i}}Information{{/i}}
      
-  
      
-    
-    {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}}
+  
      
+    
      
+      
+      {{_i}}Heads up!{{/i}} {{_i}}This alert needs your attention, but it's not super important.{{/i}}
+    
      
   
      
 
       <div class="alert alert-info">
@@ -1590,78 +1612,116 @@
 
   
      {{_i}}Basic{{/i}}
      
   
      {{_i}}Default progress bar with a vertical gradient.{{/i}}
      
-  
      
-    
      
+  
      
+    
      
+      
      
+    
      
   
      
 
       <div class="progress">
-  <div class="bar"
-       style="width: 60%;"></div>
+  <div class="bar" style="width: 60%;"></div>
 </div>
 
      
 
   
      {{_i}}Striped{{/i}}
      
-  
      {{_i}}Uses a gradient to create a striped effect (no IE).{{/i}}
      
-  
      
-    
      
+  
      {{_i}}Uses a gradient to create a striped effect. Not available in IE7-8.{{/i}}
      
+  
      
+    
      
+      
      
+    
      
   
      
 
       <div class="progress progress-striped">
-  <div class="bar"
-       style="width: 20%;"></div>
+  <div class="bar" style="width: 20%;"></div>
 </div>
 
      
 
   
      {{_i}}Animated{{/i}}
      
-  
      {{_i}}Takes the striped example and animates it (no IE).{{/i}}
      
-  
      
-    
      
+  
      {{_i}}Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.{{/i}}
      
+  
      
+    
      
+      
      
+    
      
   
      
 
      -<div class="progress progress-striped
-     active">
-  <div class="bar"
-       style="width: 40%;"></div>
+<div class="progress progress-striped active">
+  <div class="bar" style="width: 40%;"></div>
 </div>
 
      
 
-  
      {{_i}}Options and browser support{{/i}}
      
+
+  
      
+
+
+  
      {{_i}}Options{{/i}}
      
 
   
      {{_i}}Additional colors{{/i}}
      
   
      {{_i}}Progress bars use some of the same button and alert classes for consistent styles.{{/i}}
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
+  
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
   
      
+
      +<div class="progress progress-info">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
      
 
   
      {{_i}}Striped bars{{/i}}
      
   
      {{_i}}Similar to the solid colors, we have varied striped progress bars.{{/i}}
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
-  
      
-  
      
-    
      
+  
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
+    
      
+      
      
+    
      
   
      
+
      +<div class="progress progress-info progress-striped">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success progress-striped">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning progress-striped">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger progress-striped">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
      
 
-  
      {{_i}}Behavior{{/i}}
      
-  
      {{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}
      
-  
      {{_i}}If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.{{/i}}
      
 
-  
      {{_i}}Browser support{{/i}}
      
+  
      
+
+
+  
      {{_i}}Browser support{{/i}}
      
   
      {{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}
      
   
      {{_i}}Opera and IE do not support animations at this time.{{/i}}
      
 
@@ -1680,21 +1740,33 @@
 
   
      {{_i}}Wells{{/i}}
      
   
      {{_i}}Use the well as a simple effect on an element to give it an inset effect.{{/i}}
      
-  
      
-    {{_i}}Look, I'm in a well!{{/i}}
+  
      
+    
      
+      {{_i}}Look, I'm in a well!{{/i}}
+    
      
   
      
 
       <div class="well">
   ...
 </div>
 
      
-  
      {{_i}}Optional classes{{/i}}
      
+  
      {{_i}}Optional classes{{/i}}
      
   
      {{_i}}Control padding and rounded corners with two optional modifier classes.{{/i}}
      
+  
      
+    
      
+      {{_i}}Look, I'm in a well!{{/i}}
+    
      
+  
      
 
       <div class="well well-large">
   ...
 </div>
 
      
+  
      
+    
      
+      {{_i}}Look, I'm in a well!{{/i}}
+    
      
+  
      
 
       <div class="well well-small">
   ...
@@ -1702,7 +1774,9 @@
 
      
   
      {{_i}}Close icon{{/i}}
      
   
      {{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}
      
-  
      
+  
      
+    
      
+  
      
 
      <button class="close">&times;</button>
      
   
      {{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}
      
 
      <a class="close" href="#">&times;</a>
      
diff --git a/less/alerts.less b/less/alerts.less
index 46a0d77bfd..1f73314c11 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -11,9 +11,6 @@
   .border-radius(4px);
   color: @warningText;
 }
-.alert-heading {
-  color: inherit;
-}
 
 // Adjust close link position
 .alert .close {
@@ -28,7 +25,7 @@
 
 .alert-success {
   background-color: @successBackground;
-  border-color: @successBorder;  
+  border-color: @successBorder;
   color: @successText;
 }
 .alert-danger,

From 3985379ccabcdcf9f96432ba37be2dd38ed117bc Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 10 Jun 2012 15:14:21 -0700
Subject: [PATCH 15/20] rearrange hero unit section

---
 docs/assets/css/docs.css                 |  3 ++-
 docs/components.html                     | 22 +++++++++-------------
 docs/templates/pages/components.mustache | 22 +++++++++-------------
 3 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 4d65f6b045..fc9df07e22 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -742,7 +742,8 @@ form.well {
 .bs-docs-example .table,
 .bs-docs-example .progress,
 .bs-docs-example .well,
-.bs-docs-example .alert {
+.bs-docs-example .alert,
+.bs-docs-example .hero-unit {
   margin-bottom: 5px;
 }
 form.bs-docs-example {
diff --git a/docs/components.html b/docs/components.html
index 312e03c201..5fae8d4b5a 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1398,11 +1398,16 @@
   
      
     
      Typographic components Page header and hero unit for segmenting content
      
   
      
-  
      Hero unit
      
 
-  
      Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
      
-  
      Markup
      
-  
      Wrap your content in a div like so:
      
+  
      Hero unit
      
+  
      A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
      
+  
      
+    
      
+      
      Hello, world!
      
+      
      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
      
+      
      Learn more
      
+    
      
+  
      
 
       <div class="hero-unit">
   <h1>Heading</h1>
@@ -1415,16 +1420,7 @@
 </div>
 
      
 
-  
      
-    
      
-      
      Hello, world!
      
-      
      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
      
-      
      Learn more
      
-    
      
-  
      
-
   
      Page header
      
-
   
      A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
      
   
      
     
      
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index c90b2997ea..aa1032c06d 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1321,11 +1321,16 @@
   
      
     
      {{_i}}Typographic components{{/i}} {{_i}}Page header and hero unit for segmenting content{{/i}}
      
   
      
-  
      {{_i}}Hero unit{{/i}}
      
 
-  
      {{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}
      
-  
      {{_i}}Markup{{/i}}
      
-  
      {{_i}}Wrap your content in a div like so:{{/i}}
      
+  
      {{_i}}Hero unit{{/i}}
      
+  
      {{_i}}A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}
      
+  
      
+    
      
+      
      {{_i}}Hello, world!{{/i}}
      
+      
      {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}
      
+      
      {{_i}}Learn more{{/i}}
      
+    
      
+  
      
 
       <div class="hero-unit">
   <h1>{{_i}}Heading{{/i}}</h1>
@@ -1338,16 +1343,7 @@
 </div>
 
      
 
-  
      
-    
      
-      
      {{_i}}Hello, world!{{/i}}
      
-      
      {{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}
      
-      
      {{_i}}Learn more{{/i}}
      
-    
      
-  
      
-
   
      {{_i}}Page header{{/i}}
      
-
   
      {{_i}}A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}
      
   
      
     
      

From 0c817bf5e2ab635777c17e00caed829e6939f34f Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 10 Jun 2012 16:46:46 -0700
Subject: [PATCH 16/20] redo pagination and breadcrumbs

---
 docs/assets/css/docs.css                 |   6 +-
 docs/components.html                     | 229 ++++++++++++++---------
 docs/templates/pages/components.mustache | 229 ++++++++++++++---------
 3 files changed, 279 insertions(+), 185 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index fc9df07e22..83533ea784 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -743,9 +743,13 @@ form.well {
 .bs-docs-example .progress,
 .bs-docs-example .well,
 .bs-docs-example .alert,
-.bs-docs-example .hero-unit {
+.bs-docs-example .hero-unit,
+.bs-docs-example .pagination {
   margin-bottom: 5px;
 }
+.bs-docs-example .pagination {
+  margin-top: 0;
+}
 form.bs-docs-example {
   padding-bottom: 19px;
 }
diff --git a/docs/components.html b/docs/components.html
index 5fae8d4b5a..5ff8244761 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1077,34 +1077,26 @@
     
      Breadcrumbs 
      
   
      
 
-  
      Why use them
      
-  
      Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.
      
-
-  
      Examples
      
+  
      Examples
      
   
      A single example shown as it might be displayed across multiple pages.
      
-  
        
-    
      • Home
        • 
-  
      
-  
        
-    
      • Home /
        • 
-    
      • Library
        • 
-  
      
-  
-
-  
      Markup
      
-  
      HTML is your standard unordered list with links.
      
+  
      
+    
        
+      
      • Home
        • 
+    
      
+    
        
+      
      • Home /
        • 
+      
      • Library
        • 
+    
      
+    
+  
      
 
       <ul class="breadcrumb">
-  <li>
-    <a href="#">Home</a> <span class="divider">/</span>
-  </li>
-  <li>
-    <a href="#">Library</a> <span class="divider">/</span>
-  </li>
+  <li><a href="#">Home</a> <span class="divider">/</span></li>
+  <li><a href="#">Library</a> <span class="divider">/</span></li>
   <li class="active">Data</li>
 </ul>
 
      
@@ -1120,85 +1112,119 @@
     
      Pagination Two options for paging through content
      
   
      
 
-  
      Multicon-page pagination
      
-
-  
      When to use
      
-  
      Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
      
-  
      Stateful page links
      
-  
      Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.
      
-  
      Flexible alignment
      
-  
      Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.
      
-
-  
      Examples
      
-  
      The default pagination component is flexible and works in a number of variations.
      
-  
 
-  
      {{_i}}Why use them{{/i}}
      
-  
      {{_i}}Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.{{/i}}
      
-
-  
      {{_i}}Examples{{/i}}
      
+  
      {{_i}}Examples{{/i}}
      
   
      {{_i}}A single example shown as it might be displayed across multiple pages.{{/i}}
      
-  
        
-    
      • {{_i}}Home{{/i}}
        • 
-  
      
-  
-  
-
-  
      {{_i}}Markup{{/i}}
      
-  
      {{_i}}HTML is your standard unordered list with links.{{/i}}
      
+  
      
+    
        
+      
      • {{_i}}Home{{/i}}
        • 
+    
      
+    
+    
+  
      
 
       <ul class="breadcrumb">
-  <li>
-    <a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span>
-  </li>
-  <li>
-    <a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span>
-  </li>
+  <li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
+  <li><a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span></li>
   <li class="active">{{_i}}Data{{/i}}</li>
 </ul>
 
      
@@ -1043,85 +1035,119 @@
     
      {{_i}}Pagination{{/i}} {{_i}}Two options for paging through content{{/i}}
      
   
      
 
-  
      {{_i}}Multicon-page pagination{{/i}}
      
-
-  
      {{_i}}When to use{{/i}}
      
-  
      {{_i}}Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.{{/i}}
      
-  
      {{_i}}Stateful page links{{/i}}
      
-  
      {{_i}}Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.{{/i}}
      
-  
      {{_i}}Flexible alignment{{/i}}
      
-  
      {{_i}}Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.{{/i}}
      
-
-  
      {{_i}}Examples{{/i}}
      
-  
      {{_i}}The default pagination component is flexible and works in a number of variations.{{/i}}
      
-  
 
-  
      Button groups
      
-  
      Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.
      
-  
      Best practices
      
-  
      We recommend the following guidelines for using button groups and toolbars:
      
+
+  
      Description and best practices
      
+  
      Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements. We recommend the following guidelines for using button groups and toolbars:
      
   
        
     
      • Always use the same element in a single button group, <a> or <button>.
        • 
     
      • Don't mix buttons of different colors in the same button group.
        • 
@@ -128,10 +128,17 @@
   
      
   
      Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.
      
 
-  
      Default example
      
-  
      Here's how the HTML looks for a standard button group built with anchor tag buttons:
      
-  
      
-    
      
+
+  
      
+
+
+  
      Examples and variations
      
+  
      Two basic options, along with two more specific variations.
      
+
+  
      Basic button group
      
+  
      Wrap a series of buttons with .btn in .btn-group.
      
+  
      
+    
      
       
       
       
@@ -144,22 +151,25 @@
   <button class="btn">3</button>
 </div>
 
      
+
   
      Toolbar example
      
   
      Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
      
-  
      
-    
      
-      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
+  
      
+    
      
+      
      
+        
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+      
      
     
      
   
      
 
      @@ -169,9 +179,10 @@
   </div>
 </div>
 
      
+
   
      Checkbox and radio flavors
      
   
      Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.
      
-  
      Get the javascript »
      
+
   
      Dropdowns in button groups
      
   
      Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.
      
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 3f4ad2d08e..3001102a8f 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -33,6 +33,7 @@
 
 
 
+
 
 
      
@@ -40,10 +41,9 @@
     
      {{_i}}Button groups{{/i}} {{_i}}Join buttons for more toolbar-like functionality{{/i}}
      
   
      
 
-  
      {{_i}}Button groups{{/i}}
      
-  
      {{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}
      
-  
      {{_i}}Best practices{{/i}}
      
-  
      {{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}
      
+
+  
      {{_i}}Description and best practices{{/i}}
      
+  
      {{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements. We recommend the following guidelines for using button groups and toolbars:{{/i}}
      
   
        
     
      • {{_i}}Always use the same element in a single button group, <a> or <button>.{{/i}}
        • 
     
      • {{_i}}Don't mix buttons of different colors in the same button group.{{/i}}
        • 
@@ -51,10 +51,17 @@
   
      
   
      {{_i}}Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}
      
 
-  
      {{_i}}Default example{{/i}}
      
-  
      {{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}
      
-  
      
-    
      
+
+  
      
+
+
+  
      {{_i}}Examples and variations{{/i}}
      
+  
      {{_i}}Two basic options, along with two more specific variations.{{/i}}
      
+
+  
      {{_i}}Basic button group{{/i}}
      
+  
      {{_i}}Wrap a series of buttons with .btn in .btn-group.{{/i}}
      
+  
      
+    
      
       
       
       
@@ -67,22 +74,25 @@
   <button class="btn">3</button>
 </div>
      +

      {{_i}}Toolbar example{{/i}}

      {{_i}}Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.{{/i}}

      -
      -
      - - - - -
      -
      - - - -
      -
      - +
      +
      +
      + + + + +
      +
      + + + +
      +
      + + 
      @@ -92,9 +102,10 @@
   </div>
 </div>
      +

      {{_i}}Checkbox and radio flavors{{/i}}

      {{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.{{/i}}

      -

      {{_i}}Get the javascript »{{/i}}

      +

      {{_i}}Dropdowns in button groups{{/i}}

      {{_i}}Heads up!{{/i}} {{_i}}Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.{{/i}}

      From c90c66e61f5e3f09a46d63cd79086c7b2ab6db5c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 21:00:20 -0700 Subject: [PATCH 19/20] rewrite the split button dropdowns section --- docs/components.html | 542 +++++++++++----------- docs/templates/pages/components.mustache | 548 ++++++++++++----------- 2 files changed, 547 insertions(+), 543 deletions(-) diff --git a/docs/components.html b/docs/components.html index 4d7b6d3bb1..c96e4aa034 100644 --- a/docs/components.html +++ b/docs/components.html @@ -196,87 +196,83 @@

      Button dropdown menus Built on button groups to provide contextual menus

      -

      Button dropdowns

      -

      Overview and examples

      +

      Overview and examples

      Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

      -
      -
      - - -
      -
      - - -
      -
      - - -
      +
      +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      + + +
      +
      -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - - -
      -
      - -

      Example markup

      -

      Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.

       <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -291,184 +287,132 @@
 
   
      Works with all button sizes
      
   
      Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.
      
-  
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-  
      
+  
      
+    
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+    
      
+  
      
 
   
      Requires javascript
      
   
      Button dropdowns require the Bootstrap dropdown plugin to function.
      
   
      In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
      
 
-  
      
+
+  
      
+
 
   
      Split button dropdowns
      
-
-  
      Overview and examples
      
   
      Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.
      
-  
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
+  
      
+    
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+    
      
   
      
-  
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      Sizes
      
-  
      Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-
      -<div class="btn-group">
-  ...
-  <ul class="dropdown-menu pull-right">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-
      
-
-  
      Example markup
      
-  
      We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.
      
 
       <div class="btn-group">
   <button class="btn">Action</button>
@@ -480,31 +424,89 @@
   </ul>
 </div>
 
      
+
+  
      Sizes
      
+  
      Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.
      
+  
      
+    
      
+      
      
+        
+        
+        
+      
      
+    
      
+    
      
+      
      
+        
+        
+        
+      
      
+    
      
+    
      
+      
      
+        
+        
+        
+      
      
+    
      
+  
      
+
      +<div class="btn-group">
+  <button class="btn btn-mini">Action</button>
+  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
      
+
   
      Dropup menus
      
   
      Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.
      
-  
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
+  
      
+    
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+    
      
   
      
 
       <div class="btn-group dropup">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 3001102a8f..cf40248afb 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -119,87 +119,83 @@
     
      {{_i}}Button dropdown menus{{/i}} {{_i}}Built on button groups to provide contextual menus{{/i}}
      
   
      
 
-  
      {{_i}}Button dropdowns{{/i}}
      
 
-  
      {{_i}}Overview and examples{{/i}}
      
+  
      {{_i}}Overview and examples{{/i}}
      
   
      {{_i}}Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.{{/i}}
      
-  
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-  
      
-
-  
      {{_i}}Example markup{{/i}}
      
-  
      {{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}
      
+  
      
+    
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+    
      
+  
      {{! /example }}
 
       <div class="btn-group">
   <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
@@ -214,184 +210,132 @@
 
   
      {{_i}}Works with all button sizes{{/i}}
      
   
      {{_i}}Button dropdowns work at any size. your button sizes to .btn-large, .btn-small, or .btn-mini.{{/i}}
      
-  
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-    
      
-      
-      
-    
      
-  
      
+  
      
+    
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+      
      
+        
+        
+      
      
+    
      
+  
      {{! /example }}
 
   
      {{_i}}Requires javascript{{/i}}
      
   
      {{_i}}Button dropdowns require the Bootstrap dropdown plugin to function.{{/i}}
      
   
      {{_i}}In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}
      
 
-  
      
+
+  
      
+
 
   
      {{_i}}Split button dropdowns{{/i}}
      
-
-  
      {{_i}}Overview and examples{{/i}}
      
   
      {{_i}}Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.{{/i}}
      
-  
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      {{_i}}Sizes{{/i}}
      
-  
      {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-  
      
-    
      
-      
-      
-      
-    
      
-  
      
-
      -<div class="btn-group">
-  ...
-  <ul class="dropdown-menu pull-right">
-    <!-- {{_i}}dropdown menu links{{/i}} -->
-  </ul>
-</div>
-
      
-
-  
      {{_i}}Example markup{{/i}}
      
-  
      {{_i}}We expand on the normal button dropdowns to provide a second button action that operates as a separate dropdown trigger.{{/i}}
      
+  
      
+    
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+    
      
+  
      {{! /example }}
 
       <div class="btn-group">
   <button class="btn">{{_i}}Action{{/i}}</button>
@@ -403,32 +347,90 @@
   </ul>
 </div>
 
      
+
+  
      {{_i}}Sizes{{/i}}
      
+  
      {{_i}}Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.{{/i}}
      
+  
      
+    
      
+      
      
+        
+        
+        
+      
      
+    
      
+    
      
+      
      
+        
+        
+        
+      
      
+    
      
+    
      
+      
      
+        
+        
+        
+      
      
+    
      
+  
      {{! /example }}
+
      +<div class="btn-group">
+  <button class="btn btn-mini">{{_i}}Action{{/i}}</button>
+  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- {{_i}}dropdown menu links{{/i}} -->
+  </ul>
+</div>
+
      
+
   
      {{_i}}Dropup menus{{/i}}
      
   
      {{_i}}Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.{{/i}}
      
-  
      
-    
      
-      
-      
-      
-    
      
-    
      
-      
-      
-      
-    
      
-  
      
+  
      
+    
      
+      
      
+        
+        
+        
+      
      
+      
      
+        
+        
+        
+      
      
+    
      
+  
      {{! /example }}
 
       <div class="btn-group dropup">
   <button class="btn">{{_i}}Dropup{{/i}}</button>

From a0cd886c56708bbd8d6896ee81b04579f86fb0aa Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 10 Jun 2012 21:24:13 -0700
Subject: [PATCH 20/20] rewrite the rest of the nav section

---
 docs/assets/css/docs.css                 |   3 +-
 docs/components.html                     | 386 ++++++++++++-----------
 docs/templates/pages/components.mustache | 386 ++++++++++++-----------
 3 files changed, 404 insertions(+), 371 deletions(-)

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