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

8 files changed, 286 insertions, 256 deletions

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 6cbb111ac..2b9a459c8 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -880,22 +880,20 @@
       </form>
     </div>
     <div class="span4">
-      <div class="form-docs">
-        <h3>{{_i}}What's included{{/i}}</h3>
-        <p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
-        <ul>
-          <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
-          <li>{{_i}}checkbox{{/i}}</li>
-          <li>{{_i}}radio{{/i}}</li>
-          <li>{{_i}}select{{/i}}</li>
-          <li>{{_i}}multiple select{{/i}}</li>
-          <li>{{_i}}file input{{/i}}</li>
-          <li>{{_i}}textarea{{/i}}</li>
-        </ul>
-        <hr>
-        <h3>{{_i}}New defaults with v2.0{{/i}}</h3>
-        <p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
-      </div>
+      <h3>{{_i}}What's included{{/i}}</h3>
+      <p>{{_i}}Shown on the left are all the default form controls we support. Here's the bulleted list:{{/i}}</p>
+      <ul>
+        <li>{{_i}}text inputs (text, password, email, etc){{/i}}</li>
+        <li>{{_i}}checkbox{{/i}}</li>
+        <li>{{_i}}radio{{/i}}</li>
+        <li>{{_i}}select{{/i}}</li>
+        <li>{{_i}}multiple select{{/i}}</li>
+        <li>{{_i}}file input{{/i}}</li>
+        <li>{{_i}}textarea{{/i}}</li>
+      </ul>
+      <hr>
+      <h3>{{_i}}New defaults with v2.0{{/i}}</h3>
+      <p>{{_i}}Up to v1.4, Bootstrap's default form styles used the horizontal layout. With Bootstrap 2, we removed that constraint to have smarter, more scalable defaults for any form.{{/i}}</p>
     </div>
   </div>
 
@@ -975,19 +973,17 @@
       </form>
     </div>
     <div class="span4">
-      <div class="form-docs">
-        <h3>{{_i}}Redesigned browser states{{/i}}</h3>
-        <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
-        <hr>
-        <h3>{{_i}}Form validation{{/i}}</h3>
-        <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
+      <h3>{{_i}}Redesigned browser states{{/i}}</h3>
+      <p>{{_i}}Bootstrap features styles for browser-supported focused and <code>disabled</code> states. We remove the default Webkit <code>outline</code> and apply a <code>box-shadow</code> in it's place for <code>:focus</code>.{{/i}}</p>
+      <hr>
+      <h3>{{_i}}Form validation{{/i}}</h3>
+      <p>{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the a class to the surrounding <code>.control-group</code>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;fieldset
   class="control-group error"&gt;
   …
 &lt;/fieldset&gt;
 </pre>
-      </div>
     </div>
   </div>
 
@@ -1080,14 +1076,15 @@
       </form>
     </div>
     <div class="span4">
-      <div class="form-docs">
-        <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
-        <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
-        <hr>
-        <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
-        <p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
-        <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
-      </div>
+      <h3>{{_i}}Prepend &amp; append inputs{{/i}}</h3>
+      <p>{{_i}}Input groups&mdash;with appended or prepended text&mdash;provide an easy way to give more context for your inputs. Great examples include the @ sign for Twitter usernames or $ for finances.{{/i}}</p>
+      <hr>
+      <h3>{{_i}}Checkboxes and radios{{/i}}</h3>
+      <p>{{_i}}Up to v1.4, Bootstrap required extra markup around checkboxes and radios to stack them. Now, it's a simple matter of repeating the <code>&lt;label class="checkbox"&gt;</code> that wraps the <code>&lt;input type="checkbox"&gt;</code>.{{/i}}</p>
+      <p>{{_i}}Inline checkboxes and radios are also supported. Just add <code>.inline</code> to any <code>.checkbox</code> or <code>.radio</code> and you're done.{{/i}}</p>
+      <hr>
+      <h4>{{_i}}Inline forms and append/prepend{{/i}}</h4>
+      <p>{{_i}}To use prepend or append inputs in an inline form, be sure to place the <code>.add-on</code> and <code>input</code> on the same line, without spaces.{{/i}}</p>
     </div>
   </div><!-- /row -->
 </section>
@@ -1338,7 +1335,7 @@
     </div>
   </div>
   <div class="alert alert-info">
-    {{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code> and on hover in the docs we show a light red background color show the icon's size.{{/i}}
+    {{_i}}<strong>Heads up!</strong> Icon classes are echoed via CSS <code>:after</code>. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
   </div>
 
   <br>
@@ -1425,7 +1422,7 @@
           <div class="controls">
             <div class="input-prepend">
               <span class="add-on"><i class="icon envelope"></i></span>
-              <input class="span32" id="iconInput" size="16" type="text">
+              <input class="span2" id="iconInput" type="text">
             </div>
           </div>
         </div>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 363ed1ba1..75ca3eb7e 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -395,7 +395,7 @@
       <div class="well" style="padding: 8px 0;">
         <ul class="nav list">
           <li class="nav-header">{{_i}}List header{{/i}}</li>
-          <li class="active"><a href="#"><i class="icon home"></i> {{_i}}Home{{/i}}</a></li>
+          <li class="active"><a href="#"><i class="icon white home"></i> {{_i}}Home{{/i}}</a></li>
           <li><a href="#"><i class="icon book"></i> {{_i}}Library{{/i}}</a></li>
           <li><a href="#"><i class="icon pencil"></i> {{_i}}Applications{{/i}}</a></li>
           <li class="nav-header">{{_i}}Another list header{{/i}}</li>
@@ -587,43 +587,50 @@
   </div>
   <h2>{{_i}}Static navbar example{{/i}}</h2>
   <p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
-  <div class="navbar navbar-static">
+  <div class="navbar">
     <div class="navbar-inner">
       <div class="container" style="width: auto;">
+        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+          <span class="i-bar"></span>
+        </a>
         <a class="brand" href="#">{{_i}}Project name{{/i}}</a>
-        <ul class="nav">
-          <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </li>
-        </ul>
-        <form class="navbar-search pull-left" action="">
-          <input type="text" class="search-query span2" placeholder="Search">
-        </form>
-        <ul class="nav pull-right">
-          <li><a href="#">{{_i}}Link{{/i}}</a></li>
-          <li class="vertical-divider"></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
-            <ul class="dropdown-menu">
-              <li><a href="#">{{_i}}Action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Another action{{/i}}</a></li>
-              <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
-              <li class="divider"></li>
-              <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
-            </ul>
-          </li>
-        </ul>
+        <div class="nav-collapse">
+          <ul class="nav">
+            <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                <li class="divider"></li>
+                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="navbar-search pull-left" action="">
+            <input type="text" class="search-query span2" placeholder="Search">
+          </form>
+          <ul class="nav pull-right">
+            <li><a href="#">{{_i}}Link{{/i}}</a></li>
+            <li class="vertical-divider"></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">{{_i}}Action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+                <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+                <li class="divider"></li>
+                <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div><!-- /.nav-collapse -->
       </div>
     </div><!-- /navbar-inner -->
   </div><!-- /navbar -->
@@ -633,7 +640,7 @@
       <h3>{{_i}}Navbar scaffolding{{/i}}</h3>
       <p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;div class="navbar navbar-static"&gt;
+&lt;div class="navbar"&gt;
   &lt;div class="navbar-inner"&gt;
     &lt;div class="container"&gt;
       ...
@@ -641,7 +648,7 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-      <p>{{_i}}To make the navbar fixed, swap the <code>.navbar-static</code> class for <code>.navbar-fixed-top</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>
+      <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>
 <pre class="prettyprint linenums">
 &lt;div class="navbar navbar-fixed-top"&gt;
   ...
@@ -661,7 +668,37 @@
   &lt;input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"&gt;
 &lt;/form&gt;
 </pre>
-    </div>
+      <h3>{{_i}}Optional responsive variation{{/i}}</h3>
+      <p>{{_i}}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, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;div class="navbar"&gt;
+  &lt;div class="navbar-inner"&gt;
+    &lt;div class="container"&gt;
+      
+      &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
+      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+        &lt;span class="i-bar"&gt;&lt;/span&gt;
+      &lt;/a&gt;
+      
+      &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
+      &lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
+
+      &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
+      &lt;div class="nav-collapse"&gt;
+        &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
+      &lt;/div&gt;
+
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+      <div class="alert alert-info">
+        <strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a>.
+      </div>
+
+    </div><!-- /.span -->
     <div class="span4">
       <h3>{{_i}}Nav links{{/i}}</h3>
       <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
@@ -691,9 +728,9 @@
   &lt;/li&gt;
 &lt;/ul&gt;
 </pre>
-    <p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
-    </div>
-  </div>
+      <p><a class="btn" href="./javascript.html/#dropdown">{{_i}}Get the javascript &rarr;{{/i}}</a></p>
+    </div><!-- /.span -->
+  </div><!-- /.row -->
 
 </section>
 
@@ -898,34 +935,34 @@
       </tr>
       <tr>
         <td>
-          <span class="label success">{{_i}}New{{/i}}</span>
+          <span class="label label-success">{{_i}}New{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-success"&gt;{{/_i}}New{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label warning">{{_i}}Warning{{/i}}</span>
+          <span class="label label-warning">{{_i}}Warning{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-warning"&gt;{{_i}}Warning{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label important">{{_i}}Important{{/i}}</span>
+          <span class="label label-important">{{_i}}Important{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-important"&gt;{{_i}}Important{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
       <tr>
         <td>
-          <span class="label info">{{_i}}Info{{/i}}</span>
+          <span class="label label-info">{{_i}}Info{{/i}}</span>
         </td>
         <td>
-          <code>&lt;span class="label info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
+          <code>&lt;span class="label label-info"&gt;{{_i}}Info{{/i}}&lt;/span&gt;</code>
         </td>
       </tr>
     </tbody>
@@ -948,22 +985,22 @@
       <ul class="thumbnails">
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
       </ul>
@@ -974,7 +1011,7 @@
       <ul class="thumbnails">
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
             <div class="caption">
               <h5>{{_i}}Thumbnail label{{/i}}</h5>
               <p>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.</p>
@@ -984,7 +1021,7 @@
         </li>
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
             <div class="caption">
               <h5>{{_i}}Thumbnail label{{/i}}</h5>
               <p>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.</p>
@@ -1019,7 +1056,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1030,7 +1067,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
       &lt;h5&gt;{{_i}}Thumbnail label{{/i}}&lt;/h5&gt;
       &lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt;
     &lt;/div&gt;
@@ -1045,32 +1082,32 @@
       <ul class="thumbnails">
         <li class="span4">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/290x226" alt="">
+            <img src="http://placehold.it/360x268" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
       </ul>
@@ -1198,12 +1235,12 @@
     <div class="span4">
       <h3>{{_i}}Striped{{/i}}</h3>
       <p>{{_i}}Uses a gradient to create a striped effect.{{/i}}</p>
-      <div class="progress info striped">
+      <div class="progress progress-info progress-striped">
         <div class="bar" style="width: 20%;"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress info
-     striped"&gt;
+&lt;div class="progress progress-info
+     progress-striped"&gt;
   &lt;div class="bar"
        style="width: 20%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1212,12 +1249,12 @@
     <div class="span4">
       <h3>{{_i}}Animated{{/i}}</h3>
       <p>{{_i}}Takes the striped example and animates it.{{/i}}</p>
-      <div class="progress danger active striped">
+      <div class="progress progress-danger progress-striped active">
         <div class="bar" style="width: 45%"></div>
       </div>
 <pre class="prettyprint linenums">
-&lt;div class="progress danger
-     striped active"&gt;
+&lt;div class="progress progress-danger
+     progress-striped active"&gt;
   &lt;div class="bar"
        style="width: 40%;"&gt;&lt;/div&gt;
 &lt;/div&gt;
@@ -1229,18 +1266,18 @@
   <div class="row">
     <div class="span4">
       <h3>{{_i}}Additional colors{{/i}}</h3>
-      <p>{{_i}}Progress bars utilize some of the same classes as buttons and alert messages for quick styling.{{/i}}</p>
+      <p>{{_i}}Progress bars utilize some of the same class names as buttons and alerts for similar styling.{{/i}}</p>
       <ul>
-        <li><code>.info</code></li>
-        <li><code>.success</code></li>
-        <li><code>.danger</code></li>
+        <li><code>.progress-info</code></li>
+        <li><code>.progress-success</code></li>
+        <li><code>.progress-danger</code></li>
       </ul>
       <p>{{_i}}Alternatively, you can customize the LESS files and roll your own colors and sizes.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Behavior{{/i}}</h3>
       <p>{{_i}}Progress bars use CSS3 transitions, so if you dynamically adjust the width via javascript, it will smoothly resize.{{/i}}</p>
-      <p>{{_i}}If you use the <code>.active</code> class, your <code>.striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
+      <p>{{_i}}If you use the <code>.active</code> class, your <code>.progress-striped</code> progress bars will animate the stripes left to right.{{/i}}</p>
     </div>
     <div class="span4">
       <h3>{{_i}}Browser support{{/i}}</h3>
@@ -1287,7 +1324,3 @@
     </div><!--/span-->
   </div><!--/row-->
 </section>
-
-
-
-
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index dccc5fbb6..34f8130ac 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -63,12 +63,8 @@
       <label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
       <label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
-      <!--
       <h3>{{_i}}Responsive{{/i}}</h3>
-      <label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 480px{{/i}}</label>
-      <label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 768px{{/i}}</label>
-      <label class="checkbox"><input type="checkbox" value=""> {{_i}}Max-width 1210px{{/i}}</label>
-      -->
+      <label class="checkbox"><input checked="checked" type="checkbox" value="responsive.less"> {{_i}}Responsive layouts{{/i}}</label>
     </div><!-- /span -->
   </div><!-- /row -->
 </section>
diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache
index 3c102bef2..850ac0fa6 100644
--- a/docs/templates/pages/examples.mustache
+++ b/docs/templates/pages/examples.mustache
@@ -10,17 +10,47 @@
 </header>
 
 
-
-<!-- EXAMPLES
-================================================== -->
-<section id="examples">
-  <div class="page-header">
-    <h1>{{_i}}Examples from 1.x{{/i}}</h1>
-  </div>
-
-<p><a href="../examples/container-app.html">Container app</a></p>
-<p><a href="../examples/fluid.html">Fluid layout</a></p>
-<p><a href="../examples/fluid-reverse.html">Reversed fluid layout</a></p>
-<p><a href="../examples/hero.html">Hero marketing site</a></p>
-
-</section>
+<ul class="thumbnails bootstrap-examples">
+  <li class="span4">
+    <a href="../examples/hero.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Basic marketing site</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="../examples/fluid.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Fluid layout</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="../examples/fluid-reverse.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Fluid layout reversed</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="../examples/container-app.html" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Container application</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Fullscreen</h3>
+    <p></p>
+  </li>
+  <li class="span4">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/360x240" alt="">
+    </a>
+    <h3>Simple layout</h3>
+    <p></p>
+  </li>
+</ul>
diff --git a/docs/templates/pages/index.mustache b/docs/templates/pages/index.mustache
index 7a98afa07..d49f95f9b 100644
--- a/docs/templates/pages/index.mustache
+++ b/docs/templates/pages/index.mustache
@@ -10,18 +10,6 @@
               <a href="https://github.com/twitter/bootstrap/" class="btn primary btn-large">{{_i}}View project on GitHub{{/i}}</a>
               <a href="assets/bootstrap.zip" class="btn btn-large">{{_i}}Download Bootstrap{{/i}}</a>
             </p>
-            <div class="benefits">
-              <h4>{{_i}}Feature highlights{{/i}}</h4>
-              <ul>
-                <li><span>&#10004;</span> {{_i}}Built on LESS{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Complete style guide docs{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Fully responsive design{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Small footprint (10kb gzipped){{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Support for IE7 and up{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Custom jQuery plugins{{/i}}</li>
-                <li><span>&#10004;</span> {{_i}}Dozens of components{{/i}}</li>
-              </ul>
-            </div>
           </div>
 
           <ul class="quick-links">
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index ad6688e1e..82b921d24 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -62,168 +62,146 @@
 ================================================== -->
 <section id="variables">
   <div class="page-header">
-    <h1>{{_i}}Bootstrap variables <small></small>{{/i}}</h1>
+    <h1>{{_i}}Bootstrap variables <small>LESS variables, their values, and usage guidelines</small>{{/i}}</h1>
   </div>
 
-  <h3>{{_i}}Hyperlinks{{/i}}</h3>
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th class="span2">{{_i}}Variable{{/i}}</th>
-        <th>{{_i}}Value{{/i}}</th>
-        <th>{{_i}}Usage{{/i}}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td><code>@linkColor</code></td>
-        <td>#08c</td>
-        <td>{{_i}}Default link text color{{/i}}</td>
-      </tr>
-      <tr>
-        <td><code>@linkColorHover</code></td>
-        <td><code>darken(@linkColor, 15%)</code></td>
-        <td>{{_i}}Default link text hover color{{/i}}</td>
-      </tr>
-    </tbody>
-  </table>
-
   <div class="row">
     <div class="span6">
-      <h3>{{_i}}Grayscale colors{{/i}}</h3>
+      <h3>{{_i}}Hyperlinks{{/i}}</h3>
       <table class="table table-bordered table-striped">
-        <thead>
+        <tbody>
           <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
+            <td class="span2"><code>@linkColor</code></td>
+            <td>#08c</td>
+            <td>{{_i}}Default link text color{{/i}}</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
-        </thead>
+          <tr>
+            <td><code>@linkColorHover</code></td>
+            <td><code>darken(@linkColor, 15%)</code></td>
+            <td>{{_i}}Default link text hover color{{/i}}</td>
+            <td><span class="swatch" style="background-color: #005580;"></span></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Grid system{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@gridColumns</code></td>
+            <td>12</td>
+          </tr>
+          <tr>
+            <td><code>@gridColumnWidth</code></td>
+            <td>60px</td>
+          </tr>
+          <tr>
+            <td><code>@gridGutterWidth</code></td>
+            <td>20px</td>
+          </tr>
+          <tr>
+            <td><code>@siteWidth</code></td>
+            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
+          </tr>
+        </tbody>
+      </table>
+      <h3>{{_i}}Typography{{/i}}</h3>
+      <table class="table table-bordered table-striped">
+        <tbody>
+          <tr>
+            <td class="span2"><code>@baseFontSize</code></td>
+            <td>13px</td>
+          </tr>
+          <tr>
+            <td><code>@baseFontFamily</code></td>
+            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td><code>@baseLineHeight</code></td>
+            <td>18px</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="span6">
+      <h3>{{_i}}Grayscale colors{{/i}}</h3>
+      <table class="table table-bordered table-striped">
         <tbody>
           <tr>
-            <td><code>@black</code></td>
+            <td class="span2"><code>@black</code></td>
             <td>#000</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #000;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDarker</code></td>
             <td>#222</td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@grayDark</code></td>
             <td>#333</td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
           <tr>
             <td><code>@gray</code></td>
             <td>#555</td>
+            <td><span class="swatch" style="background-color: #555;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLight</code></td>
             <td>#999</td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@grayLighter</code></td>
             <td>#eee</td>
+            <td><span class="swatch" style="background-color: #eee;"></span></td>
           </tr>
           <tr>
             <td><code>@white</code></td>
             <td>#fff</td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
-    </div>
-    <div class="span6">
       <h3>{{_i}}Accent colors{{/i}}</h3>
       <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
-          </tr>
-        </thead>
         <tbody>
           <tr>
-            <td><code>@blue</code></td>
+            <td class="span2"><code>@blue</code></td>
             <td>#049cdb</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #049cdb;"></span></td>
           </tr>
           <tr>
             <td><code>@green</code></td>
             <td>#46a546</td>
+            <td><span class="swatch" style="background-color: #46a546;"></span></td>
           </tr>
           <tr>
             <td><code>@red</code></td>
             <td>#9d261d</td>
+            <td><span class="swatch" style="background-color: #9d261d;"></span></td>
           </tr>
           <tr>
             <td><code>@yellow</code></td>
             <td>#ffc40d</td>
+            <td><span class="swatch" style="background-color: #ffc40d;"></span></td>
           </tr>
           <tr>
             <td><code>@orange</code></td>
             <td>#f89406</td>
+            <td><span class="swatch" style="background-color: #f89406;"></span></td>
           </tr>
           <tr>
             <td><code>@pink</code></td>
             <td>#c3325f</td>
+            <td><span class="swatch" style="background-color: #c3325f;"></span></td>
           </tr>
           <tr>
             <td><code>@purple</code></td>
             <td>#7a43b6</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div> <!-- /row -->
-  <div class="row">
-    <div class="span6">
-      <h3>{{_i}}Grid system{{/i}}</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@gridColumns</code></td>
-            <td>12</td>
-          </tr>
-          <tr>
-            <td><code>@gridColumnWidth</code></td>
-            <td>60px</td>
-          </tr>
-          <tr>
-            <td><code>@gridGutterWidth</code></td>
-            <td>20px</td>
-          </tr>
-          <tr>
-            <td><code>@siteWidth</code></td>
-            <td><code>(@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1))</code></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="span6">
-      <h3>{{_i}}Typography{{/i}}</h3>
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th class="span2">{{_i}}Variable{{/i}}</th>
-            <th>{{_i}}Value{{/i}}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td><code>@baseFontSize</code></td>
-            <td>13px</td>
-          </tr>
-          <tr>
-            <td><code>@baseFontFamily</code></td>
-            <td><code>"Helvetica Neue", Helvetica, Arial, sans-serif</code></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td><code>@baseLineHeight</code></td>
-            <td>18px</td>
+            <td><span class="swatch" style="background-color: #7a43b6;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -239,6 +217,7 @@
           <tr>
             <td class="span3"><code>@primaryButtonBackground</code></td>
             <td><code>@linkColor</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #08c;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -248,6 +227,7 @@
           <tr>
             <td class="span3"><code>@placeholderText</code></td>
             <td><code>@grayLight</code></td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -257,26 +237,32 @@
           <tr>
             <td class="span3"><code>@navbarHeight</code></td>
             <td>40px</td>
+            <td class="swatch-col"></td>
           </tr>
           <tr>
             <td><code>@navbarBackground</code></td>
             <td><code>@grayDarker</code></td>
+            <td><span class="swatch" style="background-color: #222;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarBackgroundHighlight</code></td>
             <td><code>@grayDark</code></td>
+            <td><span class="swatch" style="background-color: #333;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarText</code></td>
             <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColor</code></td>
             <td><code>@grayLight</code></td>
+            <td><span class="swatch" style="background-color: #999;"></span></td>
           </tr>
           <tr>
             <td><code>@navbarLinkColorHover</code></td>
             <td><code>@white</code></td>
+            <td><span class="swatch swatch-bordered" style="background-color: #fff;"></span></td>
           </tr>
         </tbody>
       </table>
@@ -288,50 +274,42 @@
           <tr>
             <td class="span3"><code>@warningText</code></td>
             <td>#f3edd2</td>
+            <td class="swatch-col"><span class="swatch" style="background-color: #f3edd2;"></span></td>
           </tr>
           <tr>
             <td><code>@warningBackground</code></td>
             <td>#c09853</td>
-          </tr>
-          <tr>
-            <td><code>@warningBorder</code></td>
-            <td>#f3edd2</td>
+            <td><span class="swatch" style="background-color: #c09853;"></span></td>
           </tr>
           <tr>
             <td><code>@errorText</code></td>
             <td>#b94a48</td>
+            <td><span class="swatch" style="background-color: #b94a48;"></span></td>
           </tr>
           <tr>
             <td><code>@errorBackground</code></td>
             <td>#f2dede</td>
-          </tr>
-          <tr>
-            <td><code>@errorBorder</code></td>
-            <td>#e9c7c7</td>
+            <td><span class="swatch" style="background-color: #f2dede;"></span></td>
           </tr>
           <tr>
             <td><code>@successText</code></td>
             <td>#468847</td>
+            <td><span class="swatch" style="background-color: #468847;"></span></td>
           </tr>
           <tr>
             <td><code>@successBackground</code></td>
             <td>#dff0d8</td>
-          </tr>
-          <tr>
-            <td><code>@successBorder</code></td>
-            <td>#cfe8c4</td>
+            <td><span class="swatch" style="background-color: #dff0d8;"></span></td>
           </tr>
           <tr>
             <td><code>@infoText</code></td>
             <td>#3a87ad</td>
+            <td><span class="swatch" style="background-color: #3a87ad;"></span></td>
           </tr>
           <tr>
             <td><code>@infoBackground</code></td>
             <td>#d9edf7</td>
-          </tr>
-          <tr>
-            <td><code>@infoBorder</code></td>
-            <td>#bfe1f2</td>
+            <td><span class="swatch" style="background-color: #d9edf7;"></span></td>
           </tr>
         </tbody>
       </table>
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index cf672cc6e..239d15265 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -52,7 +52,6 @@
   <div class="row show-grid">
     <div class="span12">12</div>
   </div>
-
   <div class="row">
     <div class="span4">
       <p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
@@ -318,7 +317,7 @@
   @media (min-width: 768px) and (max-width: 940px) { ... }
 
   // {{_i}}Large desktop{{/i}}
-  @media (min-width: 1210px) { .. }
+  @media (min-width: 1200px) { .. }
 </pre>
     </div>
   </div>
diff --git a/docs/templates/pages/upgrading.mustache b/docs/templates/pages/upgrading.mustache
index 2339b2e1c..95587456a 100644
--- a/docs/templates/pages/upgrading.mustache
+++ b/docs/templates/pages/upgrading.mustache
@@ -114,6 +114,15 @@
     <li>{{_i}}Pills were restyled to be less rounded by default{{/i}}</li>
     <li>{{_i}}Pills now have dropdown menu support (they share the same markup and styles as tabs){{/i}}</li>
   </ul>
+  <h3>{{_i}}Navbar (formerly topbar){{/i}}</h3>
+  <ul>
+    <li>{{_i}}Base class changed from <code>.topbar</code> to <code>.navbar</code>{{/i}}</li>
+    <li>{{_i}}Now supports static position (default behavior, not fixed) and fixed to the top of viewport via <code>.navbar-fixed-top</code> (previously only supported fixed){{/i}}</li>
+    <li>{{_i}}Added vertical dividers to top-level nav{{/i}}</li>
+    <li>{{_i}}Improved support for inline forms in the navbar, which now require <code>.navbar-form</code> to properly scope styles to only the intended forms.{{/i}}</li>
+    <li>{{_i}}Navbar search form now requires use of the <code>.navbar-search</code> class and its input the use of <code>.search-query</code>. To position the search form, you <strong>must</strong> use <code>.pull-left</code> or <code>.pull-right</code>.{{/i}}</li>
+    <li>{{_i}}Added optional responsive markup for collapsing navbar contents for smaller resolutions and devices. <a href="./components.html#navbar">See navbar docs</a> for how to utilize.{{/i}}</li>
+  </ul>
   <h3>{{_i}}Dropdown menus{{/i}}</h3>
   <ul>
     <li>{{_i}}Updated the <code>.dropdown-menu</code> to tighten up spacing{{/i}}</li>