Merge branch '2.0.1-wip' of https://github.com/twitter/bootstrap into 2.0.1-wip

Conflicts:
	docs/assets/bootstrap.zip

18 files changed, 492 insertions, 104 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index ca2768c6e..2041e410b 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index c8c630296..d01791cc5 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -205,40 +205,40 @@
   .row-fluid > [class*="span"]:first-child {
     margin-left: 0;
   }
-  .row-fluid .span1 {
+  .row-fluid > .span1 {
     width: 5.801104972%;
   }
-  .row-fluid .span2 {
+  .row-fluid > .span2 {
     width: 14.364640883%;
   }
-  .row-fluid .span3 {
+  .row-fluid > .span3 {
     width: 22.928176794%;
   }
-  .row-fluid .span4 {
+  .row-fluid > .span4 {
     width: 31.491712705%;
   }
-  .row-fluid .span5 {
+  .row-fluid > .span5 {
     width: 40.055248616%;
   }
-  .row-fluid .span6 {
+  .row-fluid > .span6 {
     width: 48.618784527%;
   }
-  .row-fluid .span7 {
+  .row-fluid > .span7 {
     width: 57.182320438000005%;
   }
-  .row-fluid .span8 {
+  .row-fluid > .span8 {
     width: 65.74585634900001%;
   }
-  .row-fluid .span9 {
+  .row-fluid > .span9 {
     width: 74.30939226%;
   }
-  .row-fluid .span10 {
+  .row-fluid > .span10 {
     width: 82.87292817100001%;
   }
-  .row-fluid .span11 {
+  .row-fluid > .span11 {
     width: 91.436464082%;
   }
-  .row-fluid .span12 {
+  .row-fluid > .span12 {
     width: 99.999999993%;
   }
   input.span1, textarea.span1, .uneditable-input.span1 {
@@ -314,6 +314,10 @@
   .navbar .nav > .divider-vertical {
     display: none;
   }
+  .navbar .nav .nav-header {
+    color: #999999;
+    text-shadow: none;
+  }
   .navbar .nav > li > a, .navbar .dropdown-menu a {
     padding: 6px 15px;
     font-weight: bold;
@@ -486,40 +490,40 @@
   .row-fluid > [class*="span"]:first-child {
     margin-left: 0;
   }
-  .row-fluid .span1 {
+  .row-fluid > .span1 {
     width: 5.982905983%;
   }
-  .row-fluid .span2 {
+  .row-fluid > .span2 {
     width: 14.529914530000001%;
   }
-  .row-fluid .span3 {
+  .row-fluid > .span3 {
     width: 23.076923077%;
   }
-  .row-fluid .span4 {
+  .row-fluid > .span4 {
     width: 31.623931624%;
   }
-  .row-fluid .span5 {
+  .row-fluid > .span5 {
     width: 40.170940171000005%;
   }
-  .row-fluid .span6 {
+  .row-fluid > .span6 {
     width: 48.717948718%;
   }
-  .row-fluid .span7 {
+  .row-fluid > .span7 {
     width: 57.264957265%;
   }
-  .row-fluid .span8 {
+  .row-fluid > .span8 {
     width: 65.81196581200001%;
   }
-  .row-fluid .span9 {
+  .row-fluid > .span9 {
     width: 74.358974359%;
   }
-  .row-fluid .span10 {
+  .row-fluid > .span10 {
     width: 82.905982906%;
   }
-  .row-fluid .span11 {
+  .row-fluid > .span11 {
     width: 91.45299145300001%;
   }
-  .row-fluid .span12 {
+  .row-fluid > .span12 {
     width: 100%;
   }
   input.span1, textarea.span1, .uneditable-input.span1 {
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 1f2aae23e..57c30ab63 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -212,40 +212,40 @@ a:hover {
 .row-fluid > [class*="span"]:first-child {
   margin-left: 0;
 }
-.row-fluid .span1 {
+.row-fluid > .span1 {
   width: 6.382978723%;
 }
-.row-fluid .span2 {
+.row-fluid > .span2 {
   width: 14.89361702%;
 }
-.row-fluid .span3 {
+.row-fluid > .span3 {
   width: 23.404255317%;
 }
-.row-fluid .span4 {
+.row-fluid > .span4 {
   width: 31.914893614%;
 }
-.row-fluid .span5 {
+.row-fluid > .span5 {
   width: 40.425531911%;
 }
-.row-fluid .span6 {
+.row-fluid > .span6 {
   width: 48.93617020799999%;
 }
-.row-fluid .span7 {
+.row-fluid > .span7 {
   width: 57.446808505%;
 }
-.row-fluid .span8 {
+.row-fluid > .span8 {
   width: 65.95744680199999%;
 }
-.row-fluid .span9 {
+.row-fluid > .span9 {
   width: 74.468085099%;
 }
-.row-fluid .span10 {
+.row-fluid > .span10 {
   width: 82.97872339599999%;
 }
-.row-fluid .span11 {
+.row-fluid > .span11 {
   width: 91.489361693%;
 }
-.row-fluid .span12 {
+.row-fluid > .span12 {
   width: 99.99999998999999%;
 }
 .container {
@@ -530,11 +530,16 @@ input,
 button,
 select,
 textarea {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 13px;
   font-weight: normal;
   line-height: 18px;
 }
+input,
+button,
+select,
+textarea {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
 label {
   display: block;
   margin-bottom: 5px;
@@ -832,6 +837,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
   color: #999999;
 }
 .help-block {
+  display: block;
   margin-top: 5px;
   margin-bottom: 0;
   color: #999999;
@@ -913,6 +919,7 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
   border-radius: 3px 0 0 3px;
 }
 .input-append .uneditable-input {
+  border-left-color: #eee;
   border-right-color: #ccc;
 }
 .input-append .add-on {
@@ -1693,15 +1700,18 @@ table .span12 {
   text-align: center;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
   vertical-align: middle;
-  background-color: #fafafa;
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
-  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
-  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
-  background-repeat: no-repeat;
+  background-color: #f5f5f5;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(top, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   border: 1px solid #ccc;
   border-bottom-color: #bbb;
   -webkit-border-radius: 4px;
@@ -1711,8 +1721,19 @@ table .span12 {
   -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
   cursor: pointer;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   *margin-left: .3em;
 }
+.btn:hover,
+.btn:active,
+.btn.active,
+.btn.disabled,
+.btn[disabled] {
+  background-color: #e6e6e6;
+}
+.btn:active, .btn.active {
+  background-color: #cccccc \9;
+}
 .btn:first-child {
   *margin-left: 0;
 }
@@ -1779,7 +1800,9 @@ table .span12 {
 .btn-success,
 .btn-success:hover,
 .btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   color: #ffffff;
 }
@@ -1787,7 +1810,8 @@ table .span12 {
 .btn-warning.active,
 .btn-danger.active,
 .btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
   color: rgba(255, 255, 255, 0.75);
 }
 .btn-primary {
@@ -1910,6 +1934,30 @@ table .span12 {
 .btn-info:active, .btn-info.active {
   background-color: #24748c \9;
 }
+.btn-inverse {
+  background-color: #393939;
+  background-image: -moz-linear-gradient(top, #454545, #262626);
+  background-image: -ms-linear-gradient(top, #454545, #262626);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#454545), to(#262626));
+  background-image: -webkit-linear-gradient(top, #454545, #262626);
+  background-image: -o-linear-gradient(top, #454545, #262626);
+  background-image: linear-gradient(top, #454545, #262626);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#454545', endColorstr='#262626', GradientType=0);
+  border-color: #262626 #262626 #000000;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+.btn-inverse:hover,
+.btn-inverse:active,
+.btn-inverse.active,
+.btn-inverse.disabled,
+.btn-inverse[disabled] {
+  background-color: #262626;
+}
+.btn-inverse:active, .btn-inverse.active {
+  background-color: #0c0c0c \9;
+}
 button.btn, input[type="submit"].btn {
   *padding-top: 2px;
   *padding-bottom: 2px;
@@ -2042,7 +2090,8 @@ button.btn.small, input[type="submit"].btn.small {
 .btn-primary .caret,
 .btn-danger .caret,
 .btn-info .caret,
-.btn-success .caret {
+.btn-success .caret,
+.btn-inverse .caret {
   border-top-color: #ffffff;
   opacity: 0.75;
   filter: alpha(opacity=75);
@@ -2115,27 +2164,31 @@ button.btn.small, input[type="submit"].btn.small {
   text-decoration: none;
   background-color: #eeeeee;
 }
+.nav .nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 18px;
+  color: #999999;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+}
+.nav li + .nav-header {
+  margin-top: 9px;
+}
 .nav-list {
   padding-left: 14px;
   padding-right: 14px;
   margin-bottom: 0;
 }
 .nav-list > li > a, .nav-list .nav-header {
-  display: block;
-  padding: 3px 15px;
   margin-left: -15px;
   margin-right: -15px;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
-.nav-list .nav-header {
-  font-size: 11px;
-  font-weight: bold;
-  line-height: 18px;
-  color: #999999;
-  text-transform: uppercase;
-}
-.nav-list > li + .nav-header {
-  margin-top: 9px;
+.nav-list > li > a {
+  padding: 3px 15px;
 }
 .nav-list .active > a, .nav-list .active > a:hover {
   color: #ffffff;
@@ -2483,6 +2536,13 @@ button.btn.small, input[type="submit"].btn.small {
 .navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
   margin-top: 3px;
 }
+.navbar-form .input-append, .navbar-form .input-prepend {
+  margin-top: 6px;
+  white-space: nowrap;
+}
+.navbar-form .input-append input, .navbar-form .input-prepend input {
+  margin-top: 0;
+}
 .navbar-search {
   position: relative;
   float: left;
@@ -2841,6 +2901,9 @@ button.btn.small, input[type="submit"].btn.small {
 .modal-body {
   padding: 15px;
 }
+.modal-body .modal-form {
+  margin-bottom: 0;
+}
 .modal-footer {
   padding: 14px 15px 15px;
   margin-bottom: 0;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a532d0819..f6a388c23 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -181,7 +181,7 @@ hr.soften {
     top: 40px;
     left: 0;
     right: 0;
-    z-index: 1030;
+    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
     border-color: #d5d5d5;
     border-width: 0 0 1px; /* drop the border on the fixed edges */
     -webkit-border-radius: 0;
@@ -190,6 +190,7 @@ hr.soften {
     -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
        -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
             box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
+    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
   }
   .subnav-fixed .nav {
     width: 938px;
diff --git a/docs/base-css.html b/docs/base-css.html
index 845f0460e..d67d1bd55 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
@@ -1121,7 +1121,7 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         <fieldset>
           <legend>Extending form controls</legend>
           <div class="control-group">
-            <label class="control-label">Form sizes</label>
+            <label class="control-label">Form grid sizes</label>
             <div class="controls docs-input-sizes">
               <input class="span1" type="text" placeholder=".span1">
               <input class="span2" type="text" placeholder=".span2">
@@ -1151,6 +1151,15 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
             </div>
           </div>
           <div class="control-group">
+            <label class="control-label">Alternate sizes</label>
+            <div class="controls docs-input-sizes">
+              <input class="input-mini" type="text" placeholder=".input-mini">
+              <input class="input-small" type="text" placeholder=".input-small">
+              <input class="input-medium" type="text" placeholder=".input-medium">
+              <p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
+            </div>
+          </div>          
+          <div class="control-group">
             <label class="control-label" for="prependedInput">Prepended text</label>
             <div class="controls">
               <div class="input-prepend">
@@ -1286,6 +1295,11 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
         <td><code>.btn-danger</code></td>
         <td>Indicates a dangerous or potentially negative action</td>
       </tr>
+  	  <tr>
+        <td><a class="btn btn-inverse" href="#">Inverse</a></td>
+        <td><code>.btn-inverse</code></td>
+        <td>Alternate dark gray button, not tied to a semantic action or use</td>
+      </tr>
     </tbody>
   </table>
 
diff --git a/docs/components.html b/docs/components.html
index cb41c736e..d0b5de632 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
@@ -98,6 +98,7 @@
         </ul>
       </li>
       <li><a href="#labels">Labels</a></li>
+      <li><a href="#typography">Typography</a></li>
       <li><a href="#thumbnails">Thumbnails</a></li>
       <li><a href="#alerts">Alerts</a></li>
       <li><a href="#progress">Progress bars</a></li>
@@ -247,7 +248,9 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
-      </div>
+      </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>
     </div>
     <div class="span8">
       <h3>Example markup</h3>
@@ -771,7 +774,9 @@
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
+                <li class="nav-header">Nav header</li>
                 <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
               </ul>
             </li>
           </ul>
@@ -810,12 +815,14 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-      <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>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.</p>
+      <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>
 <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>
       <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">
@@ -1135,6 +1142,55 @@
 
 
 
+<!-- Typographic components
+================================================== -->
+<section id="typography">
+  <div class="page-header">
+    <h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
+  </div>
+  <h2>Hero unit</h2>
+  <div class="row">
+    <div class="span4">
+      <p>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.</p>
+      <h3>Markup</h3>
+      <p>Wrap your content in a <code>div</code> like so:</p>
+<pre class="prettyprint linenums">
+&lt;div class="hero-unit"&gt;
+  &lt;h1&gt;Heading&lt;/h1&gt;
+  &lt;p&gt;Tagline&lt;/p&gt;
+  &lt;p&gt;
+    &lt;a class="btn btn-primary btn-large"&gt;
+      Learn more
+    &lt;/a&gt;
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+    <div class="span8">
+      <div class="hero-unit">
+        <h1>Hello, world!</h1>
+        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
+        <p><a class="btn btn-primary btn-large">Learn more</a></p>
+      </div>
+    </div>
+  </div><!-- /row -->
+  <h2>Page header</h2>
+  <div class="row">
+    <div class="span4">
+      <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">
+<pre class="prettyprint linenums">
+&lt;div class="page-haeder"&gt;
+  &lt;h1&gt;Example page header&lt;/h1&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+</section>
+
+
+
 <!-- Thumbnails
 ================================================== -->
 <section id="thumbnails">
diff --git a/docs/download.html b/docs/download.html
index c385046dd..9159787d0 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/examples.html b/docs/examples.html
index aabd65b46..76eb4b59a 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/index.html b/docs/index.html
index 95661da41..a914f677f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/javascript.html b/docs/javascript.html
index c30282f28..4ab4f5af3 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
@@ -930,7 +930,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
             </p>
           </div>
           <hr>
-          <h2>Using bootstrap-alerts.js</h2>
+          <h2>Using bootstrap-alert.js</h2>
           <p>Enable dismissal of an alert via javascript:</p>
           <pre class="prettyprint linenums">$(".alert").alert()</pre>
           <h3>Markup</h3>
diff --git a/docs/less.html b/docs/less.html
index 0d1527fb3..97847cc9d 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 58bf88b24..18ec5fb42 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
@@ -81,7 +81,9 @@
         <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
         <div class="subnav">
           <ul class="nav nav-pills">
-            <li><a href="#grid-system">Grid system</a></li>
+            <li><a href="#gridSystem">Grid system</a></li>
+            <li><a href="#fluidGridSystem">Fluid gird system</a></li>
+            <li><a href="#gridCustomization">Customizing</a></li>
             <li><a href="#layouts">Layouts</a></li>
             <li><a href="#responsive">Responsive design</a></li>
           </ul>
@@ -92,12 +94,11 @@
 
 <!-- Grid system
 ================================================== -->
-<section id="grid-system">
+<section id="gridSystem">
   <div class="page-header">
-    <h1>Grid system <small>12 columns with a responsive twist</small></h1>
+    <h1>Default grid system <small>12 columns with a responsive twist</small></h1>
   </div>
 
-  <h2>Default grid</h2>
   <div class="row show-grid">
     <div class="span1">1</div>
     <div class="span1">1</div>
@@ -188,7 +189,87 @@
           </div>
         </div>
       </div>
-      <h3>Fluid example</h3>
+    </div><!-- /span6 -->
+    <div class="span6">
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span12"&gt;
+    Level 1 of column
+    &lt;div class="row"&gt;
+      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
+      &lt;div class="span6"&gt;Level 2&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div>
+</section>
+
+
+
+<!-- Fluid grid system
+================================================== -->
+<section id="fluidGridSystem">
+  <div class="page-header">
+    <h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
+  </div>
+
+  <h2>Fluid columns</h2>
+  <div class="row-fluid show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span12">12</div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h3>Percents, not pixels</h3>
+      <p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
+    </div>
+    <div class="span4">
+      <h3>Fluid rows</h3>
+      <p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
+    </div>
+    <div class="span4">
+      <h3>Markup</h3>
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+
+  <h2>Fluid nesting</h2>
+  <div class="row">
+    <div class="span6">
       <p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
       <div class="row-fluid show-grid">
         <div class="span12">
@@ -206,10 +287,10 @@
     </div>
     <div class="span6">
 <pre class="prettyprint linenums">
-&lt;div class="row"&gt;
+&lt;div class="row-fluid"&gt;
   &lt;div class="span12"&gt;
     Level 1 of column
-    &lt;div class="row"&gt;
+    &lt;div class="row-fluid"&gt;
       &lt;div class="span6"&gt;Level 2&lt;/div&gt;
       &lt;div class="span6"&gt;Level 2&lt;/div&gt;
     &lt;/div&gt;
@@ -219,7 +300,16 @@
     </div>
   </div>
 
-  <h2>Grid customization</h2>
+</section>
+
+
+
+<!-- Customizaton
+================================================== -->
+<section id="gridCustomization">
+  <div class="page-header">
+    <h1>Grid customization</h1>
+  </div>
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -281,8 +371,8 @@
     <div class="span6">
       <h2>Fixed layout</h2>
       <p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
-      <div class="minicon-layout">
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout">
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;body&gt;
@@ -295,9 +385,9 @@
     <div class="span6">
       <h2>Fluid layout</h2>
       <p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
-      <div class="minicon-layout fluid">
-        <div class="minicon-layout-sidebar"></div>
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout fluid">
+        <div class="mini-layout-sidebar"></div>
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="container-fluid"&gt;
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index a885b25be..832983e16 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 04d2c7c07..4b2f379c5 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1045,7 +1045,7 @@
         <fieldset>
           <legend>{{_i}}Extending form controls{{/i}}</legend>
           <div class="control-group">
-            <label class="control-label">{{_i}}Form sizes{{/i}}</label>
+            <label class="control-label">{{_i}}Form grid sizes{{/i}}</label>
             <div class="controls docs-input-sizes">
               <input class="span1" type="text" placeholder=".span1">
               <input class="span2" type="text" placeholder=".span2">
@@ -1075,6 +1075,15 @@
             </div>
           </div>
           <div class="control-group">
+            <label class="control-label">{{_i}}Alternate sizes{{/i}}</label>
+            <div class="controls docs-input-sizes">
+              <input class="input-mini" type="text" placeholder=".input-mini">
+              <input class="input-small" type="text" placeholder=".input-small">
+              <input class="input-medium" type="text" placeholder=".input-medium">
+              <p class="help-block">{{_i}}You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).{{/i}}</p>
+            </div>
+          </div>          
+          <div class="control-group">
             <label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
             <div class="controls">
               <div class="input-prepend">
@@ -1210,6 +1219,11 @@
         <td><code>.btn-danger</code></td>
         <td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
       </tr>
+  	  <tr>
+        <td><a class="btn btn-inverse" href="#">{{_i}}Inverse{{/i}}</a></td>
+        <td><code>.btn-inverse</code></td>
+        <td>{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}</td>
+      </tr>
     </tbody>
   </table>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 62a7083b6..0b55e60f0 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -22,6 +22,7 @@
         </ul>
       </li>
       <li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
+      <li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
       <li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
       <li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
       <li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
@@ -171,7 +172,9 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </div><!-- /btn-group -->
-      </div>
+      </div><!-- /btn-toolbar -->
+      <hr>
+      <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Button dropdowns require the <a href="./javascript.html#dropdowns">Bootstrap dropdown plugin</a> to function.{{/i}}</p>
     </div>
     <div class="span8">
       <h3>{{_i}}Example markup{{/i}}</h3>
@@ -695,7 +698,9 @@
                 <li><a href="#">{{_i}}Another action{{/i}}</a></li>
                 <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
                 <li class="divider"></li>
+                <li class="nav-header">Nav header</li>
                 <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+                <li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
               </ul>
             </li>
           </ul>
@@ -734,12 +739,14 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-      <p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>. In your CSS, you will also need to account for the overlap it causes by adding <code>padding-top: 40px;</code> to your <code>&lt;body&gt;</code>.{{/i}}</p>
+      <h3>{{_i}}Fixed navbar{{/i}}</h3>
+      <p>{{_i}}To make the navbar fixed to the top of the viewport, add <code>.navbar-fixed-top</code> to the outermost div, <code>.navbar</code>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;div class="navbar navbar-fixed-top"&gt;
   ...
 &lt;/div&gt;
 </pre>
+      <p>{{_i}}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.{{/i}}</p>
       <h3>{{_i}}Brand name{{/i}}</h3>
       <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
 <pre class="prettyprint linenums">
@@ -1059,6 +1066,55 @@
 
 
 
+<!-- Typographic components
+================================================== -->
+<section id="typography">
+  <div class="page-header">
+    <h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
+  </div>
+  <h2>{{_i}}Hero unit{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <p>{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}</p>
+      <h3>{{_i}}Markup{{/i}}</h3>
+      <p>{{_i}}Wrap your content in a <code>div</code> like so:{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;div class="hero-unit"&gt;
+  &lt;h1&gt;{{_i}}Heading{{/i}}&lt;/h1&gt;
+  &lt;p&gt;{{_i}}Tagline{{/i}}&lt;/p&gt;
+  &lt;p&gt;
+    &lt;a class="btn btn-primary btn-large"&gt;
+      {{_i}}Learn more{{/i}}
+    &lt;/a&gt;
+  &lt;/p&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+    <div class="span8">
+      <div class="hero-unit">
+        <h1>{{_i}}Hello, world!{{/i}}</h1>
+        <p>{{_i}}This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.{{/i}}</p>
+        <p><a class="btn btn-primary btn-large">{{_i}}Learn more{{/i}}</a></p>
+      </div>
+    </div>
+  </div><!-- /row -->
+  <h2>{{_i}}Page header{{/i}}</h2>
+  <div class="row">
+    <div class="span4">
+      <p>{{_i}}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).{{/i}}</p>
+    </div>
+    <div class="span8">
+<pre class="prettyprint linenums">
+&lt;div class="page-haeder"&gt;
+  &lt;h1&gt;{{_i}}Example page header{{/i}}&lt;/h1&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+</section>
+
+
+
 <!-- Thumbnails
 ================================================== -->
 <section id="thumbnails">
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 553913d21..c072e306b 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -854,7 +854,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
             </p>
           </div>
           <hr>
-          <h2>{{_i}}Using bootstrap-alerts.js{{/i}}</h2>
+          <h2>{{_i}}Using bootstrap-alert.js{{/i}}</h2>
           <p>{{_i}}Enable dismissal of an alert via javascript:{{/i}}</p>
           <pre class="prettyprint linenums">$(".alert").alert()</pre>
           <h3>{{_i}}Markup{{/i}}</h3>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 74b824d9c..cc3cceea7 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -5,7 +5,9 @@
         <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
         <div class="subnav">
           <ul class="nav nav-pills">
-            <li><a href="#grid-system">{{_i}}Grid system{{/i}}</a></li>
+            <li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
+            <li><a href="#fluidGridSystem">{{_i}}Fluid gird system{{/i}}</a></li>
+            <li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
             <li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
             <li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
           </ul>
@@ -16,12 +18,11 @@
 
 <!-- Grid system
 ================================================== -->
-<section id="grid-system">
+<section id="gridSystem">
   <div class="page-header">
-    <h1>{{_i}}Grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
+    <h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
   </div>
 
-  <h2>{{_i}}Default grid{{/i}}</h2>
   <div class="row show-grid">
     <div class="span1">1</div>
     <div class="span1">1</div>
@@ -112,7 +113,87 @@
           </div>
         </div>
       </div>
-      <h3>{{_i}}Fluid example{{/i}}</h3>
+    </div><!-- /span6 -->
+    <div class="span6">
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span12"&gt;
+    {{_i}}Level 1 of column{{/i}}
+    &lt;div class="row"&gt;
+      &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+      &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div>
+</section>
+
+
+
+<!-- Fluid grid system
+================================================== -->
+<section id="fluidGridSystem">
+  <div class="page-header">
+    <h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
+  </div>
+
+  <h2>{{_i}}Fluid columns{{/i}}</h2>
+  <div class="row-fluid show-grid">
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+    <div class="span1">1</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+    <div class="span4">4</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span4">4</div>
+    <div class="span8">8</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span6">6</div>
+    <div class="span6">6</div>
+  </div>
+  <div class="row-fluid show-grid">
+    <div class="span12">12</div>
+  </div>
+
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Percents, not pixels{{/i}}</h3>
+      <p>{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Fluid rows{{/i}}</h3>
+      <p>{{_i}}Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}</p>
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Markup{{/i}}</h3>
+<pre class="prettyprint linenums">
+&lt;div class="row-fluid"&gt;
+  &lt;div class="span4"&gt;...&lt;/div&gt;
+  &lt;div class="span8"&gt;...&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+    </div>
+  </div><!-- /row -->
+
+  <h2>{{_i}}Fluid nesting{{/i}}</h2>
+  <div class="row">
+    <div class="span6">
       <p>{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}</p>
       <div class="row-fluid show-grid">
         <div class="span12">
@@ -130,10 +211,10 @@
     </div>
     <div class="span6">
 <pre class="prettyprint linenums">
-&lt;div class="row"&gt;
+&lt;div class="row-fluid"&gt;
   &lt;div class="span12"&gt;
     {{_i}}Level 1 of column{{/i}}
-    &lt;div class="row"&gt;
+    &lt;div class="row-fluid"&gt;
       &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
       &lt;div class="span6"&gt;{{_i}}Level 2{{/i}}&lt;/div&gt;
     &lt;/div&gt;
@@ -143,7 +224,16 @@
     </div>
   </div>
 
-  <h2>{{_i}}Grid customization{{/i}}</h2>
+</section>
+
+
+
+<!-- Customizaton
+================================================== -->
+<section id="gridCustomization">
+  <div class="page-header">
+    <h1>{{_i}}Grid customization{{/i}}</h1>
+  </div>
   <table class="table table-bordered table-striped">
     <thead>
       <tr>
@@ -205,8 +295,8 @@
     <div class="span6">
       <h2>{{_i}}Fixed layout{{/i}}</h2>
       <p>{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.{{/i}}</p>
-      <div class="minicon-layout">
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout">
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;body&gt;
@@ -219,9 +309,9 @@
     <div class="span6">
       <h2>{{_i}}Fluid layout{{/i}}</h2>
       <p>{{_i}}<code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}</p>
-      <div class="minicon-layout fluid">
-        <div class="minicon-layout-sidebar"></div>
-        <div class="minicon-layout-body"></div>
+      <div class="mini-layout fluid">
+        <div class="mini-layout-sidebar"></div>
+        <div class="mini-layout-body"></div>
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="container-fluid"&gt;
diff --git a/docs/upgrading.html b/docs/upgrading.html
index 5416b9987..0c9ab1673 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -15,7 +15,7 @@
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
     <!--[if lt IE 9]>
-      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
     <![endif]-->
 
     <!-- Le fav and touch icons -->