Bootstrap

-- cgit v1.2.3 From df869f1eb074f5c2baaaf744f333c5f5d6ce0bee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 21:45:37 -0700 Subject: fix grids --- 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 15df4f5ce..63cfac9ae 100644 --- a/docs/components.html +++ b/docs/components.html @@ -27,7 +27,7 @@ - +

Bootstrap

-- cgit v1.2.3 From c1c7528dd9f0617cb65bc5fac7aa6b2cfc2eb822 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 7 Jun 2012 21:48:03 -0700 Subject: drop the side nav, restore topbar --- docs/components.html | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 63cfac9ae..8716963bd 100644 --- a/docs/components.html +++ b/docs/components.html @@ -29,6 +29,50 @@ + +

+ + Bootstrap +

+ Overview +
+ Scaffolding +
+ Base CSS +
+ Components +
+ Javascript plugins +
+ Using LESS +
+ Customize +
+ Examples +

Bootstrap

Date: Thu, 7 Jun 2012 22:10:36 -0700 Subject: restore top navs entirely --- docs/components.html | 35 +++++++++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 4 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 8716963bd..afd8d60f4 100644 --- a/docs/components.html +++ b/docs/components.html @@ -33,7 +33,7 @@ ================================================== -->

Bootstrap

- Scaffolding -
- Global styles
- Grid system
- Fluid grid system
- Customizing
- Layouts
- Responsive design
-
- Base CSS -
- Typography
- Code
- Tables
- Forms
- Buttons
- Icons by Glyphicons
-
- Components -
- Button groups
- Button dropdowns
- Nav, tabs, pills
- Navbar
- Breadcrumbs
- Pagination
- Labels
- Badges
- Typography
- Thumbnails
- Alerts
- Progress bars
- Miscellaneous
-
- Javascript -
- All plugins
- Modal
- Dropdown
- Scrollspy
- Tab
- Tooltip
- Popover
- Alert
- Button
- Collapse
- Carousel
- Typeahead
-
- LESS -
- Built with Less
- Variables
- Mixins
- Compiling Bootstrap
-
- Customize -
- Examples -

-- cgit v1.2.3 From f2e39233f54a733df54d5d998abd79233e0f143f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 15:12:02 -0700 Subject: rewrite alerts and progress bars sections --- docs/components.html | 238 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 156 insertions(+), 82 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index fc8857041..312e03c20 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1579,50 +1579,68 @@

Alerts Styles for success, warning, and error messages

Lightweight defaults

- -

Rewritten base class

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

Single alert message

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

Goes great with javascript

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

Get the plugin »

- -

Example alerts

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

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

Default alert

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

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

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

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

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

- -

Warning!

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

+ +

Dismiss buttons

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

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

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

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

+ +

Dismiss alerts via javascript

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

+ + +

Options

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

+ +

Warning!

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

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

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

+ +

+ + +

Contextual alternatives

Add optional classes to change an alert's connotation.

Error or danger

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

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

 <div class="alert alert-error">
@@ -1631,9 +1649,11 @@

Success

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

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

 <div class="alert alert-success">
@@ -1642,9 +1662,11 @@

Information

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

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

 <div class="alert alert-info">
@@ -1667,78 +1689,116 @@
 
   Basic
   Default progress bar with a vertical gradient.
-  
-    
+  
+    
+      
+    
   
  <div class="progress">
-  <div class="bar"
-       style="width: 60%;"></div>
+  <div class="bar" style="width: 60%;"></div>
 </div>
 
 
   Striped
-  Uses a gradient to create a striped effect (no IE).
-  
-    
+  Uses a gradient to create a striped effect. Not available in IE7-8.
+  
+    
+      
+    
   
  <div class="progress progress-striped">
-  <div class="bar"
-       style="width: 20%;"></div>
+  <div class="bar" style="width: 20%;"></div>
 </div>
 
 
   Animated
-  Takes the striped example and animates it (no IE).
-  
-    
+  Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.
+  
+    
+      
+    
   
 -<div class="progress progress-striped
-     active">
-  <div class="bar"
-       style="width: 40%;"></div>
+<div class="progress progress-striped active">
+  <div class="bar" style="width: 40%;"></div>
 </div>
 
 
-  Options and browser support
+
+  
+
+
+  Options
 
   Additional colors
   Progress bars use some of the same button and alert classes for consistent styles.
-  
-    
-  
-  
-    
-  
-  
-    
-  
-  
-    
+  
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
   
++<div class="progress progress-info">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
 
   Striped bars
   Similar to the solid colors, we have varied striped progress bars.
-  
-    
-  
-  
-    
-  
-  
-    
-  
-  
-    
+  
+    
+      
+    
+    
+      
+    
+    
+      
+    
+    
+      
+    
   
++<div class="progress progress-info progress-striped">
+  <div class="bar" style="width: 20%"></div>
+</div>
+<div class="progress progress-success progress-striped">
+  <div class="bar" style="width: 40%"></div>
+</div>
+<div class="progress progress-warning progress-striped">
+  <div class="bar" style="width: 60%"></div>
+</div>
+<div class="progress progress-danger progress-striped">
+  <div class="bar" style="width: 80%"></div>
+</div>
+
+
 
-  Behavior
-  Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.
-  If you use the .active class, your .progress-striped progress bars will animate the stripes left to right.
+  
 
-  Browser support
+
+  Browser support
   Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.
   Opera and IE do not support animations at this time.
 
@@ -1757,21 +1817,33 @@
 
   Wells
   Use the well as a simple effect on an element to give it an inset effect.
-  
-    Look, I'm in a well!
+  
+    
+      Look, I'm in a well!
+    
   
  <div class="well">
   ...
 </div>
 
-  Optional classes
+  Optional classes
   Control padding and rounded corners with two optional modifier classes.
+  
+    
+      Look, I'm in a well!
+    
+  
  <div class="well well-large">
   ...
 </div>
 
+  
+    
+      Look, I'm in a well!
+    
+  
  <div class="well well-small">
   ...
@@ -1779,7 +1851,9 @@
 
   Close icon
   Use the generic close icon for dismissing content like modals and alerts.
-  
+  
+    
+  
 <button class="close">&times;</button>
   iOS devices require an href="#" for click events if you rather use an anchor.
 <a class="close" href="#">&times;</a>
-- 
cgit v1.2.3


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

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 312e03c20..5fae8d4b5 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1398,11 +1398,16 @@
   
     Typographic components Page header and hero unit for segmenting content
   
-  Hero unit
 
-  Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
-  Markup
-  Wrap your content in a div like so:
+  Hero unit
+  A lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
+  
+    
+      Hello, world!
+      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
+      Learn more
+    
+  
  <div class="hero-unit">
   <h1>Heading</h1>
@@ -1415,16 +1420,7 @@
 </div>
 
 
-  
-    
-      Hello, world!
-      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
-      Learn more
-    
-  
-
   Page header
-
   A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
   
     
-- 
cgit v1.2.3


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

---
 docs/components.html | 229 ++++++++++++++++++++++++++++++---------------------
 1 file changed, 137 insertions(+), 92 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 5fae8d4b5..5ff824476 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1077,34 +1077,26 @@
     Breadcrumbs 
   
 
-  Why use them
-  Breadcrumb navigation is used as a way to show users where they are within an app or a site, but not for primary navigation. Keep their use sparse and succinct to be most effective.
-
-  Examples
+  Examples
   A single example shown as it might be displayed across multiple pages.
-  
-    Home
-  
-  
-    Home /
-    Library
-  
-  
-    Home /
-    Library /
-    Data
-  
-
-  Markup
-  HTML is your standard unordered list with links.
+  
+    
+      Home
+    
+    
+      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> <span class="divider">/</span></li>
+  <li><a href="#">Library</a> <span class="divider">/</span></li>
   <li class="active">Data</li>
 </ul>
 
@@ -1120,85 +1112,119 @@
     Pagination Two options for paging through content
   
 
-  Multicon-page pagination
-
-  When to use
-  Ultra simplistic and minimally styled pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
-  Stateful page links
-  Links are customizable and work in a number of circumstances with the right class. .disabled for unclickable links and .active for current page.
-  Flexible alignment
-  Add either of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.
-
-  Examples
-  The default pagination component is flexible and works in a number of variations.
-  
-    
-      «
-      1
-      2
-      3
-      4
-      »
-    
-  
-  
-    
-      «
-      10
-      11
-      12
-      »
-    
-  
-  
-    
-      «
-      10
-      ...
-      20
-      »
-    
-  
-  
-    
-      1
-      2
-      3
-      4
-      5
-    
+  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.
+  
+    
+      
+        «
+        1
+        2
+        3
+        4
+        5
+        »
+      
+    
   
-
-  Markup
-  Wrapped in a <div>, pagination is just a <ul>.
  <div class="pagination">
   <ul>
     <li><a href="#">Prev</a></li>
-    <li class="active">
-      <a href="#">1</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>
+    <li><a href="#">Next</a></li>
   </ul>
 </div>
 
 
-  Pager For quick previous and next links
 
-  About pager
-  The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.
-  Optional disabled state
-  Pager links also use the general .disabled class from the pagination.
+  
+
+
+  Options
+
+  Disabled and active states
+  Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.
+  
+    
+      
+        «
+        1
+        2
+        3
+        4
+        5
+        »
+     
+    
+  
++<div class="pagination ">
+  <ul>
+    <li class="disabled"><a href="#">Prev</a></li>
+    <li class="active"><a href="#">1</a></li>
+    ...
+  </ul>
+</div>
+
+
+  Alignment
+  Add one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right.
+  
+    
+      
+        «
+        1
+        2
+        3
+        4
+        5
+        »
+     
+    
+  
++<div class="pagination pagination-centered">
+  ...
+</div>
+
+  
+    
+      
+        «
+        1
+        2
+        3
+        4
+        5
+        »
+      
+    
+  
++<div class="pagination pagination-right">
+  ...
+</div>
+
+
+
+  
+
+
+  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.
-  
-    Previous
-    Next
-  
+  
+    
+      Previous
+      Next
+    
+  
  <ul class="pager">
   <li>
@@ -1212,10 +1238,12 @@
 
   Aligned links
   Alternatively, you can align each link to the sides:
-  
-    ← Older
-    Newer →
-  
+  
+    
+      ← Older
+      Newer →
+    
+  
  <ul class="pager">
   <li class="previous">
@@ -1225,6 +1253,23 @@
     <a href="#">Newer &rarr;</a>
   </li>
 </ul>
+
+
+  Optional disabled state
+  Pager links also use the general .disabled utility class from the pagination.
+  
+    
+      ← Older
+      Newer →
+    
+  
++<ul class="pager">
+  <li class="previous disabled">
+    <a href="#">&larr; Older</a>
+  </li>
+  ...
+</ul>
 
 
 
-- 
cgit v1.2.3


From 017b7cb804106a14d1a7b6f6b02109dddd4926a2 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 10 Jun 2012 20:39:00 -0700
Subject: rewrite the navbar section

---
 docs/components.html | 297 +++++++++++++++++++++++++++++++--------------------
 1 file changed, 181 insertions(+), 116 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 5ff824476..933d89a36 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -896,105 +896,213 @@
   
     Navbar
   
-  Static navbar example
-  An example of a static (not fixed to the top) navbar with project name, navigation, and search form.
-  
-    
-      
-        
-          
-          
-          
-        
-        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
-              
-            
-          
-        

-      
-    

-  

 
 
-  Navbar scaffolding
-  The navbar requires only a few divs to structure it well for static or fixed display.
+  Basic navbar
+  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.
+  
+    
+      
+        Title
+        
+          Home
+          Link
+          Link
+        
+      
+    
+  
  <div class="navbar">
   <div class="navbar-inner">
-    <div class="container">
-      ...
-    </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>
 </div>
 
-  Fixed navbar
-  Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.
+
+
+  
+
+
+  Navbar components
+
+  Brand
+  A simple link to show your brand or project name only requires an anchor tag.
 -<div class="navbar navbar-fixed-top">
-  ...
-</div>
+<a class="brand" href="#">Project name</a>
 
+
+  Nav links
+  Nav items are simple to add via unordered lists.
 -<div class="navbar navbar-fixed-bottom">
-  ...
-</div>
+<ul class="nav">
+  <li class="active">
+    <a href="#">Home</a>
+  </li>
+  <li><a href="#">Link</a></li>
+  <li><a href="#">Link</a></li>
+</ul>
 
-
-  When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
-  Brand name
-  A simple link to show your brand or project name only requires an anchor tag.
+  You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
 -<a class="brand" href="#">
-  Project name
-</a>
+<ul class="nav">
+  ...
+  <li class="divider-vertical"></li>
+  ...
+</ul>
 
-  Forms in navbar
+
+  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="navbar-form pull-left">
   <input type="text" class="span2">
 </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>
 
-  Optional responsive variation
-  Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
+
+  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.
+
+
+  
+
+
+  Fixed navigation
+  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.
+  
+    
+      
+        
+          Title
+          
+            Home
+            Link
+            Link
+          
+        
+      
+    
+  
++<div class="navbar navbar-fixed-top">
+  ...
+</div>
+
+
+  Fixed to bottom
+  Add .navbar-fixed-bottom instead.
+  
+    
+      
+        
+          Title
+          
+            Home
+            Link
+            Link
+          
+        
+      
+    
+  
++<div class="navbar navbar-fixed-bottom">
+  ...
+</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.
+  
+    
+      
+        
+          
+            
+            
+            
+          
+          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">
@@ -1023,49 +1131,6 @@
     Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
   
 
-  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 this between links:
--<ul class="nav">
-  ...
-  <li class="divider-vertical"></li>
-  ...
-</ul>
-
-  Component alignment
-  To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
-  Adding dropdown menus
-  Adding dropdowns and dropups to the nav is super simple, but does require the use of our 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>
-
-  Get the javascript →
-  
-  Text in the navbar
-  Wrap strings of text in a <.navbar-text>, usually on a <p> tag for proper leading and color.
-
 
 
 
-- 
cgit v1.2.3


From 081a07c168b095c2e9d34e1a77164cf9ac21f449 Mon Sep 17 00:00:00 2001
From: Mark Otto 
Date: Sun, 10 Jun 2012 20:50:49 -0700
Subject: updated button groups section

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

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index 933d89a36..4d7b6d3bb 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -110,6 +110,7 @@
 
 
 
+
 
 
@@ -117,10 +118,9 @@
     Button groups Join buttons for more toolbar-like functionality
   
 
-  Button groups
-  Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.
-  Best practices
-  We recommend the following guidelines for using button groups and toolbars:
+
+  Description and best practices
+  Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements. We recommend the following guidelines for using button groups and toolbars:
   
     Always use the same element in a single button group, <a> or <button>.
     Don't mix buttons of different colors in the same button group.
@@ -128,10 +128,17 @@
   
   Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.
 
-  Default example
-  Here's how the HTML looks for a standard button group built with anchor tag buttons:
-  
-    
+
+  
+
+
+  Examples and variations
+  Two basic options, along with two more specific variations.
+
+  Basic button group
+  Wrap a series of buttons with .btn in .btn-group.
+  
+    
       
       
       
@@ -144,22 +151,25 @@
   <button class="btn">3</button>
 </div>

Toolbar example

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