Thumbnails Grids of images, videos, text, and more

- -

@@ -1944,75 +1954,22 @@

- - +

+ - -

Why use thumbnails

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

- -

Simple, flexible markup

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

- -

Uses grid column sizes

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

- -

Markup

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

-<ul class="thumbnails">
-  <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/300x200" alt="">
-    </a>
-  </li>
-  ...
-</ul>
-

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

-<ul class="thumbnails">
-  <li class="span4">
+<div class="row">
+  <div class="span4">
     <div class="thumbnail">
       <img src="http://placehold.it/300x200" alt="">
       <h3>Thumbnail label</h3>
       <p>Thumbnail caption...</p>
     </div>
-  </li>
+  </div>
   ...
-</ul>
+</div>

More examples

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

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

- @@ -2144,7 +2101,7 @@

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

Uses a gradient to create a striped effect. Not available in IE8.

@@ -2259,7 +2216,7 @@

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.

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

-- cgit v1.2.3 From c59e5251e12a57b5f305b4996d6f164b71c7f22c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 25 Sep 2012 22:48:02 -0700 Subject: initial pass at removing navbar-inner from .navbar component --- docs/components.html | 382 ++++++++++++++++++++++++--------------------------- 1 file changed, 178 insertions(+), 204 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 6422c1611..53c416d55 100644 --- a/docs/components.html +++ b/docs/components.html @@ -32,39 +32,37 @@

- - Bootstrap -

- Home -
- Get started -
- Scaffolding -
- Base CSS -
- Components -
- JavaScript -
- Customize -

+ + Bootstrap +

+ Home +
+ Get started +
+ Scaffolding +
+ Base CSS +
+ Components +
+ JavaScript +
+ Customize +

@@ -1031,26 +1029,22 @@

To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.

 <div class="navbar">
-  <div class="navbar-inner">
-    <a class="brand" href="#">Title</a>
-    <ul class="nav">
-      <li class="active"><a href="#">Home</a></li>
-      <li><a href="#">Link</a></li>
-      <li><a href="#">Link</a></li>
-    </ul>
-  </div>
+  <a class="brand" href="#">Title</a>
+  <ul class="nav">
+    <li class="active"><a href="#">Home</a></li>
+    <li><a href="#">Link</a></li>
+    <li><a href="#">Link</a></li>
+  </ul>
 </div>

@@ -1064,9 +1058,7 @@

A simple link to show your brand or project name only requires an anchor tag.

@@ -1077,13 +1069,11 @@
           Nav items are simple to add via unordered lists.
           
             
-              
-                
-                  Home
-                  Link
-                  Link
-                
-              
+              
+                Home
+                Link
+                Link
+              
             
           
 @@ -1122,12 +1112,10 @@
           To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.
           
             
-              
-                
-                  
-                  
-                
-              
+              
+                
+                
+              
             
           
 @@ -1141,11 +1129,9 @@
           For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.
           
             
-              
-                
-                  
-                
-              
+              
+                
+              
             
           
 @@ -1188,15 +1174,13 @@
           Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
           
             
-              
-                
-                  Title
-                  
-                    Home
-                    Link
-                    Link
-                  
-                
+              
+                Title
+                
+                  Home
+                  Link
+                  Link
+                
               
             
           
@@ -1210,15 +1194,13 @@
           Add .navbar-fixed-bottom instead.
           
             
-              
-                
-                  Title
-                  
-                    Home
-                    Link
-                    Link
-                  
-                
+              
+                Title
+                
+                  Home
+                  Link
+                  Link
+                
               
             
           
@@ -1232,15 +1214,13 @@
           Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.
           
             
-              
-                
-                  Title
-                  
-                    Home
-                    Link
-                    Link
-                  
-                
+              
+                Title
+                
+                  Home
+                  Link
+                  Link
+                
               
             
           
@@ -1258,75 +1238,71 @@
           To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
           
             
-              
-                
-                  
-                    
-                    
-                    
-                  
-                  Title
-                  
-                    
-                      Home
-                      Link
-                      Link
-                      
-                        Dropdown 
-                        
-                          Action
-                          Another action
-                          Something else here
-                          
-                          Nav header
-                          Separated link
-                          One more separated link
-                        
-                      
-                    
-                    
-                      
-                    
-                    
-                      Link
-                      
-                      
-                        Dropdown 
-                        
-                          Action
-                          Another action
-                          Something else here
-                          
-                          Separated link
-                        
-                      
-                    
-                  

-                
-              

+              
+                
+                  
+                  
+                  
+                
+                Title
+                
+                  
+                    Home
+                    Link
+                    Link
+                    
+                      Dropdown 
+                      
+                        Action
+                        Another action
+                        Something else here
+                        
+                        Nav header
+                        Separated link
+                        One more separated link
+                      
+                    
+                  
+                  
+                    
+                  
+                  
+                    Link
+                    
+                    
+                      Dropdown 
+                      
+                        Action
+                        Another action
+                        Something else here
+                        
+                        Separated link
+                      
+                    
+                  
+                

+              
             

           
  <div class="navbar">
-  <div class="navbar-inner">
-    <div class="container">
-
-      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
-      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </a>
+  <div class="container">
 
-      <!-- Be sure to leave the brand out there if you want it shown -->
-      <a class="brand" href="#">Project name</a>
+    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
+    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </a>
 
-      <!-- Everything you want hidden at 940px or less, place within here -->
-      <div class="nav-collapse collapse">
-        <!-- .nav, .navbar-search, .navbar-form, etc -->
-      </div>
+    <!-- Be sure to leave the brand out there if you want it shown -->
+    <a class="brand" href="#">Project name</a>
 
+    <!-- Everything you want hidden at 940px or less, place within here -->
+    <div class="nav-collapse collapse">
+      <!-- .nav, .navbar-search, .navbar-form, etc -->
     </div>
+
   </div>
 </div>
 
@@ -1342,52 +1318,50 @@
           Modify the look of the navbar by adding .navbar-inverse.
           
             
-              
-                
-                  
-                    
-                    
-                    
-                  
-                  Title
-                  
-                    
-                      Home
-                      Link
-                      Link
-                      
-                        Dropdown 
-                        
-                          Action
-                          Another action
-                          Something else here
-                          
-                          Nav header
-                          Separated link
-                          One more separated link
-                        
-                      
-                    
-                    
-                      
-                    
-                    
-                      Link
-                      
-                      
-                        Dropdown 
-                        
-                          Action
-                          Another action
-                          Something else here
-                          
-                          Separated link
-                        
-                      
-                    
-                  

-                
-              

+              
+                
+                  
+                  
+                  
+                
+                Title
+                
+                  
+                    Home
+                    Link
+                    Link
+                    
+                      Dropdown 
+                      
+                        Action
+                        Another action
+                        Something else here
+                        
+                        Nav header
+                        Separated link
+                        One more separated link
+                      
+                    
+                  
+                  
+                    
+                  
+                  
+                    Link
+                    
+                    
+                      Dropdown 
+                      
+                        Action
+                        Another action
+                        Something else here
+                        
+                        Separated link
+                      
+                    
+                  
+                

+              
             

           
 -- 
cgit v1.2.3


From ecbf1159a43643a5b4eabbe035b6c7aabb8dde5d Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 25 Sep 2012 22:57:20 -0700
Subject: remove .dividers from breadcrumbs, instead use :after and content

---
 docs/components.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 53c416d55..7808d0477 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1388,19 +1388,19 @@
               Home
             
             
-              Home /
+              Home
               Library
             
             
-              Home /
-              Library /
+              Home
+              Library
               Data
             
           
  <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></li>
+  <li><a href="#">Library</a></li>
   <li class="active">Data</li>
 </ul>
 
-- 
cgit v1.2.3


From 26386ad615a48be02d896a41b7c72a7470c8a9c3 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 1 Oct 2012 00:05:18 -0700
Subject: remove tabbable tabs on left, right, and bottom; instead, from here
 out use stacked pills or tabs

---
 docs/components.html | 153 ---------------------------------------------------
 1 file changed, 153 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 7808d0477..87bef8db2 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -860,159 +860,6 @@
 </ul>
 
 
-
-          
-
-
-          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.
-
-          Tabbable example
-          To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.
-          
-            
-              
-                Section 1
-                Section 2
-                Section 3
-              
-              
-                
-                  I'm in Section 1.
-                
-                
-                  Howdy, I'm in Section 2.
-                
-                
-                  What up girl, this is Section 3.
-                
-              
-            
 
-          
--<div class="tabbable"> <!-- Only required for left/right tabs -->
-  <ul class="nav nav-tabs">
-    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
-    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
-  </ul>
-  <div class="tab-content">
-    <div class="tab-pane active" id="tab1">
-      <p>I'm in Section 1.</p>
-    </div>
-    <div class="tab-pane" id="tab2">
-      <p>Howdy, I'm in Section 2.</p>
-    </div>
-  </div>
-</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.
-                
-                
-                  Howdy, I'm in Section B.
-                
-                
-                  What up girl, this is Section C.
-                
-              
-              
-                Section 1
-                Section 2
-                Section 3
-              
-            
 
-          
--<div class="tabbable tabs-below">
-  <div class="tab-content">
-    ...
-  </div>
-  <ul class="nav nav-tabs">
-    ...
-  </ul>
-</div>
-
-
-          Tabs on the left
-          Swap the class to put tabs on the left.
-          
-            
-              
-                Section 1
-                Section 2
-                Section 3
-              
-              
-                
-                  I'm in Section A.
-                
-                
-                  Howdy, I'm in Section B.
-                
-                
-                  What up girl, this is Section C.
-                
-              
-            
 
-          
--<div class="tabbable tabs-left">
-  <ul class="nav nav-tabs">
-    ...
-  </ul>
-  <div class="tab-content">
-    ...
-  </div>
-</div>
-
-
-          Tabs on the right
-          Swap the class to put tabs on the right.
-          
-            
-              
-                Section 1
-                Section 2
-                Section 3
-              
-              
-                
-                  I'm in Section A.
-                
-                
-                  Howdy, I'm in Section B.
-                
-                
-                  What up girl, this is Section C.
-                
-              
-            
 
-          
--<div class="tabbable tabs-right">
-  <ul class="nav nav-tabs">
-    ...
-  </ul>
-  <div class="tab-content">
-    ...
-  </div>
-</div>
-
-
         
 
 
-- 
cgit v1.2.3


From eb555b7a9d3924d6caba3a10c7f9cdd0e9afd38a Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 1 Oct 2012 00:06:44 -0700
Subject: remove .nav-list, instead use .nav-stacked on .nav-tabs or .nav-pills
 from now on

---
 docs/components.html | 57 +++++++++-------------------------------------------
 1 file changed, 10 insertions(+), 47 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 87bef8db2..1395e7a2f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -740,6 +740,16 @@
 </ul>
 
 
+          Horizontal dividers
+          Add a horizontal divider by creating an empty list item with the class .divider, like so:
++<ul class="nav nav-tabs nav-stacked">
+  ...
+  <li class="divider"></li>
+  ...
+</ul>
+
+
 
           
 
@@ -813,53 +823,6 @@
 </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":
-          
-            
-              
-                List header
-                Home
-                Library
-                Applications
-                Another list header
-                Profile
-                Settings
-                
-                Help
-              
-            
 
-          
--<ul class="nav nav-list">
-  <li class="nav-header">List header</li>
-  <li class="active"><a href="#">Home</a></li>
-  <li><a href="#">Library</a></li>
-  ...
-</ul>
-
-          
-            Note
-            For nesting within a nav list, include class="nav nav-list" on any nested <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>
-
-
         
 
 
-- 
cgit v1.2.3


From c0eacca0dbf9fec606968e08e1b21f8ec80e67ef Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 3 Nov 2012 16:14:44 -0700
Subject: Navs refactor, restoring .nav-list

---
 docs/components.html | 82 ++++++++++++++++++++++------------------------------
 1 file changed, 35 insertions(+), 47 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 969bd0eeb..e59351782 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -668,18 +668,17 @@
 
 
 
-        
         
           
-            Nav: tabs, pills, and lists
+            Navs
           
 
-          Lightweight defaults Same markup, different classes
-          All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.
+          Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.
 
-          Basic tabs
-          Take a regular <ul> of links and add .nav-tabs:
+          Tabs
+          Note the .nav-tabs class requires the .nav base class.
           
             
               Home
@@ -697,17 +696,17 @@
 </ul>

Basic pills

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

List

Swap the tabs class for .nav-list.

-<ul class="nav nav-pills">
+<ul class="nav nav-list">
   <li class="active">
     <a href="#">Home</a>
   </li>
@@ -716,50 +715,27 @@
 </ul>

Disabled state

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless you remove the href attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.

Pills

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

-<ul class="nav nav-pills">
-  ...
-  <li class="disabled"><a href="#">Home</a></li>
-  ...
-</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

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

- -

Stacked tabs

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

- -

Stacked pills

Pills are also vertically stackable. Just add .nav-stacked.

Home
Profile
Messages

Horizontal dividers

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

Options

Disabled state

-<ul class="nav nav-tabs nav-stacked">
+<ul class="nav nav-pills">
   ...
-  <li class="divider"></li>
+  <li class="disabled"><a href="#">Home</a></li>
   ...
 </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.

Date: Sat, 3 Nov 2012 16:18:02 -0700 Subject: Swap old icons for new in docs --- docs/components.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index e59351782..feec16d36 100644 --- a/docs/components.html +++ b/docs/components.html @@ -84,20 +84,20 @@

-- cgit v1.2.3 From 05a2d375594779d534a200ed112787649b67f3a2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Nov 2012 00:37:49 -0700 Subject: run make after removing responsive css file --- docs/components.html | 1 - 1 file changed, 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index feec16d36..3c47835c3 100644 --- a/docs/components.html +++ b/docs/components.html @@ -9,7 +9,6 @@ - -- cgit v1.2.3 From 83a3789b5e8ccedc16db3a284c764067e6b25c25 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 4 Nov 2012 00:52:10 -0700 Subject: add justified nav links for tabs and pills --- docs/components.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 3c47835c3..14e9041f3 100644 --- a/docs/components.html +++ b/docs/components.html @@ -748,6 +748,31 @@

Options

Justified links

Easily make tabs or pills equal widths of their parent with .nav-justified.

+
+

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

Disabled state

-- cgit v1.2.3 From fa1c130552022520161a2b0c595e2ca431df0c97 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Nov 2012 09:17:11 -0800 Subject: Change important badges/labels to danger --- docs/components.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 14e9041f3..927efd26a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1552,10 +1552,10 @@ - Important + Danger - <span class="label label-important">Important</span> + <span class="label label-danger">Danger</span> @@ -1625,10 +1625,10 @@ Important - 6 + 6 - <span class="badge badge-important">6</span> + <span class="badge badge-danger">6</span> -- cgit v1.2.3 From ebd2215e494e77a0da3283c1006a5ac164b8e862 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Nov 2012 16:31:24 -0800 Subject: remove deleted css files, run make --- docs/components.html | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 1c55ee79e..df792273a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -47,10 +47,7 @@ Get started

- Scaffolding -

- Base CSS + Core CSS

Components -- cgit v1.2.3 From dd11d0a3fa4ba061f6dcb8db81f144d81101e052 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 1 Dec 2012 13:47:07 -0800 Subject: move around social buttons --- docs/components.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index df792273a..9323709b7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2312,6 +2312,25 @@ class="clearfix" ================================================== -->

-- cgit v1.2.3 From 2011a0d50f717c95b706e10ac5e9e0f964c972a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 21:29:57 -0800 Subject: Drop labels from the docs --- docs/components.html | 72 +++++----------------------------------------------- 1 file changed, 6 insertions(+), 66 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 990f31ae6..873bff63d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -90,7 +90,7 @@

@@ -327,7 +327,7 @@

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.

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.

Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

@@ -1511,73 +1511,13 @@ - -

Labels

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

Labels	Markup
- Default -	- `<span class="label">Default</span>` -
- Success -	- `<span class="label label-success">Success</span>` -
- Warning -	- `<span class="label label-warning">Warning</span>` -
- Danger -	- `<span class="label label-danger">Danger</span>` -
- Info -	- `<span class="label label-info">Info</span>` -
- Inverse -	- `<span class="label label-inverse">Inverse</span>` -

Badges

@@ -1657,7 +1597,7 @@

Easily collapsible

For easy implementation, labels and badges will simply collapse (via CSS's :empty selector) when no content exists within.

For easy implementation, badges will simply collapse (via CSS's :empty selector) when no content exists within.

-- cgit v1.2.3 From b6945a21682042948543fd6809976d06ad234384 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 19 Dec 2012 21:37:16 -0800 Subject: Rename .hero-unit to .jumbotron becaue fuck dashes in filenames and sports metaphors are cooler than ad ones --- docs/components.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 873bff63d..3c070e2e4 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1610,17 +1610,17 @@

Typographic components

Hero unit

Jumbotron

A lightweight, flexible component to showcase key 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.

-<div class="hero-unit">
+<div class="jumbotron">
   <h1>Heading</h1>
   <p>Tagline</p>
   <p>
-- 
cgit v1.2.3


From 65edc9cd6e453a7bf30ccbd6a57b3ea340e21907 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 19 Dec 2012 21:42:36 -0800
Subject: Change .jumbotron usage in docs layout to .bs-docs-jumbotron

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 3c070e2e4..b603c3ab8 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -68,7 +68,7 @@
 
 
-
+
   
     Components
     Dozens of reusable components built to provide navigation, alerts, popovers, and more.
-- 
cgit v1.2.3


From 4e54e7bb358b3cc4ad5c228c76aa13c7ce94fe75 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 20 Dec 2012 00:27:46 -0800
Subject: Remove dropdown submenu docs

---
 docs/components.html | 84 ----------------------------------------------------
 1 file changed, 84 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index b603c3ab8..0f375ebfa 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -159,90 +159,6 @@
   ...
 </ul>

- -

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

- -

Default

- -

Dropup

- -

Left submenu

- -

-<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
-  ...
-  <li class="dropdown-submenu">
-    <a tabindex="-1" href="#">More options</a>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </li>
-</ul>
-

- -- cgit v1.2.3 From 7c04d573d0a08a365f3350c9d52d7cc870f702be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 20 Dec 2012 21:44:45 -0800 Subject: update docs regarding normalize and clearfix --- docs/components.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 0f375ebfa..ac9dc91ce 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2138,17 +2138,16 @@ class="muted"

.clearfix

Clear the float on any element

Clear the float on any element.

 class="clearfix"

 .clearfix {
-  *zoom: 1;
   &:before,
   &:after {
+    content: " ";
     display: table;
-    content: "";
   }
   &:after {
     clear: both;
-- 
cgit v1.2.3


From c11f41ba04791a0c408071527994dfb22c91a436 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 21 Dec 2012 00:50:28 -0800
Subject: flatten buttons and forms

---
 docs/components.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index ac9dc91ce..4f49688f5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -223,10 +223,10 @@
           Make a set of buttons appear vertically stacked rather than horizontally.
           
             
-              
-              
-              
-              
+              
+              
+              
+              
             
           
 -- 
cgit v1.2.3


From d206ec16595a022f10955eb025fd5756512399a8 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 24 Dec 2012 02:06:28 -0800
Subject: Remove .badge-info and .badge-inverse; change docs label of
 .badge-important to .badge-danger

---
 docs/components.html | 24 +-----------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index ac9dc91ce..b870c1f3f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1478,7 +1478,7 @@
               
               
                 
-                  Important
+                  Danger
                 
                 
                   6
@@ -1487,28 +1487,6 @@
                   <span class="badge badge-danger">6</span>
                 
               
-              
-                
-                  Info
-                
-                
-                  8
-                
-                
-                  <span class="badge badge-info">8</span>
-                
-              
-              
-                
-                  Inverse
-                
-                
-                  10
-                
-                
-                  <span class="badge badge-inverse">10</span>
-                
-              
             
           
 
-- 
cgit v1.2.3


From c063f7c9c26abad3d9ac605d70b60d86e4d79343 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 24 Dec 2012 02:08:45 -0800
Subject: Update docs to reflect latest on .clearfix

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index b870c1f3f..e528837da 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -2116,7 +2116,7 @@ class="muted"
 
 
           .clearfix
-          Clear the float on any element.
+          Clear the float on any element. Utilizes the micro clearfix as popularized by Nicollas Gallagher.
  class="clearfix"
 
-- 
cgit v1.2.3


From 3d04d9ba751c08ab7909ee6146719171609d5cf9 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 28 Dec 2012 19:24:13 -0600
Subject: Super lame typo on my part, sorry @necolas :)

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index e528837da..a8a71842f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -2116,7 +2116,7 @@ class="muted"

.clearfix

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicollas Gallagher.

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

 class="clearfix"

-- cgit v1.2.3 From a7231854c91399aafb371ccdf2b930037a7ac5ed Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jan 2013 00:33:12 -0800 Subject: Address #6459 and add mention of disabled links in dropdowns to le docs --- docs/components.html | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 751418816..bbb0dc39d 100644 --- a/docs/components.html +++ b/docs/components.html @@ -161,6 +161,25 @@ <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel"> ... </ul> + + +

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

+ +

+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+  <li><a tabindex="-1" href="#">Regular link</a></li>
+  <li><a tabindex="-1" href="#">Disabled link</a></li>
+  <li><a tabindex="-1" href="#">Another link</a></li>
+</ul>

Sub menus on dropdowns

-- cgit v1.2.3 From 7a3f078fb487323246ccf64460b7efaf7d478afc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jan 2013 13:15:19 -0800 Subject: Remove parent div from pagination component * No more div.pagination; it's now just ul.pagination * No more .pagination-right or .pagination-centered * Sizes remain * Any further customization, such as alignment, should be done on the individual application or site level. --- docs/components.html | 171 +++++++++++++++++---------------------------------- 1 file changed, 57 insertions(+), 114 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index a8a71842f..8811a7e5e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1189,29 +1189,25 @@

Standard pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

-<div class="pagination">
-  <ul>
-    <li><a href="#">Prev</a></li>
-    <li><a href="#">1</a></li>
-    <li><a href="#">2</a></li>
-    <li><a href="#">3</a></li>
-    <li><a href="#">4</a></li>
-    <li><a href="#">Next</a></li>
-  </ul>
-</div>
+<ul class="pagination">
+  <li><a href="#">Prev</a></li>
+  <li><a href="#">1</a></li>
+  <li><a href="#">2</a></li>
+  <li><a href="#">3</a></li>
+  <li><a href="#">4</a></li>
+  <li><a href="#">Next</a></li>
+</ul>

@@ -1223,43 +1219,37 @@

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

-<div class="pagination">
-  <ul>
-    <li class="disabled"><a href="#">Prev</a></li>
-    <li class="active"><a href="#">1</a></li>
-    ...
-  </ul>
-</div>
+            
+              «
+              1
+              2
+              3
+              4
+              5
+              »
+           
+

+<ul class="pagination">
+  <li class="disabled"><a href="#">Prev</a></li>
+  <li class="active"><a href="#">1</a></li>
+  ...
+</ul>

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

-<div class="pagination">
-  <ul>
-    <li class="disabled"><span>Prev</span></li>
-    <li class="active"><span>1</span></li>
-    ...
-  </ul>
-</div>
+<ul class="pagination">
+  <li class="disabled"><span>Prev</span></li>
+  <li class="active"><span>1</span></li>
+  ...
+</ul>

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

-<div class="pagination pagination-large">
-  <ul>
-    ...
-  </ul>
-</div>
-<div class="pagination">
-  <ul>
-    ...
-  </ul>
-</div>
-<div class="pagination pagination-small">
-  <ul>
-    ...
-  </ul>
-</div>
-<div class="pagination pagination-mini">
-  <ul>
-    ...
-  </ul>
-</div>
-

Alignment

Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.

-<div class="pagination pagination-centered">
-  ...
-</div>
-

-<div class="pagination pagination-right">
+<ul class="pagination pagination-large">
   ...
-</div>
+</ul>
+<ul class="pagination">
+  ...
+</ul>
+<ul class="pagination pagination-small">
+  ...
+</ul>
+<ul class="pagination pagination-mini">
+  ...
+</ul>

-- cgit v1.2.3 From 583fc4b962f5d36a7a3bbe8707535558fd2dd229 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 12 Jan 2013 18:52:06 -0800 Subject: buttons and button group flattening improvements --- docs/components.html | 42 ------------------------------------------ 1 file changed, 42 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 20ac32133..c0dfd6cc7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -310,26 +310,6 @@

Separated link

- - -

@@ -448,28 +428,6 @@
                   Separated link

- - - -

-- 
cgit v1.2.3


From f9ee99cf6febd0b59ee95aa1866a3c1eb5c61320 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Mon, 14 Jan 2013 00:11:55 -0800
Subject: Upgrade to newest HTML5 shiv, and make it a local dependency rather
 than CDNing

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index bbb0dc39d..7a670998d 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -15,7 +15,7 @@
 
     
     
 
     
-- 
cgit v1.2.3


From 60bb95e611b6a096e5d50263e278b4be92e7468f Mon Sep 17 00:00:00 2001
From: Yohn 
Date: Wed, 16 Jan 2013 07:45:31 -0500
Subject: adding class to example code

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 7a670998d..e8b74cf82 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -177,7 +177,7 @@
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
   <li><a tabindex="-1" href="#">Regular link</a></li>
-  <li><a tabindex="-1" href="#">Disabled link</a></li>
+  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
   <li><a tabindex="-1" href="#">Another link</a></li>
 </ul>
 
-- 
cgit v1.2.3


From 9ba14cfb7c0daa75453fd226d09198ffec142b1b Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 16 Jan 2013 16:14:41 -0800
Subject: More navbar derping

---
 docs/components.html | 21 +++------------------
 1 file changed, 3 insertions(+), 18 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 17ea3a0d4..c1049747c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -859,31 +859,16 @@
           
             
               
-                
+                
                 
               
             
           
 -<form class="navbar-form pull-left">
-  <input type="text" class="span2">
+<form class="pull-left">
+  <input type="text" style="width: 200px;">
   <button type="submit" class="btn">Submit</button>
 </form>
-
-
-          Search form
-          For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.
-          
-            
-              
-                
-              
-            
-          
--<form class="navbar-search pull-left">
-  <input type="text" class="search-query" placeholder="Search">
-</form>
 
 
           Component alignment
-- 
cgit v1.2.3


From 7e46b6f6364d754cb87fca35e0897cf2fad09206 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 00:58:34 -0800
Subject: Update nav and add bounds for tablet container

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index c1049747c..73261610c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -47,7 +47,7 @@
               Get started
             
             
-              Core CSS
+              CSS
             
             
               Components
-- 
cgit v1.2.3


From 7c23d889bb89fa7dc5ea17347a6b3a44c01f652d Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 12:13:37 -0800
Subject: Change subheading of alerts page

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 73261610c..22894dd4f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1549,7 +1549,7 @@
         ================================================== -->
         
           
-            Alerts Styles for success, warning, and error messages
+            Alerts Styles for contextual feedback messages
           
 
           Default alert
-- 
cgit v1.2.3


From 5c76518f7d4eb5e71ce3e196a1bc98496d3cc80c Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 14:00:03 -0800
Subject: Add respond.js to main docs pages, but only for IE8 and down

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 22894dd4f..f52cfc844 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -15,6 +15,7 @@
     
     
 
     
@@ -2112,6 +2113,5 @@ class="clearfix"
     
 
 
-
   
 
-- 
cgit v1.2.3


From f6226c9b91c38afc7d5050a3cfd7217edef7fc16 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 14:49:52 -0800
Subject: Update Getting Started page to include mention of Respond

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index f52cfc844..76035431a 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -12,7 +12,7 @@
     
     
 
-    
+    
     
     
 
     
-- 
cgit v1.2.3


From fd89531f6ae7c2ec9fdaf32f2a8ced34875571e6 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 20:26:17 -0800
Subject: Update commenting and structure of layout.mustache

---
 docs/components.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 4293454b2..d946a937e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -7,18 +7,20 @@
     
     
 
-    
+    
     
+
+    
     
     
 
-    
+    
     
 
-    
+    
     
     
       
@@ -2062,10 +2064,9 @@ class="clearfix"
 
 
 
-    
     
-    
     
     
     
@@ -2081,6 +2082,7 @@ class="clearfix"
     
     
 
+    
     
     
 
-- 
cgit v1.2.3


From 1b128b34310898382e1af54abbf6be3ec6e55361 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 17 Jan 2013 20:28:05 -0800
Subject: comment tweaks and updating starter template

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index d946a937e..1c98fdd46 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -2064,7 +2064,7 @@ class="clearfix"
 
 
 
-    
     
     
-- 
cgit v1.2.3


From 665de0455cb433c9e3c3b6d6ad72318b46098650 Mon Sep 17 00:00:00 2001
From: Vickash Mahabir 
Date: Fri, 18 Jan 2013 17:35:23 -0400
Subject: Change .badge to .counter, make appearance more OSX-ish, and remove
 colors

---
 docs/components.html | 47 +++++++----------------------------------------
 1 file changed, 7 insertions(+), 40 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 76590a1ca..d432dda58 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -91,7 +91,7 @@
            Navbar
            Breadcrumbs
            Pagination
-           Badges
+           Counters
            Typography
            Thumbnails
            Alerts
@@ -1333,11 +1333,11 @@
 
 
 
-        
-        
+        
           
-            Badges
+            Counters
           
 
           
@@ -1354,50 +1354,17 @@
                   Default
                 
-              
-              
-                
-                
-                
-              
-              
-                
-                
-                
-              
-              
-                
-                
-                
                 
-                  1
+                  42
                 
                 
-                  <span class="badge">1</span>
-                

-                  Success
-                
-                  2
-                
-                  <span class="badge badge-success">2</span>
-                

-                  Warning
-                
-                  4
-                
-                  <span class="badge badge-warning">4</span>
-                

-                  Danger
-                
-                  6
-                
-                  <span class="badge badge-danger">6</span>
+                  <span class="counter">42</span>
                 
               
             
           
 
           Easily collapsible
-          For easy implementation, badges will simply collapse (via CSS's :empty selector) when no content exists within.
+          For easy implementation, counters will simply collapse (via CSS's :empty selector) when no content exists within.
 
         
 
-- 
cgit v1.2.3


From 964cb773838379319903bcf4b678addc07a55e98 Mon Sep 17 00:00:00 2001
From: Vickash Mahabir 
Date: Fri, 18 Jan 2013 17:50:58 -0400
Subject: Make the counter example more meaningful

---
 docs/components.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index d432dda58..2040029a3 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1354,7 +1354,7 @@
                   Default
                 
                 
-                  42
+                  Inbox 42
                 
                 
                   <span class="counter">42</span>
-- 
cgit v1.2.3


From 67ec13a44c945c61735882ce7e78174ea9e32d74 Mon Sep 17 00:00:00 2001
From: Vickash Mahabir 
Date: Fri, 18 Jan 2013 18:03:43 -0400
Subject: Counters example doesn't need to be a table

---
 docs/components.html | 28 ++++++----------------------
 1 file changed, 6 insertions(+), 22 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 2040029a3..eeb104168 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1340,29 +1340,13 @@
             Counters
           
 
-          
-            
-              
-                
-                
-                
-              
-            
-            
-              
-                
-                
-                
-              
-            
-          Name Example Markup

-                  Default
-                
-                  Inbox 42
-                
-                  <span class="counter">42</span>
-                
+          
+            Inbox 42
+          
 
++<a href="#">Inbox</a> <span class="counter">42</span>
+
           Easily collapsible
           For easy implementation, counters will simply collapse (via CSS's :empty selector) when no content exists within.
 
-- 
cgit v1.2.3


From d30f47efb2580b0f435128940b48d5e5d30ca529 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sat, 19 Jan 2013 18:53:41 -0800
Subject: Tighten up badges docs; less bottom margin on h3

---
 docs/components.html | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 6710e8338..b88e54b88 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1342,13 +1342,49 @@
             Counters
           
 
+          Basic usage
+          Counters are used to indicator unread or new items. Add a <span class="counter"> to links, Bootstrap navs, and more.
           
             Inbox 42
           
-
  <a href="#">Inbox</a> <span class="counter">42</span>
 
+
+          Built-in styles are included for placing counters in active states in pill and list navigations.
+          
+            
+              Home 42
+              Profile
+              Messages 3
+            
+            

+            
+              
+                
+                  42
+                  Home
+                
+              
+              Profile
+              
+                
+                  3
+                  Messages
+                
+              
+            
+          
++<ul class="nav nav-list">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">...</a></li>
+  <li><a href="#">...</a></li>
+</ul>
+
+
           Easily collapsible
           For easy implementation, counters will simply collapse (via CSS's :empty selector) when no content exists within.
 
-- 
cgit v1.2.3


From f20c3368e41cb654dfcb568968b171c45de22127 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Wed, 30 Jan 2013 17:42:03 -0800
Subject: Update pagination example HTML to match examples

---
 docs/components.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index e8b74cf82..849d1f9c3 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1515,6 +1515,7 @@
     <li><a href="#">2</a></li>
     <li><a href="#">3</a></li>
     <li><a href="#">4</a></li>
+    <li><a href="#">5</a></li>
     <li><a href="#">Next</a></li>
   </ul>
 </div>
@@ -1544,7 +1545,7 @@
  <div class="pagination">
   <ul>
-    <li class="disabled"><a href="#">Prev</a></li>
+    <li class="disabled"><a href="#">&laquo;</a></li>
     <li class="active"><a href="#">1</a></li>
     ...
   </ul>
@@ -1554,7 +1555,7 @@
  <div class="pagination">
   <ul>
-    <li class="disabled"><span>Prev</span></li>
+    <li class="disabled"><span>&laquo;</span></li>
     <li class="active"><span>1</span></li>
     ...
   </ul>
-- 
cgit v1.2.3


From 5e5670a1b4c81bcfeaac67d6b25ca9649839097f Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Thu, 31 Jan 2013 18:00:11 -0800
Subject: Remove gallery link from navbar; add to homepage examples section
 instead

---
 docs/components.html | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index aff2088cc..a79ce01fd 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -61,9 +61,6 @@
             
               Customize
             
-            
-              Gallery
-            
           
         
       
-- 
cgit v1.2.3


From d53af49afea5af5ac2c3cf74f0f5439b58021198 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 1 Feb 2013 16:21:38 -0800
Subject: Refactor colors and progress bars

* Buttons and progress bars now make use of more semantic global @brand- colors
* Progress bars have been rewritten to reduce the number of possible selectors
* Instead of .progress .bar, it's .progress-bar for individual bars of color, ultimately making for less CSS
---
 docs/components.html | 90 ++++++++++++++++++++++++++--------------------------
 1 file changed, 45 insertions(+), 45 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index a79ce01fd..4293e43bf 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1614,7 +1614,7 @@
         ================================================== -->
         
           
-            Progress bars For loading, redirecting, or action status
+            Progress bars
           
 
           Examples and markup
@@ -1623,12 +1623,12 @@
           Default progress bar with a vertical gradient.
           
             
-              
+              
             
           
  <div class="progress">
-  <div class="bar" style="width: 60%;"></div>
+  <div class="progress-bar" style="width: 60%;"></div>
 </div>
 
 
@@ -1636,12 +1636,12 @@
           Uses a gradient to create a striped effect. Not available in IE8.
           
             
-              
+              
             
           
  <div class="progress progress-striped">
-  <div class="bar" style="width: 20%;"></div>
+  <div class="progress-bar" style="width: 20%;"></div>
 </div>
 
 
@@ -1649,12 +1649,12 @@
           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-bar" style="width: 40%;"></div>
 </div>
 
 
@@ -1662,16 +1662,16 @@
           Place multiple bars into the same .progress to stack them.
           
             
-              
-              
-              
+              
+              
+              
             
           
  <div class="progress">
-  <div class="bar bar-success" style="width: 35%;"></div>
-  <div class="bar bar-warning" style="width: 20%;"></div>
-  <div class="bar bar-danger" style="width: 10%;"></div>
+  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
+  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
+  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
 </div>
 
 
@@ -1684,62 +1684,62 @@
           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 class="progress">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
 </div>
-<div class="progress progress-success">
-  <div class="bar" style="width: 40%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
 </div>
-<div class="progress progress-warning">
-  <div class="bar" style="width: 60%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
 </div>
-<div class="progress progress-danger">
-  <div class="bar" style="width: 80%"></div>
+<div class="progress">
+  <div class="progress-bar progress-bar-danger" 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 class="progress progress-striped">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
 </div>
-<div class="progress progress-success progress-striped">
-  <div class="bar" style="width: 40%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
 </div>
-<div class="progress progress-warning progress-striped">
-  <div class="bar" style="width: 60%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
 </div>
-<div class="progress progress-danger progress-striped">
-  <div class="bar" style="width: 80%"></div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
 </div>
 
 
-- 
cgit v1.2.3


From 94e256c0162748dcddd6401d57a186576254f884 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Fri, 1 Feb 2013 22:56:09 -0800
Subject: Refactor navbar dividers

* Instead of .divider-vertical, use .divider
* Makes use of .nav-divider mixin
* Dividers are horizontal to start, matching the default state of navbar nav links
* Dividers become vertical above 768px via media queries
---
 docs/components.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 4293e43bf..ade79e7b5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -831,17 +831,17 @@
   <li><a href="#">Link</a></li>
 </ul>
 
-          You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
+          You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <li> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.
           
             
               
                 
                   Home
-                  
+                  
                   Link
-                  
+                  
                   Link
-                  
+                  
                 
               
             
@@ -849,7 +849,7 @@
  <ul class="nav">
   ...
-  <li class="divider-vertical"></li>
+  <li class="divider"></li>
   ...
 </ul>
 
@@ -999,7 +999,7 @@
                   
                   
                     Link
-                    
+                    
                     
                       Dropdown 
                       
@@ -1080,7 +1080,7 @@
                   
                   
                     Link
-                    
+                    
                     
                       Dropdown 
                       
-- 
cgit v1.2.3


From c09b994eea35da794b1905bf0a56485aeb28158a Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 5 Feb 2013 00:30:03 -0800
Subject: Add justified button groups for link buttons; reorganize dropdowns
 and button groups docs sections

---
 docs/components.html | 48 +++++++++++++++++++-----------------------------
 1 file changed, 19 insertions(+), 29 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index ade79e7b5..49db6f6bb 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -109,9 +109,10 @@
           
             Dropdown menus
           
+          Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
 
-          Example
-          Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.
+          Example
+          Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.
           
             
               
@@ -124,22 +125,9 @@
             
           
 -<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-  <li><a tabindex="-1" href="#">Action</a></li>
-  <li><a tabindex="-1" href="#">Another action</a></li>
-  <li><a tabindex="-1" href="#">Something else here</a></li>
-  <li class="divider"></li>
-  <li><a tabindex="-1" href="#">Separated link</a></li>
-</ul>
-
-
-          Markup
-          Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.
-
- <div class="dropdown">
   <!-- Link or button to toggle dropdown -->
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
     <li><a tabindex="-1" href="#">Action</a></li>
     <li><a tabindex="-1" href="#">Another action</a></li>
     <li><a tabindex="-1" href="#">Something else here</a></li>
@@ -149,9 +137,6 @@
 </div>
 
 
-          Options
-          Align menus to the right and add include additional levels of dropdowns.
-
           Aligning the menus
           Add .pull-right to a .dropdown-menu to right align the dropdown menu.
 @@ -190,8 +175,7 @@
             Button groups
           
 
-          Examples
-          Two basic options, along with two more specific variations.
+          Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
 
           Single button group
           Wrap a series of buttons with .btn in .btn-group.
@@ -254,15 +238,21 @@
 </div>
 
 
+          Justified button groups
+          Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.
+          
+            
+              Left
+              Right
+              Middle
+            
+          
++<div class="btn-group btn-group-justified">
+  ...
+</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.
-
-          Dropdowns in button groups
-          Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.
         
 
 
-- 
cgit v1.2.3


From 74c8a5611d64b2efd0b60774e184125ed4b5549f Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 5 Feb 2013 00:49:54 -0800
Subject: Increase margins and line-height on h3; overhaul button dropdown docs

---
 docs/components.html | 119 +++++++++++----------------------------------------
 1 file changed, 26 insertions(+), 93 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 49db6f6bb..fdc317e8c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -174,7 +174,6 @@
           
             Button groups
           
-
           Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.
 
           Single button group
@@ -263,12 +262,12 @@
           
             Button dropdown menus
           
+          Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. Requires the Bootstrap dropdown plugin.
 
-
-          Overview and examples
-          Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
+          Single or split button
+          Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.
           
-            
+            
               
                 
                 
@@ -319,68 +318,8 @@
                   Separated link
                 
               

-            

-          
--<div class="btn-group">
-  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
-    Action
-    <span class="caret"></span>
-  </a>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-
-
-          Works with all button sizes
-          Button dropdowns work at any size:  .btn-large, .btn-small, or .btn-mini.
-          
-            
-              
-                
-                
-                  Action
-                  Another action
-                  Something else here
-                  
-                  Separated link
-                
-              

-              
-                
-                
-                  Action
-                  Another action
-                  Something else here
-                  
-                  Separated link
-                
-              

-              
-                
-                
-                  Action
-                  Another action
-                  Something else here
-                  
-                  Separated link
-                
-              

-            

-          
-
-          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
-          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.
-          
             
               
                 
@@ -440,6 +379,18 @@
             

           
 +<-- Single button -->
+<div class="btn-group">
+  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+    Action
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
+<-- Split button -->
 <div class="btn-group">
   <button class="btn">Action</button>
   <button class="btn dropdown-toggle" data-toggle="dropdown">
@@ -451,13 +402,12 @@
 </div>
 
 
-          Sizes
-          Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.
+          Works with all button sizes
+          Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.
           
-            
+            
               
-                
-                
+                
                 
                   Action
                   Another action
@@ -466,11 +416,8 @@
                   Separated link
                 
               

-            

-            
               
-                
-                
+                
                 
                   Action
                   Another action
@@ -479,11 +426,8 @@
                   Separated link
                 
               

-            

-            
               
-                
-                
+                
                 
                   Action
                   Another action
@@ -494,22 +438,11 @@
               

             

           
--<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.
+          Dropup buttons
+          Trigger dropdown menus above elements by adding .dropup to the parent.
           
-            
+            
               
                 
                 
-- 
cgit v1.2.3


From 1f673b77bbe6f3a8400b901f8825edd1d4e33353 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 5 Feb 2013 00:51:19 -0800
Subject: simpler breadcrumbs docs

---
 docs/components.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index fdc317e8c..323fd8aab 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1035,9 +1035,8 @@
           
             Breadcrumbs 
           
+          Indicate the current page's location within a navigational hierarchy.
 
-          Examples
-          A single example shown as it might be displayed across multiple pages.
           
             
               Home
-- 
cgit v1.2.3


From cf78f4b010b2b30bb973cf10f36a06105abe9370 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Tue, 5 Feb 2013 00:54:48 -0800
Subject: pagination docs cleanup

---
 docs/components.html | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 323fd8aab..463c2678e 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1067,8 +1067,9 @@
         ================================================== -->
         
           
-            Pagination Two options for paging through content
+            Pagination
           
+          Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
 
           Standard pagination
           Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
@@ -1095,12 +1096,6 @@
 </ul>

Name	Example	Markup
- Default -	- Inbox 42 -	- `<span class="counter">42</span>` -

- -

- - -

Options

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

@@ -1193,11 +1188,7 @@ </ul> - -

- - -

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default example

-- cgit v1.2.3 From 2576e6d1d6fe36fdec782a44bccf0d9ab239ef2b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Feb 2013 00:59:22 -0800 Subject: reorder counters docs --- docs/components.html | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 463c2678e..46b4fde49 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1252,16 +1252,22 @@ +

Easily highlight new or unread items by adding a <span class="counter"> to links, Bootstrap navs, and more.

Basic usage

Counters are used to indicator unread or new items. Add a <span class="counter"> to links, Bootstrap navs, and more.

- Inbox 42 + Inbox 42

-<a href="#">Inbox</a> <span class="counter">42</span>
+<a href="#">
+  Inbox
+  <span class="counter">42</span>
+</a>

Self collapsing

When there are no new or unread items, counters will simply collapse (via CSS's :empty selector) provided no content exists within.

+ +

Adapts to active nav states

Built-in styles are included for placing counters in active states in pill and list navigations.

Easily collapsible

For easy implementation, counters will simply collapse (via CSS's :empty selector) when no content exists within.

Date: Tue, 5 Feb 2013 01:01:23 -0800 Subject: mo betta thumbnails docs --- docs/components.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 46b4fde49..b169164ad 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1355,8 +1355,9 @@ ================================================== -->

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default thumbnails

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

-- cgit v1.2.3 From 3949623eeee7315932f49cd13c5428241b690e9f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Feb 2013 01:07:43 -0800 Subject: simpler alerts docs --- docs/components.html | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b169164ad..2198145ec 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1454,11 +1454,12 @@ ================================================== -->

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

Default alert

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

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message. To ensure proper behavior across all devices, be sure to use <button> element with the data-dismiss="alert" data attribute.

@@ -1472,17 +1473,7 @@ </div> -

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">&times;</a>

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">&times;</button>

- -

Dismiss alerts via JavaScript

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

- - -

Options

Block alerts

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

@@ -1499,10 +1490,8 @@ </div> - -

Contextual alternatives

Add optional classes to change an alert's connotation.

-- cgit v1.2.3 From b65293dec022d88c2b1234b8385b0328547e3959 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Feb 2013 01:11:41 -0800 Subject: reorganize progress bars docs --- docs/components.html | 90 +++++++++++++++++++--------------------------------- 1 file changed, 32 insertions(+), 58 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 2198145ec..70900fc3a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1522,8 +1522,9 @@ +

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Examples and markup

Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in IE8-9 or older versions of Firefox. Internet Explorer 10 and below, as well as Opera 12, do not support animations.

Basic

Default progress bar with a vertical gradient.

@@ -1538,55 +1539,6 @@ </div> -

Striped

Uses a gradient to create a striped effect. Not available in IE8.

-<div class="progress progress-striped">
-  <div class="progress-bar" style="width: 20%;"></div>
-</div>
-

- -

Animated

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="progress-bar" style="width: 40%;"></div>
-</div>
-

- -

Stacked

Place multiple bars into the same .progress to stack them.

-<div class="progress">
-  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
-  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
-  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
-</div>
-

- - -

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

@@ -1618,8 +1570,8 @@ </div> -

Striped bars

Similar to the solid colors, we have varied striped progress bars.

Striped

Uses a gradient to create a striped effect. Not available in IE8.

@@ -1649,13 +1601,35 @@ </div> +

Animated

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="progress-bar" style="width: 40%;"></div>
+</div>
+

- - -

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Stacked

Place multiple bars into the same .progress to stack them.

+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
+  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
+  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
+</div>
+

-- cgit v1.2.3 From e4a74607b02f81e8007ac9903da1e6eddd8a5692 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 5 Feb 2013 01:12:39 -0800 Subject: simplify media docs --- docs/components.html | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 70900fc3a..d264ae91a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1644,7 +1644,7 @@

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

Default example

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

@@ -1692,11 +1692,7 @@ </div> - -

- - -

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

Date: Tue, 5 Feb 2013 22:46:45 -0800 Subject: Update link to changelog --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 849d1f9c3..7b960543b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -2589,7 +2589,7 @@ class="clearfix"

Issues

Roadmap and changelog

Changelog

-- cgit v1.2.3 From 8b9733b288a3daca0da04fe60e0b5a0ae8681362 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 12 Feb 2013 12:25:05 -0800 Subject: nuke what we don't need for jekyll --- docs/components.html | 1954 -------------------------------------------------- 1 file changed, 1954 deletions(-) delete mode 100644 docs/components.html (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html deleted file mode 100644 index e74e6d223..000000000 --- a/docs/components.html +++ /dev/null @@ -1,1954 +0,0 @@ - - - - - Components · Bootstrap - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Components

Dozens of reusable components built to provide navigation, alerts, popovers, and more.

- - -

- -

- - - - -

- -

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

- -

Example

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

- -

-<div class="dropdown">
-  <!-- Link or button to toggle dropdown -->
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-    <li><a tabindex="-1" href="#">Action</a></li>
-    <li><a tabindex="-1" href="#">Another action</a></li>
-    <li><a tabindex="-1" href="#">Something else here</a></li>
-    <li class="divider"></li>
-    <li><a tabindex="-1" href="#">Separated link</a></li>
-  </ul>
-</div>
-

- -

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

-<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
-  ...
-</ul>
-

- -

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

- -

-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-  <li><a tabindex="-1" href="#">Regular link</a></li>
-  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
-  <li><a tabindex="-1" href="#">Another link</a></li>
-</ul>
-

- - - - - -

- -

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

- -

Single button group

Wrap a series of buttons with .btn in .btn-group.

- - - -

-<div class="btn-group">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
-</div>
-

- -

Multiple button groups

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

- -

-<div class="btn-toolbar">
-  <div class="btn-group">
-    ...
-  </div>
-</div>
-

- -

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

- - - - -

-<div class="btn-group btn-group-vertical">
-  ...
-</div>
-

- -

Justified button groups

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

- Left - Right - Middle -

-<div class="btn-group btn-group-justified">
-  ...
-</div>
-

- -

- - - - -

- -

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

- -

Single or split button

Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.

- - - -

-<-- Single button -->
-<div class="btn-group">
-  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
-    Action
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-
-<-- Split button -->
-<div class="btn-group">
-  <button class="btn">Action</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-

- -

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

- -

Dropup buttons

Trigger dropdown menus above elements by adding .dropup to the parent.

- -

-<div class="btn-group dropup">
-  <button class="btn">Dropup</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-

- -

- - - - -

- - -

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

- -

Tabs

Note the .nav-tabs class requires the .nav base class.

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

- -

List

Swap the tabs class for .nav-list.

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

- -

Pills

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

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

Pills are also vertically stackable. Just add .nav-stacked.

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

- -

Options

- -

Justified links

Easily make tabs or pills equal widths of their parent with .nav-justified.

-
-

-<ul class="nav nav-tabs nav-justified">
-  ...
-</ul>
-
-<ul class="nav nav-pills nav-justified">
-  ...
-</ul>
-

- -

Disabled state

-<ul class="nav nav-pills">
-  ...
-  <li class="disabled"><a href="#">Home</a></li>
-  ...
-</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.

- - -

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">
-    <a class="dropdown-toggle"
-       data-toggle="dropdown"
-       href="#">
-        Dropdown
-        <b class="caret"></b>
-      </a>
-    <ul class="dropdown-menu">
-      <!-- links -->
-    </ul>
-  </li>
-</ul>
-

- -

Pills with dropdowns

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

- -

- - - - -

- - - -

Basic navbar

- -

-<div class="navbar">
-  <a class="brand" href="#">Title</a>
-  <ul class="nav">
-    <li class="active"><a href="#">Home</a></li>
-    <li><a href="#">Link</a></li>
-    <li><a href="#">Link</a></li>
-  </ul>
-</div>
-

- - -

Navbar components

- -

Brand

A simple link to show your brand or project name only requires an anchor tag.

- -

-<a class="brand" href="#">Project name</a>
-

- -

Nav links

Nav items are simple to add via unordered lists.

- -

-<ul class="nav">
-  <li class="active">
-    <a href="#">Home</a>
-  </li>
-  <li><a href="#">Link</a></li>
-  <li><a href="#">Link</a></li>
-</ul>
-

You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <li> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.

- -

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

- -

Forms

To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.

- -

-<form class="pull-left">
-  <input type="text" style="width: 200px;">
-  <button type="submit" class="btn">Submit</button>
-</form>
-

- -

Component alignment

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

- -

Using dropdowns

Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.

-<ul class="nav">
-  <li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-      Account
-      <b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </li>
-</ul>
-

Visit the JavaScript dropdowns documentation for more markup and information on calling dropdowns.

- -

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

- - -

Optional display variations

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

- -

Fixed to top

Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

- -

-<div class="navbar navbar-fixed-top">
-  ...
-</div>
-

- -

Fixed to bottom

Add .navbar-fixed-bottom instead.

- -

-<div class="navbar navbar-fixed-bottom">
-  ...
-</div>
-

- -

Static top navbar

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.

- -

-<div class="navbar navbar-static-top">
-  ...
-</div>
-

- - -

Responsive navbar

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

- -

-<div class="navbar">
-  <div class="container">
-
-    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
-    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-    </a>
-
-    <!-- Be sure to leave the brand out there if you want it shown -->
-    <a class="brand" href="#">Project name</a>
-
-    <!-- Everything you want hidden at 940px or less, place within here -->
-    <div class="nav-collapse collapse">
-      <!-- .nav, .navbar-search, .navbar-form, etc -->
-    </div>
-
-  </div>
-</div>
-

- Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file. -

- - -

Inverted variation

Modify the look of the navbar by adding .navbar-inverse.

- -

-<div class="navbar navbar-inverse">
-  ...
-</div>
-

- -

- - - - -

- -

Indicate the current page's location within a navigational hierarchy.

- -

- - - -

-<ul class="breadcrumb">
-  <li><a href="#">Home</a></li>
-  <li><a href="#">Library</a></li>
-  <li class="active">Data</li>
-</ul>
-

- -

- - - - -

- -

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

- -

Standard pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

-<ul class="pagination">
-  <li><a href="#">Prev</a></li>
-  <li><a href="#">1</a></li>
-  <li><a href="#">2</a></li>
-  <li><a href="#">3</a></li>
-  <li><a href="#">4</a></li>
-  <li><a href="#">5</a></li>
-  <li><a href="#">Next</a></li>
-</ul>
-

- -

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

-<ul class="pagination">
-  <li class="disabled"><a href="#">&laquo;</a></li>
-  <li class="active"><a href="#">1</a></li>
-  ...
-</ul>
-

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

-<ul class="pagination">
-  <li class="disabled"><span>&laquo;</span></li>
-  <li class="active"><span>1</span></li>
-  ...
-</ul>
-

- -

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

-<ul class="pagination pagination-large">
-  ...
-</ul>
-<ul class="pagination">
-  ...
-</ul>
-<ul class="pagination pagination-small">
-  ...
-</ul>
-<ul class="pagination pagination-mini">
-  ...
-</ul>
-

- -

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

- -

Default example

By default, the pager centers links.

- -

-<ul class="pager">
-  <li><a href="#">Previous</a></li>
-  <li><a href="#">Next</a></li>
-</ul>
-

- -

Aligned links

Alternatively, you can align each link to the sides:

- -

-<ul class="pager">
-  <li class="previous">
-    <a href="#">&larr; Older</a>
-  </li>
-  <li class="next">
-    <a href="#">Newer &rarr;</a>
-  </li>
-</ul>
-

- -

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

- -

-<ul class="pager">
-  <li class="previous disabled">
-    <a href="#">&larr; Older</a>
-  </li>
-  ...
-</ul>
-

- -

- - - - -

- -

Easily highlight new or unread items by adding a <span class="counter"> to links, Bootstrap navs, and more.

- -

- Inbox 42 -

-<a href="#">
-  Inbox
-  <span class="counter">42</span>
-</a>
-

- -

Self collapsing

When there are no new or unread items, counters will simply collapse (via CSS's :empty selector) provided no content exists within.

- -

Adapts to active nav states

Built-in styles are included for placing counters in active states in pill and list navigations.

-
-

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

- -

- - - - -

- - -

Jumbotron

A lightweight, flexible component to showcase key 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.

-<div class="jumbotron">
-  <h1>Heading</h1>
-  <p>Tagline</p>
-  <p>
-    <a class="btn btn-primary btn-large">
-      Learn more
-    </a>
-  </p>
-</div>
-

- -

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

- -

-<div class="page-header">
-  <h1>Example page header <small>Subtext for header</small></h1>
-</div>
-

- -

- - - - -

- -

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

- -

Default thumbnails

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

- -

-<div class="row">
-  <div class="span3">
-    <a href="#" class="thumbnail">
-      <img src="holder.js/260x180" alt="">
-    </a>
-  </div>
-  ...
-</div>
-

- -

Custom content thumbnails

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

Thumbnail label

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

Thumbnail label

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

Thumbnail label

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

-<div class="row">
-  <div class="span4">
-    <div class="thumbnail">
-      <img data-src="holder.js/300x200" alt="">
-      <h3>Thumbnail label</h3>
-      <p>Thumbnail caption...</p>
-    </div>
-  </div>
-  ...
-</div>
-

- -

- - - - - -

- -

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

- -

Default alert

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

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

- -

Block alerts

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">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
-  <h4>Warning!</h4>
-  Best check yo self, you're not...
-</div>
-

- -

Contextual alternatives

Add optional classes to change an alert's connotation.

- - Oh snap! Change a few things up and try submitting again. -

- - Well done! You successfully read this important alert message. -

- - Heads up! This alert needs your attention, but it's not super important. -

-<div class="alert alert-error">... </div>
-<div class="alert alert-success">...</div>
-<div class="alert alert-info">...</div>
-

- - - - - -

- -

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

- -

Basic

Default progress bar with a vertical gradient.

-<div class="progress">
-  <div class="progress-bar" style="width: 60%;"></div>
-</div>
-

- -

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

-<div class="progress">
-  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-</div>
-

- -

Striped

Uses a gradient to create a striped effect. Not available in IE8.

-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-</div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-</div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-</div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-</div>
-

- -

Animated

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="progress-bar" style="width: 40%;"></div>
-</div>
-

- -

Stacked

Place multiple bars into the same .progress to stack them.

-<div class="progress">
-  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
-  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
-  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
-</div>
-

- -

- - - - - -

- -

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

- -

Default example

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

- -

Media heading

- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -

- -

Media heading

- -

Media heading

-<div class="media">
-  <a class="pull-left" href="#">
-    <img class="media-object" data-src="holder.js/64x64">
-  </a>
-  <div class="media-body">
-    <h4 class="media-heading">Media heading</h4>
-    ...
-
-    <!-- Nested media object -->
-    <div class="media">
-      ...
-    </div>
-  </div>
-</div>
-

- -

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

- - - -
-
Media heading
-
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
- -
- - - -
-
Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. - -
- - - -
-
Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
-
-
-
- -
- - - -
-
Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
-
-
-
- - - -
-
Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
-

-<ul class="media-list">
-  <li class="media">
-    <a class="pull-left" href="#">
-      <img class="media-object" data-src="holder.js/64x64">
-    </a>
-    <div class="media-body">
-      <h4 class="media-heading">Media heading</h4>
-      ...
-
-      <!-- Nested media object -->
-      <div class="media">
-        ...
-     </div>
-    </div>
-  </li>
-</ul>
-

- -

- - - - - - -

- - -

Wells

Use the well as a simple effect on an element to give it an inset effect.

- Look, I'm in a well! -

-<div class="well">
-  ...
-</div>
-

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">
-  ...
-</div>
-

- -

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 would rather use an anchor.

<a class="close" href="#">&times;</a>

- -

Helper classes

Simple, focused classes for small display or behavior tweaks.

- -

.pull-left

Float an element left

-class="pull-left"
-

-.pull-left {
-  float: left;
-}
-

- -

.pull-right

Float an element right

-class="pull-right"
-

-.pull-right {
-  float: right;
-}
-

- -

.muted

Change an element's color to #999

-class="muted"
-

-.muted {
-  color: #999;
-}
-

- -

.clearfix

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

-class="clearfix"
-

-.clearfix {
-  &:before,
-  &:after {
-    content: " ";
-    display: table;
-  }
-  &:after {
-    clear: both;
-  }
-}
-

- -

- - - -

- -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- cgit v1.2.3 From e45f12ad427fddc9d9859fe86423bd49795d4f43 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 12 Feb 2013 12:44:41 -0800 Subject: rearrange jekyll and docs --- docs/components.html | 1824 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1824 insertions(+) create mode 100644 docs/components.html (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html new file mode 100644 index 000000000..62a47d7c6 --- /dev/null +++ b/docs/components.html @@ -0,0 +1,1824 @@ +--- +layout: default +title: Components +--- + + + +

Components

Dozens of reusable components built to provide navigation, alerts, popovers, and more.

+ + +

+ +

+ + + + +

+ +

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

+ +

Example

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

+ +

+<div class="dropdown">
+  <!-- Link or button to toggle dropdown -->
+  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+    <li><a tabindex="-1" href="#">Action</a></li>
+    <li><a tabindex="-1" href="#">Another action</a></li>
+    <li><a tabindex="-1" href="#">Something else here</a></li>
+    <li class="divider"></li>
+    <li><a tabindex="-1" href="#">Separated link</a></li>
+  </ul>
+</div>
+

+ +

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

+<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
+  ...
+</ul>
+

+ +

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

+ +

+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+  <li><a tabindex="-1" href="#">Regular link</a></li>
+  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
+  <li><a tabindex="-1" href="#">Another link</a></li>
+</ul>
+

+ + + + + +

+ +

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

+ +

Single button group

Wrap a series of buttons with .btn in .btn-group.

+ + + +

+<div class="btn-group">
+  <button class="btn">Left</button>
+  <button class="btn">Middle</button>
+  <button class="btn">Right</button>
+</div>
+

+ +

Multiple button groups

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

+ +

+<div class="btn-toolbar">
+  <div class="btn-group">
+    ...
+  </div>
+</div>
+

+ +

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

+ + + + +

+<div class="btn-group btn-group-vertical">
+  ...
+</div>
+

+ +

Justified button groups

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

+ Left + Right + Middle +

+<div class="btn-group btn-group-justified">
+  ...
+</div>
+

+ +

+ + + + +

+ +

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

+ +

Single or split button

Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.

+ + + +

+<-- Single button -->
+<div class="btn-group">
+  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
+    Action
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+
+<-- Split button -->
+<div class="btn-group">
+  <button class="btn">Action</button>
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+

+ +

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

+ +

Dropup buttons

Trigger dropdown menus above elements by adding .dropup to the parent.

+ +

+<div class="btn-group dropup">
+  <button class="btn">Dropup</button>
+  <button class="btn dropdown-toggle" data-toggle="dropdown">
+    <span class="caret"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <!-- dropdown menu links -->
+  </ul>
+</div>
+

+ +

+ + + + +

+ + +

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

+ +

Tabs

Note the .nav-tabs class requires the .nav base class.

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

+ +

List

Swap the tabs class for .nav-list.

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

+ +

Pills

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

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

Pills are also vertically stackable. Just add .nav-stacked.

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

+ +

Options

+ +

Justified links

Easily make tabs or pills equal widths of their parent with .nav-justified.

+
+

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

+ +

Disabled state

+<ul class="nav nav-pills">
+  ...
+  <li class="disabled"><a href="#">Home</a></li>
+  ...
+</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.

+ + +

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">
+    <a class="dropdown-toggle"
+       data-toggle="dropdown"
+       href="#">
+        Dropdown
+        <b class="caret"></b>
+      </a>
+    <ul class="dropdown-menu">
+      <!-- links -->
+    </ul>
+  </li>
+</ul>
+

+ +

Pills with dropdowns

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

+ +

+ + + + +

+ + + +

Basic navbar

+ +

+<div class="navbar">
+  <a class="brand" href="#">Title</a>
+  <ul class="nav">
+    <li class="active"><a href="#">Home</a></li>
+    <li><a href="#">Link</a></li>
+    <li><a href="#">Link</a></li>
+  </ul>
+</div>
+

+ + +

Navbar components

+ +

Brand

A simple link to show your brand or project name only requires an anchor tag.

+ +

+<a class="brand" href="#">Project name</a>
+

+ +

Nav links

Nav items are simple to add via unordered lists.

+ +

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

+ +

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

+ +

Forms

+ +

+<form class="pull-left">
+  <input type="text" style="width: 200px;">
+  <button type="submit" class="btn">Submit</button>
+</form>
+

+ +

Component alignment

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

+ +

Using dropdowns

Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.

+<ul class="nav">
+  <li class="dropdown">
+    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+      Account
+      <b class="caret"></b>
+    </a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+</ul>
+

Visit the JavaScript dropdowns documentation for more markup and information on calling dropdowns.

+ +

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

+ + +

Optional display variations

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

+ +

Fixed to top

+ +

+<div class="navbar navbar-fixed-top">
+  ...
+</div>
+

+ +

Fixed to bottom

Add .navbar-fixed-bottom instead.

+ +

+<div class="navbar navbar-fixed-bottom">
+  ...
+</div>
+

+ +

Static top navbar

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.

+ +

+<div class="navbar navbar-static-top">
+  ...
+</div>
+

+ + +

Responsive navbar

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

+ +

+<div class="navbar">
+  <div class="container">
+
+    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
+    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </a>
+
+    <!-- Be sure to leave the brand out there if you want it shown -->
+    <a class="brand" href="#">Project name</a>
+
+    <!-- Everything you want hidden at 940px or less, place within here -->
+    <div class="nav-collapse collapse">
+      <!-- .nav, .navbar-search, .navbar-form, etc -->
+    </div>
+
+  </div>
+</div>
+

+ Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file. +

+ + +

Inverted variation

Modify the look of the navbar by adding .navbar-inverse.

+ +

+<div class="navbar navbar-inverse">
+  ...
+</div>
+

+ +

+ + + + +

+ +

Indicate the current page's location within a navigational hierarchy.

+ +

+ + + +

+<ul class="breadcrumb">
+  <li><a href="#">Home</a></li>
+  <li><a href="#">Library</a></li>
+  <li class="active">Data</li>
+</ul>
+

+ +

+ + + + +

+ +

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

+ +

Standard pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

+<ul class="pagination">
+  <li><a href="#">Prev</a></li>
+  <li><a href="#">1</a></li>
+  <li><a href="#">2</a></li>
+  <li><a href="#">3</a></li>
+  <li><a href="#">4</a></li>
+  <li><a href="#">5</a></li>
+  <li><a href="#">Next</a></li>
+</ul>
+

+ +

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

+<ul class="pagination">
+  <li class="disabled"><a href="#">&laquo;</a></li>
+  <li class="active"><a href="#">1</a></li>
+  ...
+</ul>
+

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

+<ul class="pagination">
+  <li class="disabled"><span>&laquo;</span></li>
+  <li class="active"><span>1</span></li>
+  ...
+</ul>
+

+ +

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

+<ul class="pagination pagination-large">
+  ...
+</ul>
+<ul class="pagination">
+  ...
+</ul>
+<ul class="pagination pagination-small">
+  ...
+</ul>
+<ul class="pagination pagination-mini">
+  ...
+</ul>
+

+ +

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

+ +

Default example

By default, the pager centers links.

+ +

+<ul class="pager">
+  <li><a href="#">Previous</a></li>
+  <li><a href="#">Next</a></li>
+</ul>
+

+ +

Aligned links

Alternatively, you can align each link to the sides:

+ +

+<ul class="pager">
+  <li class="previous">
+    <a href="#">&larr; Older</a>
+  </li>
+  <li class="next">
+    <a href="#">Newer &rarr;</a>
+  </li>
+</ul>
+

+ +

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

+ +

+<ul class="pager">
+  <li class="previous disabled">
+    <a href="#">&larr; Older</a>
+  </li>
+  ...
+</ul>
+

+ +

+ + + + +

+ +

Easily highlight new or unread items by adding a <span class="counter"> to links, Bootstrap navs, and more.

+ +

+ Inbox 42 +

+<a href="#">
+  Inbox
+  <span class="counter">42</span>
+</a>
+

+ +

Self collapsing

When there are no new or unread items, counters will simply collapse (via CSS's :empty selector) provided no content exists within.

+ +

Adapts to active nav states

Built-in styles are included for placing counters in active states in pill and list navigations.

+
+

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

+ +

+ + + + +

+ + +

Jumbotron

A lightweight, flexible component to showcase key 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.

+<div class="jumbotron">
+  <h1>Heading</h1>
+  <p>Tagline</p>
+  <p>
+    <a class="btn btn-primary btn-large">
+      Learn more
+    </a>
+  </p>
+</div>
+

+ +

Page header

+ +

+<div class="page-header">
+  <h1>Example page header <small>Subtext for header</small></h1>
+</div>
+

+ +

+ + + + +

+ +

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

+ +

Default thumbnails

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

+ +

+<div class="row">
+  <div class="span3">
+    <a href="#" class="thumbnail">
+      <img src="holder.js/260x180" alt="">
+    </a>
+  </div>
+  ...
+</div>
+

+ +

Custom content thumbnails

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

Thumbnail label

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

Thumbnail label

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

Thumbnail label

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

+<div class="row">
+  <div class="span4">
+    <div class="thumbnail">
+      <img data-src="holder.js/300x200" alt="">
+      <h3>Thumbnail label</h3>
+      <p>Thumbnail caption...</p>
+    </div>
+  </div>
+  ...
+</div>
+

+ +

+ + + + + +

+ +

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

+ +

Default alert

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

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

+ +

Block alerts

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">
+  <button type="button" class="close" data-dismiss="alert">&times;</button>
+  <h4>Warning!</h4>
+  Best check yo self, you're not...
+</div>
+

+ +

Contextual alternatives

Add optional classes to change an alert's connotation.

+ + Oh snap! Change a few things up and try submitting again. +

+ + Well done! You successfully read this important alert message. +

+ + Heads up! This alert needs your attention, but it's not super important. +

+<div class="alert alert-error">... </div>
+<div class="alert alert-success">...</div>
+<div class="alert alert-info">...</div>
+

+ + + + + +

+ +

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

+ +

Basic

Default progress bar with a vertical gradient.

+<div class="progress">
+  <div class="progress-bar" style="width: 60%;"></div>
+</div>
+

+ +

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

+<div class="progress">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
+</div>
+<div class="progress">
+  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
+</div>
+

+ +

Striped

Uses a gradient to create a striped effect. Not available in IE8.

+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
+</div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
+</div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
+</div>
+<div class="progress progress-striped">
+  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
+</div>
+

+ +

Animated

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="progress-bar" style="width: 40%;"></div>
+</div>
+

+ +

Stacked

Place multiple bars into the same .progress to stack them.

+<div class="progress">
+  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
+  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
+  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
+</div>
+

+ +

+ + + + + +

+ +

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

+ +

Default example

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

+ +

Media heading

+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +

+ +

Media heading

+ +

Media heading

+<div class="media">
+  <a class="pull-left" href="#">
+    <img class="media-object" data-src="holder.js/64x64">
+  </a>
+  <div class="media-body">
+    <h4 class="media-heading">Media heading</h4>
+    ...
+
+    <!-- Nested media object -->
+    <div class="media">
+      ...
+    </div>
+  </div>
+</div>
+

+ +

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

+ + + +
+
Media heading
+
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
+ +
+ + + +
+
Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. + +
+ + + +
+
Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
+
+
+
+ +
+ + + +
+
Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
+
+
+
+ + + +
+
Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. +
+

+<ul class="media-list">
+  <li class="media">
+    <a class="pull-left" href="#">
+      <img class="media-object" data-src="holder.js/64x64">
+    </a>
+    <div class="media-body">
+      <h4 class="media-heading">Media heading</h4>
+      ...
+
+      <!-- Nested media object -->
+      <div class="media">
+        ...
+     </div>
+    </div>
+  </li>
+</ul>
+

+ +

+ + + + + + +

+ + +

Wells

Use the well as a simple effect on an element to give it an inset effect.

+ Look, I'm in a well! +

+<div class="well">
+  ...
+</div>
+

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">
+  ...
+</div>
+

+ +

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 would rather use an anchor.

<a class="close" href="#">&times;</a>

+ +

Helper classes

Simple, focused classes for small display or behavior tweaks.

+ +

.pull-left

Float an element left

+class="pull-left"
+

+.pull-left {
+  float: left;
+}
+

+ +

.pull-right

Float an element right

+class="pull-right"
+

+.pull-right {
+  float: right;
+}
+

+ +

.muted

Change an element's color to #999

+class="muted"
+

+.muted {
+  color: #999;
+}
+

+ +

.clearfix

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

+class="clearfix"
+

+.clearfix {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+

+ +

+ + + +

+ +

-- cgit v1.2.3 From 37becbab8cf5c125df758a61ac4429eb8693d673 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 14 Feb 2013 21:42:33 -0800 Subject: convert components code examples to pygments --- docs/components.html | 1032 +++++++++++++++++++++++++------------------------- 1 file changed, 510 insertions(+), 522 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 62a47d7c6..0aea4113e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -62,26 +62,26 @@ title: Components

-<div class="dropdown">
-  <!-- Link or button to toggle dropdown -->
-  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-    <li><a tabindex="-1" href="#">Action</a></li>
-    <li><a tabindex="-1" href="#">Another action</a></li>
-    <li><a tabindex="-1" href="#">Something else here</a></li>
-    <li class="divider"></li>
-    <li><a tabindex="-1" href="#">Separated link</a></li>
-  </ul>
-</div>
-

+{% highlight html linenos %} + +{% endhighlight %}

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

-<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
+{% highlight html linenos %}
+
   ...
-</ul>
-

+ +{% endhighlight %}

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

@@ -94,13 +94,13 @@ title: Components

-<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
-  <li><a tabindex="-1" href="#">Regular link</a></li>
-  <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
-  <li><a tabindex="-1" href="#">Another link</a></li>
-</ul>
-

+{% highlight html linenos %} + +{% endhighlight %} @@ -118,46 +118,46 @@ title: Components

Wrap a series of buttons with .btn in .btn-group.

- - - + + +

-<div class="btn-group">
-  <button class="btn">Left</button>
-  <button class="btn">Middle</button>
-  <button class="btn">Right</button>
-</div>
-

+{% highlight html linenos %} +

+ + + +

+{% endhighlight %}

Multiple button groups

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

-<div class="btn-toolbar">
-  <div class="btn-group">
-    ...
-  </div>
-</div>
-

+{% highlight html linenos %} + +{% endhighlight %}

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

@@ -169,11 +169,11 @@ title: Components -

-<div class="btn-group btn-group-vertical">
+{% highlight html linenos %}
+
   ...
-</div>
-

+ +{% endhighlight %}

Justified button groups

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

@@ -184,11 +184,11 @@ title: Components Middle -

-<div class="btn-group btn-group-justified">
+{% highlight html linenos %}
+
   ...
-</div>
-

+ +{% endhighlight %} @@ -316,36 +316,45 @@ title: Components -

-<-- Single button -->
-<div class="btn-group">
-  <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
-    Action
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-
-<-- Split button -->
-<div class="btn-group">
-  <button class="btn">Action</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-

+{% highlight html linenos %} + +

+ + +

+ + + +

+{% endhighlight %}

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

+{% highlight html linenos %} + +

+ + +

+{% endhighlight %}

Dropup buttons

Trigger dropdown menus above elements by adding .dropup to the parent.

@@ -405,17 +449,17 @@ title: Components -

-<div class="btn-group dropup">
-  <button class="btn">Dropup</button>
-  <button class="btn dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
-  </button>
-  <ul class="dropdown-menu">
-    <!-- dropdown menu links -->
-  </ul>
-</div>
-

+{% highlight html linenos %} +

+ + + +

+{% endhighlight %} @@ -439,15 +483,13 @@ title: Components

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

+{% highlight html linenos %} +

+{% endhighlight %}

List

Swap the tabs class for .nav-list.

@@ -458,15 +500,13 @@ title: Components

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

+{% highlight html linenos %} +

+{% endhighlight %}

Pills

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

@@ -477,15 +517,13 @@ title: Components

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

+{% highlight html linenos %} +

+{% endhighlight %}

Pills are also vertically stackable. Just add .nav-stacked.

Messages

-<ul class="nav nav-pills nav-stacked">
+{% highlight html linenos %}
+
   ...
-</ul>
-

+ +{% endhighlight %}

Options

@@ -517,15 +555,14 @@ title: Components

-<ul class="nav nav-tabs nav-justified">
+{% highlight html linenos %}
+
   ...
-</ul>
-
-<ul class="nav nav-pills nav-justified">
+
+
   ...
-</ul>
-

+ +{% endhighlight %}

Disabled state

@@ -536,13 +573,14 @@ title: Components

Disabled link

-<ul class="nav nav-pills">
+{% highlight html linenos %}
+
   ...
-  <li class="disabled"><a href="#">Home</a></li>
+  Disabled link
   ...
-</ul>
-

+ +{% endhighlight %} +

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.

@@ -560,7 +598,9 @@ title: Components

Home

Help

- + -

-<ul class="nav nav-tabs">
-  <li class="dropdown">
-    <a class="dropdown-toggle"
-       data-toggle="dropdown"
-       href="#">
-        Dropdown
-        <b class="caret"></b>
-      </a>
-    <ul class="dropdown-menu">
-      <!-- links -->
-    </ul>
-  </li>
-</ul>
-

+{% highlight html linenos %} +

+ + Dropdown + +
+

+{% endhighlight %}

Pills with dropdowns

@@ -593,7 +632,9 @@ title: Components

Home

Help

- + -

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

+{% highlight html linenos %} +

+ + Dropdown + +
+

+{% endhighlight %} @@ -644,20 +684,16 @@ title: Components -

-<div class="navbar">
-  <a class="brand" href="#">Title</a>
-  <ul class="nav">
-    <li class="active"><a href="#">Home</a></li>
-    <li><a href="#">Link</a></li>
-    <li><a href="#">Link</a></li>
-  </ul>
-</div>
-

- - -

- +{% highlight html linenos %} + +{% endhighlight %}

Navbar components

@@ -668,9 +704,9 @@ title: Components Title -

-<a class="brand" href="#">Project name</a>
-

+{% highlight html linenos %} +Title +{% endhighlight %}

Nav links

Nav items are simple to add via unordered lists.

@@ -683,15 +719,13 @@ title: Components -

-<ul class="nav">
-  <li class="active">
-    <a href="#">Home</a>
-  </li>
-  <li><a href="#">Link</a></li>
-  <li><a href="#">Link</a></li>
-</ul>
-

+{% highlight html linenos %} +

Home
Link
Link

+{% endhighlight %}

-<ul class="nav">
+{% highlight html linenos %}
+
   ...
-  <li class="divider"></li>
+  
   ...
-</ul>
-

+ +{% endhighlight %}

Forms

@@ -725,40 +759,23 @@ title: Components -

-<form class="pull-left">
-  <input type="text" style="width: 200px;">
-  <button type="submit" class="btn">Submit</button>
-</form>
-

+{% highlight html linenos %} + +{% endhighlight %}

Component alignment

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

Using dropdowns

Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.

-<ul class="nav">
-  <li class="dropdown">
-    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-      Account
-      <b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </li>
-</ul>
-

Visit the JavaScript dropdowns documentation for more markup and information on calling dropdowns.

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

- -

Optional display variations

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

@@ -776,11 +793,11 @@ title: Components -

-<div class="navbar navbar-fixed-top">
+{% highlight html linenos %}
+
   ...
-</div>
-

+ +{% endhighlight %}

Fixed to bottom

Add .navbar-fixed-bottom instead.

@@ -796,11 +813,11 @@ title: Components -

-<div class="navbar navbar-fixed-bottom">
+{% highlight html linenos %}
+
   ...
-</div>
-

+ +{% endhighlight %}

Static top navbar

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.

@@ -816,14 +833,11 @@ title: Components -

-<div class="navbar navbar-static-top">
+{% highlight html linenos %}
+
   ...
-</div>
-

- - -

+ +{% endhighlight %}

Responsive navbar

@@ -873,40 +887,36 @@ title: Components

- - - + + -

-<div class="navbar">
-  <div class="container">
-
-    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
-    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-    </a>
-
-    <!-- Be sure to leave the brand out there if you want it shown -->
-    <a class="brand" href="#">Project name</a>
-
-    <!-- Everything you want hidden at 940px or less, place within here -->
-    <div class="nav-collapse collapse">
-      <!-- .nav, .navbar-search, .navbar-form, etc -->
-    </div>
-
-  </div>
-</div>
-

+{% highlight html linenos %} + +{% endhighlight %} +

Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.

- -

Inverted variation

Modify the look of the navbar by adding .navbar-inverse.

@@ -957,11 +967,11 @@ title: Components

-<div class="navbar navbar-inverse">
+{% highlight html linenos %}
+
   ...
-</div>
-

+ +{% endhighlight %} @@ -989,13 +999,14 @@ title: Components

Data

-<ul class="breadcrumb">
-  <li><a href="#">Home</a></li>
-  <li><a href="#">Library</a></li>
-  <li class="active">Data</li>
-</ul>
-

+{% highlight html linenos %} + +{% endhighlight %} + @@ -1022,17 +1033,17 @@ title: Components

-<ul class="pagination">
-  <li><a href="#">Prev</a></li>
-  <li><a href="#">1</a></li>
-  <li><a href="#">2</a></li>
-  <li><a href="#">3</a></li>
-  <li><a href="#">4</a></li>
-  <li><a href="#">5</a></li>
-  <li><a href="#">Next</a></li>
-</ul>
-

+{% highlight html linenos %} +

+{% endhighlight %}

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

@@ -1047,21 +1058,22 @@ title: Components

-<ul class="pagination">
-  <li class="disabled"><a href="#">&laquo;</a></li>
-  <li class="active"><a href="#">1</a></li>
+{% highlight html linenos %}
+
+  «
+  1
   ...
-</ul>
-

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

-<ul class="pagination">
-  <li class="disabled"><span>&laquo;</span></li>
-  <li class="active"><span>1</span></li>
+
+{% endhighlight %}
+          You can optionally swap out active or disabled anchors for <span> to remove click functionality while retaining intended styles.
+{% highlight html linenos %}
+
+  «
+  1
   ...
-</ul>
-

+ +{% endhighlight %} +

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

@@ -1111,20 +1123,13 @@ title: Components -

-<ul class="pagination pagination-large">
-  ...
-</ul>
-<ul class="pagination">
-  ...
-</ul>
-<ul class="pagination pagination-small">
-  ...
-</ul>
-<ul class="pagination pagination-mini">
-  ...
-</ul>
-

+{% highlight html linenos %} +

... +

... +{% endhighlight %} +

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

@@ -1137,12 +1142,12 @@ title: Components

-<ul class="pager">
-  <li><a href="#">Previous</a></li>
-  <li><a href="#">Next</a></li>
-</ul>
-

+{% highlight html linenos %} + +{% endhighlight %}

Aligned links

Alternatively, you can align each link to the sides:

@@ -1152,16 +1157,13 @@ title: Components

Newer →

-<ul class="pager">
-  <li class="previous">
-    <a href="#">&larr; Older</a>
-  </li>
-  <li class="next">
-    <a href="#">Newer &rarr;</a>
-  </li>
-</ul>
-

+{% highlight html linenos %} + +{% endhighlight %} +

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

@@ -1171,14 +1173,13 @@ title: Components

Newer →

-<ul class="pager">
-  <li class="previous disabled">
-    <a href="#">&larr; Older</a>
-  </li>
-  ...
-</ul>
-

+{% highlight html linenos %} + +{% endhighlight %} + @@ -1195,12 +1196,9 @@ title: Components

Inbox 42

-<a href="#">
-  Inbox
-  <span class="counter">42</span>
-</a>
-

+{% highlight html linenos %} +Inbox 42 +{% endhighlight %}

Self collapsing

When there are no new or unread items, counters will simply collapse (via CSS's :empty selector) provided no content exists within.

@@ -1230,15 +1228,17 @@ title: Components -

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

+{% highlight html linenos %} +

+ + 42 + Home + +

+{% endhighlight %} @@ -1260,17 +1260,13 @@ title: Components

-<div class="jumbotron">
-  <h1>Heading</h1>
-  <p>Tagline</p>
-  <p>
-    <a class="btn btn-primary btn-large">
-      Learn more
-    </a>
-  </p>
-</div>
-

+{% highlight html linenos %} +

Hello, world!

...

+{% endhighlight %}

Page header

@@ -1279,11 +1275,11 @@ title: Components

Example page header Subtext for header

-<div class="page-header">
-  <h1>Example page header <small>Subtext for header</small></h1>
-</div>
-

+{% highlight html linenos %} + +{% endhighlight %} @@ -1323,16 +1319,16 @@ title: Components -

-<div class="row">
-  <div class="span3">
-    <a href="#" class="thumbnail">
-      <img src="holder.js/260x180" alt="">
-    </a>
-  </div>
+{% highlight html linenos %}
+
+  
+    
+      
+    
+  
   ...
-</div>
-

+ +{% endhighlight %}

Custom content thumbnails

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

@@ -1370,18 +1366,22 @@ title: Components -

-<div class="row">
-  <div class="span4">
-    <div class="thumbnail">
-      <img data-src="holder.js/300x200" alt="">
-      <h3>Thumbnail label</h3>
-      <p>Thumbnail caption...</p>
-    </div>
-  </div>
+{% highlight html linenos %}
+
+  
+    
+      
+      
+        Thumbnail label
+        ...
+        Action Action
+      
+    
+  
   ...
-</div>
-

+ +{% endhighlight %} + @@ -1404,12 +1404,12 @@ title: Components Warning! Best check yo self, you're not looking too good. -

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

+{% highlight html linenos %} +

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

+{% endhighlight %}

Block alerts

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

@@ -1420,13 +1420,13 @@ title: Components

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">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
-  <h4>Warning!</h4>
-  Best check yo self, you're not...
-</div>
-

+{% highlight html linenos %} +

+ +

Warning!

...

+{% endhighlight %}

Contextual alternatives

Add optional classes to change an alert's connotation.

@@ -1444,11 +1444,11 @@ title: Components Heads up! This alert needs your attention, but it's not super important. -

-<div class="alert alert-error">... </div>
-<div class="alert alert-success">...</div>
-<div class="alert alert-info">...</div>
-

+{% highlight html linenos %} +

...

+{% endhighlight %} @@ -1471,11 +1471,11 @@ title: Components

-<div class="progress">
-  <div class="progress-bar" style="width: 60%;"></div>
-</div>
-

+{% highlight html linenos %} +

+{% endhighlight %}

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

@@ -1493,20 +1493,20 @@ title: Components

-<div class="progress">
-  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-</div>
-<div class="progress">
-  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-</div>
-

+{% highlight html linenos %} +

+{% endhighlight %}

Striped

Uses a gradient to create a striped effect. Not available in IE8.

@@ -1524,20 +1524,20 @@ title: Components

-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-info" style="width: 20%"></div>
-</div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-success" style="width: 40%"></div>
-</div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
-</div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
-</div>
-

+{% highlight html linenos %} +

+{% endhighlight %}

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

@@ -1546,11 +1546,11 @@ title: Components

-<div class="progress progress-striped active">
-  <div class="progress-bar" style="width: 40%;"></div>
-</div>
-

+{% highlight html linenos %} +

+{% endhighlight %}

Stacked

Place multiple bars into the same .progress to stack them.

@@ -1561,13 +1561,13 @@ title: Components

-<div class="progress">
-  <div class="progress-bar progress-bar-success" style="width: 35%;"></div>
-  <div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
-  <div class="progress-bar progress-bar-danger" style="width: 10%;"></div>
-</div>
-

+{% highlight html linenos %} +

+{% endhighlight %} @@ -1613,22 +1613,17 @@ title: Components -

-<div class="media">
-  <a class="pull-left" href="#">
-    <img class="media-object" data-src="holder.js/64x64">
-  </a>
-  <div class="media-body">
-    <h4 class="media-heading">Media heading</h4>
+{% highlight html linenos %}
+
+  
+    
+  
+  
+    Media heading
     ...
-
-    <!-- Nested media object -->
-    <div class="media">
-      ...
-    </div>
-  </div>
-</div>
-

+ + +{% endhighlight %}

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

@@ -1684,24 +1679,19 @@ title: Components -

-<ul class="media-list">
-  <li class="media">
-    <a class="pull-left" href="#">
-      <img class="media-object" data-src="holder.js/64x64">
-    </a>
-    <div class="media-body">
-      <h4 class="media-heading">Media heading</h4>
+{% highlight html linenos %}
+
+  
+    
+      
+    
+    
+      Media heading
       ...
-
-      <!-- Nested media object -->
-      <div class="media">
-        ...
-     </div>
-    </div>
-  </li>
-</ul>
-

+ + + +{% endhighlight %} @@ -1723,11 +1713,9 @@ title: Components Look, I'm in a well! -

-<div class="well">
-  ...
-</div>
-

+{% highlight html linenos %} +

...

+{% endhighlight %}

Optional classes

Control padding and rounded corners with two optional modifier classes.

@@ -1735,73 +1723,72 @@ title: Components Look, I'm in a well!

-<div class="well well-large">
-  ...
-</div>
-

+{% highlight html linenos %} +

...

+{% endhighlight %} +

Look, I'm in a well!

-<div class="well well-small">
-  ...
-</div>
-

+{% highlight html linenos %} +

...

+{% endhighlight %} +

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 would rather use an anchor.

<a class="close" href="#">&times;</a>

+{% highlight html linenos %} + +{% endhighlight %}

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

-class="pull-left"
-

+{% highlight html linenos %}
+...
+{% endhighlight %}
+{% highlight css linenos %}
 .pull-left {
   float: left;
 }
-

+{% endhighlight %}

.pull-right

Float an element right

-class="pull-right"
-

+{% highlight html linenos %}
+...
+{% endhighlight %}
+{% highlight css linenos %}
 .pull-right {
   float: right;
 }
-

+{% endhighlight %}

.muted

Change an element's color to #999

-class="muted"
-

+{% highlight html linenos %}
+...
+{% endhighlight %}
+{% highlight css linenos %}
 .muted {
   color: #999;
 }
-

+{% endhighlight %} +

.clearfix

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

-class="clearfix"
-

+{% highlight html linenos %}
+...
+{% endhighlight %}
+{% highlight css linenos %}
 .clearfix {
   &:before,
   &:after {
@@ -1812,7 +1799,8 @@ class="clearfix"
     clear: both;
   }
 }
-

+{% endhighlight %} + -- cgit v1.2.3 From ce21926704778a2fb8ff76f5241b90a97abeea4c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 16 Feb 2013 01:26:43 -0800 Subject: All Glyphicons now require a base class, e.g. .glyphicon.glyphicon-star --- docs/components.html | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 0aea4113e..bc5d7a2b3 100644 --- a/docs/components.html +++ b/docs/components.html @@ -21,20 +21,20 @@ title: Components

@@ -163,10 +163,10 @@ title: Components

Make a set of buttons appear vertically stacked rather than horizontally.

- - - - + + + +

{% highlight html linenos %} -- cgit v1.2.3 From 6ccf588a8e08a9f99e6a56f9201a4348eb946cde Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 17 Feb 2013 13:35:14 -0800 Subject: Restore submenu support --- docs/components.html | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 91 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index bc5d7a2b3..b80eb6e71 100644 --- a/docs/components.html +++ b/docs/components.html @@ -53,7 +53,7 @@ title: Components

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

Action
Another action
Something else here

Add .disabled to a <li> in the dropdown to disable the link.

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

+ +

Default

+ +

Dropup

+ +

Left submenu

+ +

Date: Sun, 17 Feb 2013 18:10:29 -0800 Subject: Update some links and rename #gridsystem to #grid-system --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b80eb6e71..c30699dc5 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1380,7 +1380,7 @@ title: Components -

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default thumbnails

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

-- cgit v1.2.3 From f6ec2c5dac371b0b1d56abd65be548ee5ed075c8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 17 Feb 2013 21:06:20 -0800 Subject: Drop the recently added .counter class for .badge --- docs/components.html | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index c30699dc5..53b4a7e08 100644 --- a/docs/components.html +++ b/docs/components.html @@ -28,7 +28,7 @@ title: Components

@@ -1274,44 +1274,44 @@ title: Components - -

Easily highlight new or unread items by adding a <span class="counter"> to links, Bootstrap navs, and more.

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

- Inbox 42 + Inbox 42

{% highlight html linenos %} -Inbox 42 +Inbox 42 {% endhighlight %}

Self collapsing

When there are no new or unread items, counters will simply collapse (via CSS's :empty selector) provided no content exists within.

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

Adapts to active nav states

Built-in styles are included for placing counters in active states in pill and list navigations.

Built-in styles are included for placing badges in active states in pill and list navigations.

- 42 + 42 Home
Profile
- 3 + 3 Messages

- 42 + 42 Home

Date: Sun, 17 Feb 2013 22:20:49 -0800 Subject: Bring back the label, make it scale somewhat with the font-size of the parent using percentages and ems --- docs/components.html | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 53b4a7e08..f1b45159b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -28,6 +28,7 @@ title: Components

@@ -1274,6 +1275,84 @@ title: Components + +

+ +

Example

Example heading New

+{% highlight html linenos %} +

Example heading New

+{% endhighlight %} + +

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Labels	Markup
+ Default +	+ `<span class="label">Default</span>` +
+ Success +	+ `<span class="label label-success">Success</span>` +
+ Warning +	+ `<span class="label label-warning">Warning</span>` +
+ Danger +	+ `<span class="label label-danger">Danger</span>` +
+ Info +	+ `<span class="label label-info">Info</span>` +

+ +

+ + +

-- cgit v1.2.3 From 023568fe3dba59b7f5c12ac610e02fd8bd6c772f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 18 Feb 2013 01:28:35 -0800 Subject: Navbar realignment: * Change .brand to .navbar-brand * Change .btn-navbar to .navbar-toggle * Redesign navbar toggle to be a bit lighter and wider * Center align the navbar brand with a max-width of 200px (to minimize hit area) while still centering --- docs/components.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index f1b45159b..63c37131e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -766,7 +766,7 @@ title: Components

{% highlight html linenos %}

- Title +

Home
Link

A simple link to show your brand or project name only requires an anchor tag.

Title

Nav links

- Title +

Home
Link

- Title +

Home
Link

- Title +

Home
Link

Responsive navbar

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .navbar-toggle.

- - Title +

Home

- - - Title +

@@ -1012,12 +1012,12 @@ title: Components

- - Title +

Home

Date: Mon, 18 Feb 2013 20:57:54 -0500 Subject: fix incorrect section id for labels --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 63c37131e..b05d9c6e9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1277,7 +1277,7 @@ title: Components -

-- cgit v1.2.3 From 3b7e5214e3c998e4c2652798dbd8aba4cfee737f Mon Sep 17 00:00:00 2001 From: Tom Pietschker Date: Tue, 19 Feb 2013 14:32:28 -0500 Subject: remove navbar-inner --- docs/components.html | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b05d9c6e9..7e713938c 100644 --- a/docs/components.html +++ b/docs/components.html @@ -819,16 +819,14 @@ title: Components

{% highlight html linenos %} -- cgit v1.2.3 From 62b54605a7b22011835fdb43474e9d8fa27ac384 Mon Sep 17 00:00:00 2001 From: Tom Pietschker Date: Tue, 19 Feb 2013 14:35:48 -0500 Subject: replace navbar-search with navbar-form --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 7e713938c..73100279a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -957,7 +957,7 @@ title: Components

@@ -1034,7 +1034,7 @@ title: Components

Date: Tue, 19 Feb 2013 14:40:05 -0500 Subject: remove the search-query class and increase the width --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 73100279a..6c8950e0a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -958,7 +958,7 @@ title: Components

Link

Link

Date: Tue, 19 Feb 2013 14:50:44 -0500 Subject: tweak the position of the fixed to top/bottom navbars to remove double border --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 6c8950e0a..bcca74135 100644 --- a/docs/components.html +++ b/docs/components.html @@ -870,7 +870,7 @@ title: Components

Fixed to top

Fixed to bottom

Add .navbar-fixed-bottom instead.

Date: Tue, 19 Feb 2013 14:54:56 -0500 Subject: forgot navbar-fixed-bottom in the commit --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index bcca74135..b60dd1621 100644 --- a/docs/components.html +++ b/docs/components.html @@ -890,7 +890,7 @@ title: Components

Fixed to bottom

Add .navbar-fixed-bottom instead.

Date: Thu, 28 Feb 2013 23:20:25 -0800 Subject: Fixes #6995: Add disabled navbar nav link support --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b60dd1621..5727a1759 100644 --- a/docs/components.html +++ b/docs/components.html @@ -805,7 +805,7 @@ title: Components

@@ -813,7 +813,7 @@ title: Components

{% endhighlight %}

-- cgit v1.2.3 From 4c0719ea5f11aae5ec825229ee6e7143bbae4432 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 14 Mar 2013 22:34:20 -0700 Subject: fix derpy linenos in pygments for thumbnails component --- docs/components.html | 1 - 1 file changed, 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 5727a1759..e2c6143ab 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1544,7 +1544,6 @@ title: Components

- ...

{% endhighlight %} -- cgit v1.2.3 From ca31f060a839b957ce3a85d3eaaaae09a78bbeb0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Mar 2013 17:12:17 -0700 Subject: New grid classes --- docs/components.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index e2c6143ab..5e17a6a3e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -19,7 +19,7 @@ title: Components

+ -

-- cgit v1.2.3 From 5b298a2aaf5286564b1dc614bb439eb19edf2c25 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Mar 2013 23:54:17 -0700 Subject: docs fixes with new .bs-docs-container; fixing some lingering grid classes --- docs/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 5e17a6a3e..06cbe3720 100644 --- a/docs/components.html +++ b/docs/components.html @@ -14,7 +14,7 @@ title: Components -

-- cgit v1.2.3 From 081c061281c96818bf9a904a7e5e2a673aa7a54d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Mar 2013 00:21:21 -0700 Subject: new subnav on all pages --- docs/components.html | 58 +++++++++++++++++++--------------------------------- 1 file changed, 21 insertions(+), 37 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 06cbe3720..b42fad00b 100644 --- a/docs/components.html +++ b/docs/components.html @@ -4,43 +4,30 @@ title: Components --- - -

Components

Dozens of reusable components built to provide navigation, alerts, popovers, and more.

- - -

+ - -

- -

@@ -1971,7 +1958,4 @@ title: Components -

-- cgit v1.2.3 From 4b8b8d2e46e25820d190db957b4e837b66198f72 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Mar 2013 01:08:14 -0700 Subject: holy crap new docs layout separate from home, no more top navbar --- docs/components.html | 1961 -------------------------------------------------- 1 file changed, 1961 deletions(-) delete mode 100644 docs/components.html (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html deleted file mode 100644 index b42fad00b..000000000 --- a/docs/components.html +++ /dev/null @@ -1,1961 +0,0 @@ ---- -layout: default -title: Components ---- - - - - - - -

- - -

- -

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

- -

Example

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

-{% highlight html linenos %} - -{% endhighlight %} - -

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

- -

Default

- -

Dropup

- -

Left submenu

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

- - - - - -

- -

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

- -

Single button group

Wrap a series of buttons with .btn in .btn-group.

- - - -

-{% highlight html linenos %} -

- - - -

-{% endhighlight %} - -

Multiple button groups

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

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

- - - - -

-{% highlight html linenos %} -

- ... -

-{% endhighlight %} - -

Justified button groups

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

- Left - Right - Middle -

-{% highlight html linenos %} -

- ... -

-{% endhighlight %} - -

- - - - -

- -

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

- -

Single or split button

Turn a button into dropdown toggle, or add a second button to toggle the dropdown while retaining the primary button action.

- - - -

-{% highlight html linenos %} - -

- - -

- - - -

-{% endhighlight %} - -

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

- -

-{% highlight html linenos %} - -

- - -

-{% endhighlight %} - -

Dropup buttons

Trigger dropdown menus above elements by adding .dropup to the parent.

- -

-{% highlight html linenos %} -

- - - -

-{% endhighlight %} - -

- - - - -

- - -

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

- -

Tabs

Note the .nav-tabs class requires the .nav base class.

-{% highlight html linenos %} -

-{% endhighlight %} - -

List

Swap the tabs class for .nav-list.

-{% highlight html linenos %} -

-{% endhighlight %} - -

Pills

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

-{% highlight html linenos %} -

-{% endhighlight %} -

Pills are also vertically stackable. Just add .nav-stacked.

-{% highlight html linenos %} -

- ... - -{% endhighlight %} - -

Options

- -

Justified links

Easily make tabs or pills equal widths of their parent with .nav-justified.

-
-

-{% highlight html linenos %} -

- ... - -

- ... - -{% endhighlight %} - -

Disabled state

-{% highlight html linenos %} -

Disabled link

-{% endhighlight %} - - -

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.

- - -

Dropdowns

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

- -

Tabs with dropdowns

-{% highlight html linenos %} -

- - Dropdown - -
-

-{% endhighlight %} - -

Pills with dropdowns

-{% highlight html linenos %} -

- - Dropdown - -
-

-{% endhighlight %} - -

- - - - -

- - - -

Basic navbar

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

Navbar components

- -

Brand

A simple link to show your brand or project name only requires an anchor tag.

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

Nav links

Nav items are simple to add via unordered lists.

- -

-{% highlight html linenos %} -

-{% endhighlight %} -

- -

-{% highlight html linenos %} -

-{% endhighlight %} - -

Forms

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

Component alignment

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

- -

Using dropdowns

Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.

- -

Text

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

- - -

Optional display variations

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

- -

Fixed to top

- -{% highlight html linenos %} - -{% endhighlight %} - -

Fixed to bottom

Add .navbar-fixed-bottom instead.

- -{% highlight html linenos %} - -{% endhighlight %} - -

Static top navbar

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.

- -{% highlight html linenos %} - -{% endhighlight %} - - -

Responsive navbar

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .navbar-toggle.

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

- Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file. -

- - -

Inverted variation

Modify the look of the navbar by adding .navbar-inverse.

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

- - - - -

- -

Indicate the current page's location within a navigational hierarchy.

- -

- - - -

-{% highlight html linenos %} - -{% endhighlight %} - - -

- - - - -

- -

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

- -

Standard pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

-{% highlight html linenos %} -

-{% endhighlight %} - -

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

-{% highlight html linenos %} -

-{% endhighlight %} -

You can optionally swap out active or disabled anchors for <span> to remove click functionality while retaining intended styles.

-{% highlight html linenos %} -

-{% endhighlight %} - - -

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

-{% highlight html linenos %} -

... -

... -{% endhighlight %} - - -

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

- -

Default example

By default, the pager centers links.

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

Aligned links

Alternatively, you can align each link to the sides:

- -

-{% highlight html linenos %} - -{% endhighlight %} - - -

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

- -

-{% highlight html linenos %} - -{% endhighlight %} - - -

- - - - -

- -

Example

Example heading New

-{% highlight html linenos %} -

Example heading New

-{% endhighlight %} - -

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

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

Labels	Markup
- Default -	- `<span class="label">Default</span>` -
- Success -	- `<span class="label label-success">Success</span>` -
- Warning -	- `<span class="label label-warning">Warning</span>` -
- Danger -	- `<span class="label label-danger">Danger</span>` -
- Info -	- `<span class="label label-info">Info</span>` -

- -

- - - - -

- -

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

- -

- Inbox 42 -

-{% highlight html linenos %} -Inbox 42 -{% endhighlight %} - -

Self collapsing

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

- -

Adapts to active nav states

Built-in styles are included for placing badges in active states in pill and list navigations.

-
-

-{% highlight html linenos %} -

- - 42 - Home - -

-{% endhighlight %} - -

- - - - -

- - -

Jumbotron

A lightweight, flexible component to showcase key 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.

-{% highlight html linenos %} -

Hello, world!

...

-{% endhighlight %} - -

Page header

- -

-{% highlight html linenos %} - -{% endhighlight %} - -

- - - - -

- -

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

- -

Default thumbnails

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

- -

-{% highlight html linenos %} -

- -

- ... -

-{% endhighlight %} - -

Custom content thumbnails

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

Thumbnail label

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

Thumbnail label

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

Thumbnail label

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

-{% highlight html linenos %} -

Thumbnail label

...

-{% endhighlight %} - - -

- - - - - -

- -

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.

- -

Default alert

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

-{% highlight html linenos %} -

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

-{% endhighlight %} - -

Block alerts

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.

-{% highlight html linenos %} -

- -

Warning!

...

-{% endhighlight %} - -

Contextual alternatives

Add optional classes to change an alert's connotation.

- - Oh snap! Change a few things up and try submitting again. -

- - Well done! You successfully read this important alert message. -

- - Heads up! This alert needs your attention, but it's not super important. -

-{% highlight html linenos %} -

...

-{% endhighlight %} -

- - - - - -

- -

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

- -

Basic

Default progress bar with a vertical gradient.

-{% highlight html linenos %} -

-{% endhighlight %} - -

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

-{% highlight html linenos %} -

-{% endhighlight %} - -

Striped

Uses a gradient to create a striped effect. Not available in IE8.

-{% highlight html linenos %} -

-{% endhighlight %} - -

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

-{% highlight html linenos %} -

-{% endhighlight %} - -

Stacked

Place multiple bars into the same .progress to stack them.

-{% highlight html linenos %} -

-{% endhighlight %} - -

- - - - - -

- -

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

- -

Default example

The default media allow to float a media object (images, video, audio) to the left or right of a content block.

- -

Media heading

- -

Media heading

- -

Media heading

-{% highlight html linenos %} -

- -

Media heading

- ... -

-{% endhighlight %} - -

Media list

With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).

- - - -
-
Media heading
-
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
- -
- - - -
-
Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. - -
- - - -
-
Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
-
-
-
- -
- - - -
-
Nested media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
-
-
-
- - - -
-
Media heading
- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
-

-{% highlight html linenos %} -

- - - -
-
Media heading
- ... -
-

-{% endhighlight %} - -

- - - - - - -

- - -

Wells

Use the well as a simple effect on an element to give it an inset effect.

- Look, I'm in a well! -

-{% highlight html linenos %} -

...

-{% endhighlight %} -

Optional classes

Control padding and rounded corners with two optional modifier classes.

- Look, I'm in a well! -

-{% highlight html linenos %} -

...

-{% endhighlight %} - -

- Look, I'm in a well! -

-{% highlight html linenos %} -

...

-{% endhighlight %} - - -

Close icon

Use the generic close icon for dismissing content like modals and alerts.

-{% highlight html linenos %} - -{% endhighlight %} - -

Helper classes

Simple, focused classes for small display or behavior tweaks.

- -

.pull-left

Float an element left

-{% highlight html linenos %} -

...

-{% endhighlight %} -{% highlight css linenos %} -.pull-left { - float: left; -} -{% endhighlight %} - -

.pull-right

Float an element right

-{% highlight html linenos %} -

...

-{% endhighlight %} -{% highlight css linenos %} -.pull-right { - float: right; -} -{% endhighlight %} - -

.muted

Change an element's color to #999

-{% highlight html linenos %} -

...

-{% endhighlight %} -{% highlight css linenos %} -.muted { - color: #999; -} -{% endhighlight %} - - -

.clearfix

Clear the float on any element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

-{% highlight html linenos %} -

...

-{% endhighlight %} -{% highlight css linenos %} -.clearfix { - &:before, - &:after { - content: " "; - display: table; - } - &:after { - clear: both; - } -} -{% endhighlight %} - - -

- - - -

-- cgit v1.2.3 From edb733ebc7db2d76bdac2611cbd83c5ae36f4fee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 8 May 2013 21:56:08 -0700 Subject: Super massive docs overhaul * Bring back the navbar up top * Pull the docs content back into separate pages because a 6.6k line docs file is just crazy * Recenter the page content and bring back affixed side nav (needs work) --- docs/components.html | 2537 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 2537 insertions(+) create mode 100644 docs/components.html (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html new file mode 100644 index 000000000..26552d517 --- /dev/null +++ b/docs/components.html @@ -0,0 +1,2537 @@ +--- +layout: default +title: Components +slug: components +lead: "Dozens of reusable components built to provide iconography, dropdowns, navigation, alerts, popovers, and much more." +--- + + + +

+ + +

Included glyphs

Bootstrap comes with all 160 of Glyphicons Halflings set, all available in font formats for easy coloring, sizing, and placement.

+ +

glyphicon-glass
glyphicon-music
glyphicon-search
glyphicon-envelope
glyphicon-heart
glyphicon-star
glyphicon-star-empty
glyphicon-user
glyphicon-film
glyphicon-th-large
glyphicon-th
glyphicon-th-list
glyphicon-ok
glyphicon-remove
glyphicon-zoom-in
glyphicon-zoom-out
glyphicon-off
glyphicon-signal
glyphicon-cog
glyphicon-trash
glyphicon-home
glyphicon-file
glyphicon-time
glyphicon-road
glyphicon-download-alt
glyphicon-download
glyphicon-upload
glyphicon-inbox
glyphicon-play-circle
glyphicon-repeat
glyphicon-refresh
glyphicon-list-alt
glyphicon-lock
glyphicon-flag
glyphicon-headphones
glyphicon-volume-off
glyphicon-volume-down
glyphicon-volume-up
glyphicon-qrcode
glyphicon-barcode
glyphicon-tag
glyphicon-tags
glyphicon-book
glyphicon-bookmark
glyphicon-print
glyphicon-camera
glyphicon-font
glyphicon-bold
glyphicon-italic
glyphicon-text-height
glyphicon-text-width
glyphicon-align-left
glyphicon-align-center
glyphicon-align-right
glyphicon-align-justify
glyphicon-list
glyphicon-indent-left
glyphicon-indent-right
glyphicon-facetime-video
glyphicon-picture
glyphicon-pencil
glyphicon-map-marker
glyphicon-adjust
glyphicon-tint
glyphicon-edit
glyphicon-share
glyphicon-check
glyphicon-move
glyphicon-step-backward
glyphicon-fast-backward
glyphicon-backward
glyphicon-play
glyphicon-pause
glyphicon-stop
glyphicon-forward
glyphicon-fast-forward
glyphicon-step-forward
glyphicon-eject
glyphicon-chevron-left
glyphicon-chevron-right
glyphicon-plus-sign
glyphicon-minus-sign
glyphicon-remove-sign
glyphicon-ok-sign
glyphicon-question-sign
glyphicon-info-sign
glyphicon-screenshot
glyphicon-remove-circle
glyphicon-ok-circle
glyphicon-ban-circle
glyphicon-arrow-left
glyphicon-arrow-right
glyphicon-arrow-up
glyphicon-arrow-down
glyphicon-share-alt
glyphicon-resize-full
glyphicon-resize-small
glyphicon-plus
glyphicon-minus
glyphicon-asterisk
glyphicon-exclamation-sign
glyphicon-gift
glyphicon-leaf
glyphicon-fire
glyphicon-eye-open
glyphicon-eye-close
glyphicon-warning-sign
glyphicon-plane
glyphicon-calendar
glyphicon-random
glyphicon-comment
glyphicon-magnet
glyphicon-chevron-up
glyphicon-chevron-down
glyphicon-retweet
glyphicon-shopping-cart
glyphicon-folder-close
glyphicon-folder-open
glyphicon-resize-vertical
glyphicon-resize-horizontal
glyphicon-hdd
glyphicon-bullhorn
glyphicon-bell
glyphicon-certificate
glyphicon-thumbs-up
glyphicon-thumbs-down
glyphicon-hand-right
glyphicon-hand-left
glyphicon-hand-up
glyphicon-hand-down
glyphicon-circle-arrow-right
glyphicon-circle-arrow-left
glyphicon-circle-arrow-up
glyphicon-circle-arrow-down
glyphicon-globe
glyphicon-wrench
glyphicon-tasks
glyphicon-filter
glyphicon-briefcase
glyphicon-fullscreen
glyphicon-dashboard
glyphicon-paperclip
glyphicon-heart-empty
glyphicon-link
glyphicon-phone
glyphicon-pushpin
glyphicon-euro
glyphicon-usd
glyphicon-gbp
glyphicon-sort
glyphicon-sort-by-alphabet
glyphicon-sort-by-alphabet-alt
glyphicon-sort-by-order
glyphicon-sort-by-order-alt
glyphicon-sort-by-attributes
glyphicon-sort-by-attributes-alt
glyphicon-unchecked
glyphicon-expand
glyphicon-collapse
glyphicon-collapse-top

+ +

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creator have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.

+ + +

How to use

Add the appropriate class to any inline element. All icon classes are prefixed with glyphicon- for easy styling. To use, place the following code just about anywhere:

+{% highlight html %} + +{% endhighlight %} +

Want to change the icon color? Just change the color of the parent element.

When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.

+ + +

Icon examples

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

+ +

Buttons

+ +

Button group in a button toolbar

+ +

+{% highlight html %} + +{% endhighlight %} + +

Accessibility

Keep in mind that using icons without any additional content means the icons are not represented to screen reader users.

+ +

Dropdown in a button group

+ User + + +

+{% highlight html %} +

+ User + + +

+{% endhighlight %} + +

Large button

+ Star +

+{% highlight html %} + Star +{% endhighlight %} + +

Small button

+ +

+{% highlight html %} + +{% endhighlight %} + + +

Navigation

+{% highlight html %} +

+{% endhighlight %} + +

Form fields

+ +{% highlight html %} +

+ Email address +

+ + +

+{% endhighlight %} + +

+ + + + +

+ +

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

+ +

Example

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

+ +

+{% highlight html %} + +{% endhighlight %} + +

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

+{% highlight html %} + +{% endhighlight %} + +

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

+ +

+{% highlight html %} + +{% endhighlight %} + +

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

+ +

Default

+ +

Dropup

+ +

Left submenu

+ +

+{% highlight html %} + +{% endhighlight %} + +

+ + + + +

+ +

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

+ +

Basic button group

Wrap a series of buttons with .btn in .btn-group.

+ + + +

+{% highlight html %} +

+ + + +

+{% endhighlight %} + + +

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

+ +

+{% highlight html %} + +{% endhighlight %} + +

Nested button groups

Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.

+ + + + +

+ + +

+ +

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.

+ + + + +

+{% highlight html %} +

+ ... +

+{% endhighlight %} + +

Justified button groups

Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

+ Left + Right + Middle +

+{% highlight html %} +

+ ... +

+{% endhighlight %} + +

+ + + + +

+ +

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

+ +

Plugin dependency

Button dropdowns require the dropdown plugin to be included in your version of Bootstrap.

+ +

Single button dropdowns

Turn a button into dropdown toggle with some basic markup changes.

+ +

+{% highlight html %} + +

+ + +

+{% endhighlight %} + +

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

+ +

+{% highlight html %} + +

+ + + +

+{% endhighlight %} + +

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

+ +

+{% highlight html %} + +

+ + +

+{% endhighlight %} + +

Dropup buttons

Trigger dropdown menus above elements by adding .dropup to the parent.

+ +

+{% highlight html %} +

+ + + +

+{% endhighlight %} + +

+ + + + +

+ + +

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

+ +

Tabs

Note the .nav-tabs class requires the .nav base class.

+{% highlight html %} +

+{% endhighlight %} + +

Pills

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

+{% highlight html %} +

+{% endhighlight %} +

Pills are also vertically stackable. Just add .nav-stacked.

+{% highlight html %} +

+ ... + +{% endhighlight %} + +

Options

+ +

Justified links

Easily make tabs or pills equal widths of their parent with .nav-justified.

+
+

+{% highlight html %} +

+ ... + +

+ ... + +{% endhighlight %} + +

Disabled state

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects.

+ +

Link functionality not impacted

This class will only change the <a>'s appearance, not its functionality. Use custom JavaScript to disable links here.

+ +

+{% highlight html %} +

Disabled link

+{% endhighlight %} + + +

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.

+ + +

Dropdowns

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

+ +

Tabs with dropdowns

+{% highlight html %} +

+ + Dropdown + +
+

+{% endhighlight %} + +

Pills with dropdowns

+{% highlight html %} +

+ + Dropdown + +
+

+{% endhighlight %} + +

+ + + + +

+ +

+{% highlight html %} + +{% endhighlight %} + +

Navbar components

+ + +

A simple link to show your brand or project name only requires an anchor tag.

+ +

+{% highlight html %} + +{% endhighlight %} + + +

Nav items are simple to add via unordered lists.

+ +

+{% highlight html %} + +{% endhighlight %} + + +

+ + + + + + + + + +

+{% highlight html %} + +{% endhighlight %} + + +

For buttons not residing in a <form>, add this class to vertically center buttons within a navbar.

+ +

+ + +

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.

+ +

+{% highlight html linenos %} + +{% endhighlight %} + + +

For folks using standard links that are not within the regular navbar navigation component, use the .navbar-link class to add the proper colors for the default and inverse navbar options.

+ +

+{% highlight html linenos %} + +{% endhighlight %} + + +

Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

+ + +

Optional display variations

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar. These will also remove rounded corners.

+ + +

Add .navbar-fixed-top.

+ +{% highlight html %} + +{% endhighlight %} + +

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:

+{% highlight css %} +body { + padding-top: 64px; +} +@media screen and (min-width: 768px) { + body { + padding-top: 60px; + } +} +{% endhighlight %} +

Make sure to include this after the core Bootstrap CSS.

+ + +

Add .navbar-fixed-bottom instead.

+ +{% highlight html %} + +{% endhighlight %} + +

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. The navbar itself has a height of 54px by default. At 768px and above, its height shrinks to 50px. Try out your own values or use our snippet below:

+{% highlight css %} +body { + padding-bottom: 64px; +} +@media screen and (min-width: 768px) { + body { + padding-bottom: 60px; + } +} +{% endhighlight %} +

Make sure to include this after the core Bootstrap CSS.

+ + +

Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-* classes, you do not need to change any padding on the body.

+ +{% highlight html %} + +{% endhighlight %} + + + +

To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .navbar-toggle.

+ +

+{% highlight html %} + +{% endhighlight %} + +

Plugin dependency

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

+ + +

Inverted variation

Modify the look of the navbar by adding .navbar-inverse.

+ +

+{% highlight html %} + +{% endhighlight %} + +

+ + + + +

+ +

Indicate the current page's location within a navigational hierarchy.

Separators are automatically added in CSS through `:after` and `content`.

+ + + +

+{% highlight html %} + +{% endhighlight %} +

+ + + + +

+ +

Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.

+ +

Standard pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

+{% highlight html %} +

+{% endhighlight %} + +

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

+{% highlight html %} +

+{% endhighlight %} +

You can optionally swap out active or disabled anchors for <span> to remove click functionality while retaining intended styles.

+{% highlight html %} +

+{% endhighlight %} + + +

Sizes

Fancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes.

+{% highlight html %} +

... +

... +{% endhighlight %} + + +

Pager

Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines.

+ +

Default example

By default, the pager centers links.

+ +

+{% highlight html %} + +{% endhighlight %} + +

Aligned links

Alternatively, you can align each link to the sides:

+ +

+{% highlight html %} + +{% endhighlight %} + + +

Optional disabled state

Pager links also use the general .disabled utility class from the pagination.

+ +

+{% highlight html %} + +{% endhighlight %} +

+ + + + +

+ +

Example

Example heading New

+{% highlight html %} +

Example heading New

+{% endhighlight %} + +

Available variations

Add any of the below mentioned modifier classes to change the appearance of a label.

+ Default + Success + Warning + Danger + Info +

+{% highlight html %} +Default +Success +Warning +Danger +Info +{% endhighlight %} + +

+ + + + +

+ +

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

+ +

+ Inbox 42 +

+{% highlight html %} +Inbox 42 +{% endhighlight %} + +

Self collapsing

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

+ +

Cross-browser compatibility

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

+ +

Adapts to active nav states

Built-in styles are included for placing badges in active states in pill and list navigations.

+
+

+{% highlight html %} +

+ + 42 + Home + +

+{% endhighlight %} +

+ + + + +

+ + +

Jumbotron

A lightweight, flexible component to showcase key 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.

+{% highlight html %} +

Hello, world!

...

+{% endhighlight %} + + +

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 as most other components (with additional styles).

+ +

+{% highlight html %} + +{% endhighlight %} +

+ + + + +

+ +

Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

+ +

Default thumbnails

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

+ +

+{% highlight html %} +

+ +

+ ... +

+{% endhighlight %} + +

Custom content thumbnails

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

Thumbnail label

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

Thumbnail label

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

Thumbnail label

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

+{% highlight html %} +

Thumbnail label

...