Merge branch '2.0.2-wip' of https://github.com/twitter/bootstrap into features/warning_progress_bar

1 files changed, 265 insertions, 26 deletions

diff --git a/docs/components.html b/docs/components.html
index d9b809d05..42de78cd6 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -98,6 +98,7 @@
         </ul>
       </li>
       <li><a href="#labels">Labels</a></li>
+      <li><a href="#badges">Badges</a></li>
       <li><a href="#typography">Typography</a></li>
       <li><a href="#thumbnails">Thumbnails</a></li>
       <li><a href="#alerts">Alerts</a></li>
@@ -175,9 +176,8 @@
       <h3>Checkbox and radio flavors</h3>
       <p>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 <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
       <p><a class="btn js-btn" href="./javascript.html#buttons">Get the javascript &raquo;</a></p>
-      <hr>
-      <h4 class="muted">Heads up</h4>
-      <p class="muted">CSS for button groups is in a separate file, button-groups.less.</p>
+      <h3>Dropdowns in button groups</h3>
+      <p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
     </div>
   </div>
 </section>
@@ -188,12 +188,13 @@
 ================================================== -->
 <section id="buttonDropdowns">
   <div class="page-header">
-    <h1>Buttons dropdowns <small>Contextual dropdown menus built on button groups</small></h1>
+    <h1>Button dropdown menus <small>Built on button groups to provide contextual menus</small></h1>
   </div>
 
+  <h2>Button dropdowns</h2>
   <div class="row">
     <div class="span4">
-      <h3>Button dropdowns</h3>
+      <h3>Overview and examples</h3>
       <p>Use any button to trigger a dropdown menu by placing it within a <code>.btn-group</code> and providing the proper menu markup.</p>
       <div class="btn-toolbar" style="margin-top: 18px;">
         <div class="btn-group">
@@ -248,6 +249,16 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
+        <div class="btn-group">
+          <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#">Inverse <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
       </div><!-- /btn-toolbar -->
       <hr>
       <p><span class="label label-info">Heads up!</span> Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.</p>
@@ -268,10 +279,14 @@
 </pre>
     </div>
   </div>
+  <div class="alert alert-info">
+    <strong>Heads up!</strong> In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
+  </div>
 
+  <h2>Split button dropdowns</h2>
   <div class="row">
     <div class="span4">
-      <h3>Split button dropdowns</h3>
+      <h3>Overview and examples</h3>
       <p>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.</p>
       <div class="btn-toolbar" style="margin-top: 18px;">
         <div class="btn-group">
@@ -331,7 +346,41 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
-      </div>
+        <div class="btn-group">
+          <a class="btn btn-inverse" href="#">Inverse</a>
+          <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div><!-- /btn-toolbar -->
+      <h3>Right aligned menus</h3>
+      <p>Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.</p>
+      <div class="btn-toolbar">
+        <div class="btn-group">
+          <a class="btn" href="#">Right</a>
+          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu pull-right">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div><!-- /btn-toolbar -->
+<pre class="prettyprint linenums">
+&lt;div class="btn-group"&gt;
+  ...
+  &lt;ul class="dropdown-menu pull-right"&gt;
+    &lt;!-- dropdown menu links --&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
     </div>
     <div class="span8">
       <h3>Example markup</h3>
@@ -347,6 +396,44 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
+      <h3>Dropup menus</h3>
+      <p>Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of <code>.dropdown-menu</code>. It will flip the direction of the <code>.caret</code> and reposition the menu itself to move from the bottom up instead of top down.</p>
+      <div class="btn-toolbar" style="margin-top: 9px;">
+        <div class="btn-group dropup">
+          <a class="btn" href="#">Dropup</a>
+          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group dropup">
+          <a class="btn primary" href="#">Right dropup</a>
+          <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
+          <ul class="dropdown-menu pull-right">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div>
+<pre class="prettyprint linenums">
+&lt;div class="btn-group dropup"&gt;
+  &lt;a class="btn" href="#"&gt;Dropup&lt;/a&gt;
+  &lt;a class="btn dropdown-toggle" data-toggle="dropdown" href="#"&gt;
+    &lt;span class="caret"&gt;&lt;/span&gt;
+  &lt;/a&gt;
+  &lt;ul class="dropdown-menu"&gt;
+    &lt;!-- dropdown menu links --&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;
+</pre>
+
     </div>
   </div>
 </section>
@@ -453,7 +540,7 @@
       <h3>Tabs with dropdowns</h3>
       <ul class="nav nav-tabs">
         <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
+        <li><a href="#">Help</a></li>
         <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
           <ul class="dropdown-menu">
@@ -464,6 +551,16 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
+          <ul class="dropdown-menu bottom-up pull-right">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-tabs"&gt;
@@ -485,7 +582,7 @@
       <h3>Pills with dropdowns</h3>
       <ul class="nav nav-pills">
         <li class="active"><a href="#">Home</a></li>
-        <li><a href="#">Profile</a></li>
+        <li><a href="#">Help</a></li>
         <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
           <ul class="dropdown-menu">
@@ -496,6 +593,16 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
+          <ul class="dropdown-menu bottom-up pull-right">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav nav-pills"&gt;
@@ -521,8 +628,18 @@
       <h3>Application-style navigation</h3>
       <p>Nav lists provide a simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.</p>
       <p>Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.</p>
+      <hr>
       <h4>With icons</h4>
       <p>Nav lists are also easy to equip with icons. Add the proper <code>&lt;i&gt;</code> tag with class and you're set.</p>
+      <h4>Horizontal dividers</h4>
+      <p>Add a horizontal divider by creating an empty list item with the class <code>.divider</code>, like so:</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-list"&gt;
+  ...
+  &lt;li class="divider"&gt;&lt;/li&gt;
+  ...
+&lt;/ul&gt;
+</pre>
     </div>
     <div class="span4">
       <h3>Example nav list</h3>
@@ -536,6 +653,7 @@
           <li class="nav-header">Another list header</li>
           <li><a href="#">Profile</a></li>
           <li><a href="#">Settings</a></li>
+          <li class="divider"></li>
           <li><a href="#">Help</a></li>
         </ul>
       </div> <!-- /well -->
@@ -566,6 +684,7 @@
           <li class="nav-header">Another list header</li>
           <li><a href="#"><i class="icon-user"></i> Profile</a></li>
           <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
+          <li class="divider"></li>
           <li><a href="#"><i class="icon-flag"></i> Help</a></li>
         </ul>
       </div> <!-- /well -->
@@ -754,7 +873,7 @@
   <p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
   <div class="navbar">
     <div class="navbar-inner">
-      <div class="container" style="width: auto;">
+      <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
@@ -816,13 +935,24 @@
 &lt;/div&gt;
 </pre>
       <h3>Fixed navbar</h3>
-      <p>To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.</p>
+      <p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
+      <div class="row">
+        <div class="span4">
 <pre class="prettyprint linenums">
 &lt;div class="navbar navbar-fixed-top"&gt;
   ...
 &lt;/div&gt;
 </pre>
-      <p>In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
+        </div><!--/span-->
+        <div class="span4">
+<pre class="prettyprint linenums">
+&lt;div class="navbar navbar-fixed-bottom"&gt;
+  ...
+&lt;/div&gt;
+</pre>
+        </div><!--/span-->
+      </div><!--/row-->
+      <p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of apdding to the <code>&lt;body&gt;</code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
       <h3>Brand name</h3>
       <p>A simple link to show your brand or project name only requires an anchor tag.</p>
 <pre class="prettyprint linenums">
@@ -830,8 +960,14 @@
   Project name
 &lt;/a&gt;
 </pre>
-      <h3>Search form</h3>
-      <p>Search forms receive custom styles in the navbar with the <code>.navbar-search</code> class. Include <code>.pull-left</code> or <code>.pull-right</code> on the <code>form</code> to align it.</p>
+      <h3>Forms in navbar</h3>
+      <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
+<pre class="prettyprint linenums">
+&lt;form class="navbar-form pull-left"&gt;
+  &lt;input type="text" class="span2"&gt;
+&lt;/form&gt;
+</pre>
+      <p>For a more customized search form, add the <code>.navbar-search</code> class to receive specialized styles in the navbar.</p>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-search pull-left"&gt;
   &lt;input type="text" class="search-query" placeholder="Search"&gt;
@@ -890,8 +1026,8 @@
 </pre>
       <h3>Component alignment</h3>
       <p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
-      <h3>Adding dropdowns</h3>
-      <p>Adding dropdowns to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.</p>
+      <h3>Adding dropdown menus</h3>
+      <p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html/#dropdown">our javascript plugin</a>.</p>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   &lt;li class="dropdown"&gt;
@@ -908,6 +1044,9 @@
 &lt;/ul&gt;
 </pre>
       <p><a class="btn" href="./javascript.html#dropdowns">Get the javascript &rarr;</a></p>
+      <hr>
+      <h3>Text in the navbar</h3>
+      <p>Wrap strings of text in a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
     </div><!-- /.span -->
   </div><!-- /.row -->
 
@@ -953,9 +1092,7 @@
   &lt;li&gt;
     &lt;a href="#"&gt;Library&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;
   &lt;/li&gt;
-  &lt;li class="active"&gt;
-    &lt;a href="#"&gt;Data&lt;/a&gt;
-  &lt;/li&gt;
+  &lt;li class="active"&gt;Data&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
     </div>
@@ -1144,12 +1281,116 @@
           <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
         </td>
       </tr>
+      <tr>
+        <td>
+          <span class="label label-inverse">Inverse</span>
+        </td>
+        <td>
+          <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
+        </td>
+      </tr>
     </tbody>
   </table>
 </section>
 
 
 
+<!-- Badges
+================================================== -->
+<section id="badges">
+  <div class="page-header">
+    <h1>Badges <small>Indicators and unread counts</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3>About</h3>
+      <p>Badges are small, simple components for displaying an indicator or count of some sort. They're commonly found in email clients like Mail.app or on mobile apps for push notifications.</p>
+    </div><!-- /.span -->
+    <div class="span8">
+      <h3>Available classes</h3>
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Example</th>
+            <th>Markup</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              Default
+            </td>
+            <td>
+              <span class="badge">1</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Success
+            </td>
+            <td>
+              <span class="badge badge-success">2</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Warning
+            </td>
+            <td>
+              <span class="badge badge-warning">4</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Error
+            </td>
+            <td>
+              <span class="badge badge-error">6</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-error"&gt;1&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Info
+            </td>
+            <td>
+              <span class="badge badge-info">8</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Inverse
+            </td>
+            <td>
+              <span class="badge badge-inverse">10</span>
+            </td>
+            <td>
+              <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
+</section>
+
+
+
 <!-- Typographic components
 ================================================== -->
 <section id="typography">
@@ -1188,8 +1429,11 @@
       <p>A simple shell for an <code>h1</code> to appropratiely space out and segment sections of content on a page. It can utilize the <code>h1</code>'s default <code>small</code>, element as well most other components (with additional styles).</p>
     </div>
     <div class="span8">
+      <div class="page-header">
+        <h1>Example page header <small>Subtext for header</small></h1>
+      </div>
 <pre class="prettyprint linenums">
-&lt;div class="page-haeder"&gt;
+&lt;div class="page-header"&gt;
   &lt;h1&gt;Example page header&lt;/h1&gt;
 &lt;/div&gt;
 </pre>
@@ -1525,7 +1769,7 @@
 ================================================== -->
 <section id="misc">
   <div class="page-header">
-    <h1>Miscellaneous <small>Wells, badges, and close icon</small></h1>
+    <h1>Miscellaneous <small>Lightweight utility components</small></h1>
   </div>
   <div class="row">
     <div class="span4">
@@ -1540,11 +1784,6 @@
 &lt;/div&gt;
 </pre>
     </div><!--/span-->
-    <div class="span4" style="display: none;">
-      <h2>Badges</h2>
-      <p>Use a badge on an element for an unread count or as a simple indicator.</p>
-<pre class="prettyprint linenums">&lt;span class="badge"&gt;3&lt;/div&gt;</pre>
-    </div><!--/span-->
     <div class="span4">
       <h2>Close icon</h2>
       <p>Use the generic close icon for dismissing content like modals and alerts.</p>