update the subnav on all pages

diff --git a/bootstrap.css b/bootstrap.css
index c626cb0f50e314f7279fbe7f795355461d236cca..49f31bc1d6b9abefb8d26a3237a5b42286e57ac0 100644 (file)
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Tue Jan 24 18:24:24 PST 2012
+ * Date: Tue Jan 24 19:19:33 PST 2012
  */
 article,
 aside,

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index dd723800b2e9da6385f1713bb8ed172cbb5bfe7a..776ca58b91788eddb0c1d88150e9d05a5bc2ffd6 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -125,7 +125,9 @@ section {
 }
 
 /* Subnav */
-.subhead .nav {
+.subnav {
+  width: 100%;
+  height: 36px;
   background-color: #eeeeee; /* Old browsers */
   background-repeat: repeat-x; /* Repeat the gradient */
   background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
@@ -138,23 +140,30 @@ section {
   border: 1px solid #e5e5e5;
   -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
-          border-radius: 4px;
+          border-radius: 4px;  
+}
+.subhead .nav {
 }
 .subhead .nav a {
   margin: 0;
   padding-top: 11px;
   padding-bottom: 11px;
   font-size: 13px;
+  color: #777;
   border-left: 1px solid #f5f5f5;
   border-right: 1px solid #e5e5e5;
   -webkit-border-radius: 0;
      -moz-border-radius: 0;
           border-radius: 0;
 }
+.subhead .nav a:hover,
 .subhead .nav .active a {
-  background-color: #fff;
+  background-color: transparent;
   color: #333;
 }
+.subhead .nav .active a {
+  background-color: #eee;
+}
 .subhead .nav li:first-child a {
   border-left: 0;
   -webkit-border-radius: 4px 0 0 4px;
@@ -165,17 +174,24 @@ section {
   border-right: 0;
 }
 
-.subhead .subnav-fixed {
+.subnav-fixed {
   position: fixed;
   top: 40px;
+  left: 0;
+  right: 0;
   z-index: 1030;
-  width: 938px;
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
-  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.05);
-     -moz-box-shadow: 0 1px 5px rgba(0,0,0,.05);
-          box-shadow: 0 1px 5px rgba(0,0,0,.05);
+  border-color: #d5d5d5;
+  border-width: 0 0 1px; /* drop the border on the fixed edges */
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -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);
+}
+.subnav-fixed .nav {
+  width: 940px;
+  margin: 0 auto;
 }
 
 
@@ -438,7 +454,7 @@ h2 + .row {
 
 /* Example sites showcase */
 .example-sites img {
-  max-width: 290px;
+  max-width: 100%;
 }
 .marketing-byline {
   margin: -18px 0 27px;

diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index 4b7efe53fcccbc43a0844775ddaff2c7917078a8..0252d75e968cc30eb03d70aee6cd5100c41622a9 100644 (file)
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -118,8 +118,8 @@ $(function(){
 
   // fix sub nav playa
   var $win = $(window)
-    , $nav = $('.subhead .nav')
-    , navTop = $('.subhead .nav').offset().top - 40
+    , $nav = $('.subnav')
+    , navTop = $('.subnav').offset().top - 40
     , isFixed = 0
 
   processScroll()

diff --git a/docs/base-css.html b/docs/base-css.html
index bcb0c7d218ca0607b4ac08b2a0049622d81b6470..c849a299e0dac8502095a981b244bcd26a975034 100644 (file)
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -63,13 +63,15 @@
 <header class="jumbotron subhead" id="overview">
   <h1>Base CSS</h1>
   <p class="lead">On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.</p>
-  <ul class="nav pills">
-    <li><a href="./base-css.html#typography">Typography</a></li>
-    <li><a href="./base-css.html#tables">Tables</a></li>
-    <li><a href="./base-css.html#forms">Forms</a></li>
-    <li><a href="./base-css.html#buttons">Buttons</a></li>
-    <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
-  </ul>
+  <div class="subnav">
+    <ul class="nav pills">
+      <li><a href="./base-css.html#typography">Typography</a></li>
+      <li><a href="./base-css.html#tables">Tables</a></li>
+      <li><a href="./base-css.html#forms">Forms</a></li>
+      <li><a href="./base-css.html#buttons">Buttons</a></li>
+      <li><a href="./base-css.html#icons">Icons by Glyphicons</a></li>
+    </ul>
+  </div>
 </header>
 
 

diff --git a/docs/components.html b/docs/components.html
index 9d28b9e06be26f45f010505bb2d525de6bbb2f45..50c615fb9eeaa12d692575b224c23616f557f3ed 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -58,11 +58,12 @@
 
     <div class="container">
 
-  <!-- Masthead
-  ================================================== -->
-  <header class="jumbotron subhead" id="overview">
-    <h1>Components</h1>
-    <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>Components</h1>
+  <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
+  <div class="subnav">
     <ul class="nav pills">
       <li><a href="./components.html#buttonGroups">Button groups</a></li>
       <li><a href="./components.html#buttonDropdowns">Button dropdowns</a></li>
@@ -74,51 +75,52 @@
       <li><a href="./components.html#alerts">Alerts</a></li>
       <li><a href="./components.html#progress">Progress bars</a></li>
     </ul>
-  </header>
+  </div>
+</header>
 
 
 
-  <!-- Button Groups
-  ================================================== -->
-  <section id="buttonGroups">
-    <div class="page-header">
-      <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
-    </div>
-    <div class="row">
-      <div class="span4">
-        <h3>Button groups</h3>
-        <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
-        <p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
-        <div class="well" style="padding: 10px; margin-bottom: 9px;">
+<!-- Button Groups
+================================================== -->
+<section id="buttonGroups">
+  <div class="page-header">
+    <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3>Button groups</h3>
+      <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.</p>
+      <p>You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.</p>
+      <div class="well" style="padding: 10px; margin-bottom: 9px;">
+        <div class="btn-group">
+          <a class="btn" href="#">Left</a>
+          <a class="btn" href="#">Middle</a>
+          <a class="btn" href="#">Right</a>
+        </div>
+      </div>
+      <div class="well" style="padding: 10px;">
+        <div class="btn-toolbar">
           <div class="btn-group">
-            <a class="btn" href="#">Left</a>
-            <a class="btn" href="#">Middle</a>
-            <a class="btn" href="#">Right</a>
+            <a class="btn" href="#">1</a>
+            <a class="btn" href="#">2</a>
+            <a class="btn" href="#">3</a>
+            <a class="btn" href="#">4</a>
           </div>
-        </div>
-        <div class="well" style="padding: 10px;">
-          <div class="btn-toolbar">
-            <div class="btn-group">
-              <a class="btn" href="#">1</a>
-              <a class="btn" href="#">2</a>
-              <a class="btn" href="#">3</a>
-              <a class="btn" href="#">4</a>
-            </div>
-            <div class="btn-group">
-              <a class="btn" href="#">5</a>
-              <a class="btn" href="#">6</a>
-              <a class="btn" href="#">7</a>
-            </div>
-            <div class="btn-group">
-              <a class="btn" href="#">8</a>
-            </div>
+          <div class="btn-group">
+            <a class="btn" href="#">5</a>
+            <a class="btn" href="#">6</a>
+            <a class="btn" href="#">7</a>
+          </div>
+          <div class="btn-group">
+            <a class="btn" href="#">8</a>
           </div>
         </div>
-
       </div>
-      <div class="span4">
-        <h3>Example markup</h3>
-        <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
+
+    </div>
+    <div class="span4">
+      <h3>Example markup</h3>
+      <p>Here's how the HTML looks for a standard button group built with anchor tag buttons:</p>
 <pre class="prettyprint linenums">
 &lt;div class="btn-group"&gt;
   &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
@@ -134,95 +136,95 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-      </div>
-      <div class="span4">
-        <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>
-      </div>
     </div>
-  </section>
+    <div class="span4">
+      <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>
+    </div>
+  </div>
+</section>
 
 
 
-  <!-- Split button dropdowns
-  ================================================== -->
-  <section id="buttonDropdowns">
-    <div class="page-header">
-      <h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1>
+<!-- Split button dropdowns
+================================================== -->
+<section id="buttonDropdowns">
+  <div class="page-header">
+    <h1>Split button dropdowns <small>Built on button groups to provide contextual menus</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3>Split button dropdowns</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="well" style="padding: 10px; margin-bottom: 9px;">
+        <div class="btn-toolbar" style="margin-bottom: 9px;">
+          <div class="btn-group">
+            <a class="btn" href="#">Action</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">
+            <a class="btn primary" href="#">Action</a>
+            <a class="btn primary 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">
+            <a class="btn danger" href="#">Danger</a>
+            <a class="btn danger 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>
+        <div class="btn-toolbar">
+          <div class="btn-group">
+            <a class="btn success" href="#">Success</a>
+            <a class="btn success 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">
+            <a class="btn info" href="#">Info</a>
+            <a class="btn info 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>
+      </div> <!-- /well -->
     </div>
-    <div class="row">
-      <div class="span4">
-        <h3>Split button dropdowns</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="well" style="padding: 10px; margin-bottom: 9px;">
-          <div class="btn-toolbar" style="margin-bottom: 9px;">
-            <div class="btn-group">
-              <a class="btn" href="#">Action</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">
-              <a class="btn primary" href="#">Action</a>
-              <a class="btn primary 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">
-              <a class="btn danger" href="#">Danger</a>
-              <a class="btn danger 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>
-          <div class="btn-toolbar">
-            <div class="btn-group">
-              <a class="btn success" href="#">Success</a>
-              <a class="btn success 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">
-              <a class="btn info" href="#">Info</a>
-              <a class="btn info 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>
-        </div> <!-- /well -->
-      </div>
-      <div class="span8">
-        <h3>Example markup</h3>
-        <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
+    <div class="span8">
+      <h3>Example markup</h3>
+      <p>Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.</p>
 <pre class="prettyprint linenums">
 &lt;div class="btn-group"&gt;
   &lt;a class="btn" href="#"&gt;Action&lt;/a&gt;
@@ -234,9 +236,9 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
-      </div>
     </div>
-  </section>
+  </div>
+</section>
 
 
 
@@ -528,11 +530,6 @@
 
   <h3>Tabbable in any direction</h3>
   <div class="row">
-<!--
-    <div class="span4">
-      <p>Swap the order of your HTML&mdash;placing <code>.tabs</code> after <code>.tab-content</code>&mdash;for tabs on the bottom.</p>
-    </div>
--->
     <div class="span4">
       <h4>Tabs on the bottom</h4>
       <p>Flip the order of the HTML and add a class to put tabs on the bottom.</p>

diff --git a/docs/javascript.html b/docs/javascript.html
index 472285cc92b3e8d71f08dafa4f4e7d9e163e8945..396bf15bc231ae5dbc113575a0abf1190c717a8e 100644 (file)
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -63,20 +63,22 @@
       <header class="jumbotron subhead" id="overview">
         <h1>Javascript for Bootstrap</h1>
         <p class="lead">Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.
-        <ul class="nav pills">
-          <li><a href="./javascript.html#javascript">Overview</a></li>
-          <li><a href="./javascript.html#modals">Modal</a></li>
-          <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
-          <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
-          <li><a href="./javascript.html#tabs">Tab</a></li>
-          <li><a href="./javascript.html#tooltips">Tooltip</a></li>
-          <li><a href="./javascript.html#popovers">Popover</a></li>
-          <li><a href="./javascript.html#alerts">Alert</a></li>
-          <li><a href="./javascript.html#buttons">Button</a></li>
-          <li><a href="./javascript.html#collapse">Collapse</a></li>
-          <li><a href="./javascript.html#carousel">Carousel</a></li>
-          <li><a href="./javascript.html#typeahead">Typeahead</a></li>
-        </ul>
+        <div class="subnav">
+          <ul class="nav pills">
+            <li><a href="./javascript.html#javascript">Overview</a></li>
+            <li><a href="./javascript.html#modals">Modal</a></li>
+            <li><a href="./javascript.html#dropdowns">Dropdown</a></li>
+            <li><a href="./javascript.html#scrollspy">Scrollspy</a></li>
+            <li><a href="./javascript.html#tabs">Tab</a></li>
+            <li><a href="./javascript.html#tooltips">Tooltip</a></li>
+            <li><a href="./javascript.html#popovers">Popover</a></li>
+            <li><a href="./javascript.html#alerts">Alert</a></li>
+            <li><a href="./javascript.html#buttons">Button</a></li>
+            <li><a href="./javascript.html#collapse">Collapse</a></li>
+            <li><a href="./javascript.html#carousel">Carousel</a></li>
+            <li><a href="./javascript.html#typeahead">Typeahead</a></li>
+          </ul>
+        </div>
       </header>
 
 

diff --git a/docs/less.html b/docs/less.html
index c8c1540b5938413f651ebbbd0c3b5b1b6d5c0f8a..86a65a6c7eca9c9286dc2007faa803a7659ba5a4 100644 (file)
--- a/docs/less.html
+++ b/docs/less.html
@@ -67,12 +67,14 @@
       <header class="jumbotron subhead" id="overview">
         <h1>Using LESS with Bootstrap</h1>
         <p class="lead">Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p>
-        <ul class="nav pills">
-          <li><a href="./less.html#builtWith">Built with Less</a></li>
-          <li><a href="./less.html#variables">Variables</a></li>
-          <li><a href="./less.html#mixins">Mixins</a></li>
-          <li><a href="./less.html#compiling">Compiling Bootstrap</a></li>
-        </ul>
+        <div class="subnav">
+          <ul class="nav pills">
+            <li><a href="./less.html#builtWith">Built with Less</a></li>
+            <li><a href="./less.html#variables">Variables</a></li>
+            <li><a href="./less.html#mixins">Mixins</a></li>
+            <li><a href="./less.html#compiling">Compiling Bootstrap</a></li>
+          </ul>
+        </div>
       </header>
 
 

diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index 1fd8363aebe53412fac54567d2445099a6b193bd..bb18b03945929b2f79e7da7ae2f493ed36acfda0 100644 (file)
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -63,11 +63,13 @@
       <header class="jumbotron subhead" id="overview">
         <h1>Scaffolding</h1>
         <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>
-        <ul class="nav pills">
-          <li><a href="./scaffolding.html#grid-system">Grid system</a></li>
-          <li><a href="./scaffolding.html#layouts">Layouts</a></li>
-          <li><a href="./scaffolding.html#responsive">Responsive design</a></li>
-        </ul>
+        <div class="subnav">
+          <ul class="nav pills">
+            <li><a href="./scaffolding.html#grid-system">Grid system</a></li>
+            <li><a href="./scaffolding.html#layouts">Layouts</a></li>
+            <li><a href="./scaffolding.html#responsive">Responsive design</a></li>
+          </ul>
+        </div>
       </header>
 
 

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 5552d6735d8987e2a8f7f003c6fadf15eb9ea95a..41722aa7101a2a598f68b8b1417ac89d8b63b825 100644 (file)
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -3,13 +3,15 @@
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Base CSS{{/i}}</h1>
   <p class="lead">{{_i}}On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.{{/i}}</p>
-  <ul class="nav pills">
-    <li><a href="./base-css.html#typography">{{_i}}Typography{{/i}}</a></li>
-    <li><a href="./base-css.html#tables">{{_i}}Tables{{/i}}</a></li>
-    <li><a href="./base-css.html#forms">{{_i}}Forms{{/i}}</a></li>
-    <li><a href="./base-css.html#buttons">{{_i}}Buttons{{/i}}</a></li>
-    <li><a href="./base-css.html#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
-  </ul>
+  <div class="subnav">
+    <ul class="nav pills">
+      <li><a href="./base-css.html#typography">{{_i}}Typography{{/i}}</a></li>
+      <li><a href="./base-css.html#tables">{{_i}}Tables{{/i}}</a></li>
+      <li><a href="./base-css.html#forms">{{_i}}Forms{{/i}}</a></li>
+      <li><a href="./base-css.html#buttons">{{_i}}Buttons{{/i}}</a></li>
+      <li><a href="./base-css.html#icons">{{_i}}Icons by Glyphicons{{/i}}</a></li>
+    </ul>
+  </div>
 </header>
 
 

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 5282e6178538ca50793a1a3b603d83f56a221a64..36fc84281b7c8d33839c14c63382c0b75f66b100 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1,8 +1,9 @@
-  <!-- Masthead
-  ================================================== -->
-  <header class="jumbotron subhead" id="overview">
-    <h1>{{_i}}Components{{/i}}</h1>
-    <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
+<!-- Masthead
+================================================== -->
+<header class="jumbotron subhead" id="overview">
+  <h1>{{_i}}Components{{/i}}</h1>
+  <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
+  <div class="subnav">
     <ul class="nav pills">
       <li><a href="./components.html#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
       <li><a href="./components.html#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
@@ -14,51 +15,52 @@
       <li><a href="./components.html#alerts">{{_i}}Alerts{{/i}}</a></li>
       <li><a href="./components.html#progress">{{_i}}Progress bars{{/i}}</a></li>
     </ul>
-  </header>
+  </div>
+</header>
 
 
 
-  <!-- Button Groups
-  ================================================== -->
-  <section id="buttonGroups">
-    <div class="page-header">
-      <h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
-    </div>
-    <div class="row">
-      <div class="span4">
-        <h3>{{_i}}Button groups{{/i}}</h3>
-        <p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
-        <p>{{_i}}You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.{{/i}}</p>
-        <div class="well" style="padding: 10px; margin-bottom: 9px;">
+<!-- Button Groups
+================================================== -->
+<section id="buttonGroups">
+  <div class="page-header">
+    <h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Button groups{{/i}}</h3>
+      <p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements.{{/i}}</p>
+      <p>{{_i}}You can also combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex projects.{{/i}}</p>
+      <div class="well" style="padding: 10px; margin-bottom: 9px;">
+        <div class="btn-group">
+          <a class="btn" href="#">{{_i}}Left{{/i}}</a>
+          <a class="btn" href="#">{{_i}}Middle{{/i}}</a>
+          <a class="btn" href="#">{{_i}}Right{{/i}}</a>
+        </div>
+      </div>
+      <div class="well" style="padding: 10px;">
+        <div class="btn-toolbar">
           <div class="btn-group">
-            <a class="btn" href="#">{{_i}}Left{{/i}}</a>
-            <a class="btn" href="#">{{_i}}Middle{{/i}}</a>
-            <a class="btn" href="#">{{_i}}Right{{/i}}</a>
+            <a class="btn" href="#">1</a>
+            <a class="btn" href="#">2</a>
+            <a class="btn" href="#">3</a>
+            <a class="btn" href="#">4</a>
           </div>
-        </div>
-        <div class="well" style="padding: 10px;">
-          <div class="btn-toolbar">
-            <div class="btn-group">
-              <a class="btn" href="#">1</a>
-              <a class="btn" href="#">2</a>
-              <a class="btn" href="#">3</a>
-              <a class="btn" href="#">4</a>
-            </div>
-            <div class="btn-group">
-              <a class="btn" href="#">5</a>
-              <a class="btn" href="#">6</a>
-              <a class="btn" href="#">7</a>
-            </div>
-            <div class="btn-group">
-              <a class="btn" href="#">8</a>
-            </div>
+          <div class="btn-group">
+            <a class="btn" href="#">5</a>
+            <a class="btn" href="#">6</a>
+            <a class="btn" href="#">7</a>
+          </div>
+          <div class="btn-group">
+            <a class="btn" href="#">8</a>
           </div>
         </div>
-
       </div>
-      <div class="span4">
-        <h3>{{_i}}Example markup{{/i}}</h3>
-        <p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
+
+    </div>
+    <div class="span4">
+      <h3>{{_i}}Example markup{{/i}}</h3>
+      <p>{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;div class="btn-group"&gt;
   &lt;a class="btn" href="#"&gt;1&lt;/a&gt;
@@ -74,95 +76,95 @@
   &lt;/div&gt;
 &lt;/div&gt;
 </pre>
-      </div>
-      <div class="span4">
-        <h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
-        <p>{{_i}}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.{{/i}}</p>
-        <p><a class="btn js-btn" href="./javascript.html#buttons">{{_i}}Get the javascript &raquo;{{/i}}</a></p>
-        <hr>
-        <h4 class="muted">{{_i}}Heads up{{/i}}</h4>
-        <p class="muted">{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}</p>
-      </div>
     </div>
-  </section>
+    <div class="span4">
+      <h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
+      <p>{{_i}}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.{{/i}}</p>
+      <p><a class="btn js-btn" href="./javascript.html#buttons">{{_i}}Get the javascript &raquo;{{/i}}</a></p>
+      <hr>
+      <h4 class="muted">{{_i}}Heads up{{/i}}</h4>
+      <p class="muted">{{_i}}CSS for button groups is in a separate file, button-groups.less.{{/i}}</p>
+    </div>
+  </div>
+</section>
 
 
 
-  <!-- Split button dropdowns
-  ================================================== -->
-  <section id="buttonDropdowns">
-    <div class="page-header">
-      <h1>{{_i}}Split button dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
+<!-- Split button dropdowns
+================================================== -->
+<section id="buttonDropdowns">
+  <div class="page-header">
+    <h1>{{_i}}Split button dropdowns{{/i}} <small>{{_i}}Built on button groups to provide contextual menus{{/i}}</small></h1>
+  </div>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Split button dropdowns{{/i}}</h3>
+      <p>{{_i}}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.{{/i}}</p>
+      <div class="well" style="padding: 10px; margin-bottom: 9px;">
+        <div class="btn-toolbar" style="margin-bottom: 9px;">
+          <div class="btn-group">
+            <a class="btn" href="#">{{_i}}Action{{/i}}</a>
+            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
+          </div><!-- /btn-group -->
+          <div class="btn-group">
+            <a class="btn primary" href="#">{{_i}}Action{{/i}}</a>
+            <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
+          </div><!-- /btn-group -->
+          <div class="btn-group">
+            <a class="btn danger" href="#">{{_i}}Danger{{/i}}</a>
+            <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
+          </div><!-- /btn-group -->
+        </div>
+        <div class="btn-toolbar">
+          <div class="btn-group">
+            <a class="btn success" href="#">{{_i}}Success{{/i}}</a>
+            <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
+          </div><!-- /btn-group -->
+          <div class="btn-group">
+            <a class="btn info" href="#">{{_i}}Info{{/i}}</a>
+            <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
+          </div><!-- /btn-group -->
+        </div>
+      </div> <!-- /well -->
     </div>
-    <div class="row">
-      <div class="span4">
-        <h3>{{_i}}Split button dropdowns{{/i}}</h3>
-        <p>{{_i}}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.{{/i}}</p>
-        <div class="well" style="padding: 10px; margin-bottom: 9px;">
-          <div class="btn-toolbar" style="margin-bottom: 9px;">
-            <div class="btn-group">
-              <a class="btn" href="#">{{_i}}Action{{/i}}</a>
-              <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
-            </div><!-- /btn-group -->
-            <div class="btn-group">
-              <a class="btn primary" href="#">{{_i}}Action{{/i}}</a>
-              <a class="btn primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
-            </div><!-- /btn-group -->
-            <div class="btn-group">
-              <a class="btn danger" href="#">{{_i}}Danger{{/i}}</a>
-              <a class="btn danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
-            </div><!-- /btn-group -->
-          </div>
-          <div class="btn-toolbar">
-            <div class="btn-group">
-              <a class="btn success" href="#">{{_i}}Success{{/i}}</a>
-              <a class="btn success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
-            </div><!-- /btn-group -->
-            <div class="btn-group">
-              <a class="btn info" href="#">{{_i}}Info{{/i}}</a>
-              <a class="btn info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></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>
-            </div><!-- /btn-group -->
-          </div>
-        </div> <!-- /well -->
-      </div>
-      <div class="span8">
-        <h3>{{_i}}Example markup{{/i}}</h3>
-        <p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
+    <div class="span8">
+      <h3>{{_i}}Example markup{{/i}}</h3>
+      <p>{{_i}}Similar to a button group, our markup uses regular button markup, but with a handful of additions to refine the style and support Bootstrap's dropdown jQuery plugin.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;div class="btn-group"&gt;
   &lt;a class="btn" href="#"&gt;{{_i}}Action{{/i}}&lt;/a&gt;
@@ -174,9 +176,9 @@
   &lt;/ul&gt;
 &lt;/div&gt;
 </pre>
-      </div>
     </div>
-  </section>
+  </div>
+</section>
 
 
 
@@ -468,11 +470,6 @@
 
   <h3>{{_i}}Tabbable in any direction{{/i}}</h3>
   <div class="row">
-<!--
-    <div class="span4">
-      <p>Swap the order of your HTML&mdash;placing <code>.tabs</code> after <code>.tab-content</code>&mdash;for tabs on the bottom.</p>
-    </div>
--->
     <div class="span4">
       <h4>{{_i}}Tabs on the bottom{{/i}}</h4>
       <p>{{_i}}Flip the order of the HTML and add a class to put tabs on the bottom.{{/i}}</p>

diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index 9fd431f2fd31f8e0aff1a22349779fb66fc92661..b6b16fef21625d1634b27d1ea2fb922d59d38c24 100644 (file)
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -3,20 +3,22 @@
       <header class="jumbotron subhead" id="overview">
         <h1>{{_i}}Javascript for Bootstrap{{/i}}</h1>
         <p class="lead">{{_i}}Bring Bootstrap's components to life&mdash;now with 12 custom <a href="http://jquery.com/" target="_blank">jQuery</a> plugins.{{/i}}
-        <ul class="nav pills">
-          <li><a href="./javascript.html#javascript">{{_i}}Overview{{/i}}</a></li>
-          <li><a href="./javascript.html#modals">{{_i}}Modal{{/i}}</a></li>
-          <li><a href="./javascript.html#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
-          <li><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
-          <li><a href="./javascript.html#tabs">{{_i}}Tab{{/i}}</a></li>
-          <li><a href="./javascript.html#tooltips">{{_i}}Tooltip{{/i}}</a></li>
-          <li><a href="./javascript.html#popovers">{{_i}}Popover{{/i}}</a></li>
-          <li><a href="./javascript.html#alerts">{{_i}}Alert{{/i}}</a></li>
-          <li><a href="./javascript.html#buttons">{{_i}}Button{{/i}}</a></li>
-          <li><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></li>
-          <li><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></li>
-          <li><a href="./javascript.html#typeahead">{{_i}}Typeahead{{/i}}</a></li>
-        </ul>
+        <div class="subnav">
+          <ul class="nav pills">
+            <li><a href="./javascript.html#javascript">{{_i}}Overview{{/i}}</a></li>
+            <li><a href="./javascript.html#modals">{{_i}}Modal{{/i}}</a></li>
+            <li><a href="./javascript.html#dropdowns">{{_i}}Dropdown{{/i}}</a></li>
+            <li><a href="./javascript.html#scrollspy">{{_i}}Scrollspy{{/i}}</a></li>
+            <li><a href="./javascript.html#tabs">{{_i}}Tab{{/i}}</a></li>
+            <li><a href="./javascript.html#tooltips">{{_i}}Tooltip{{/i}}</a></li>
+            <li><a href="./javascript.html#popovers">{{_i}}Popover{{/i}}</a></li>
+            <li><a href="./javascript.html#alerts">{{_i}}Alert{{/i}}</a></li>
+            <li><a href="./javascript.html#buttons">{{_i}}Button{{/i}}</a></li>
+            <li><a href="./javascript.html#collapse">{{_i}}Collapse{{/i}}</a></li>
+            <li><a href="./javascript.html#carousel">{{_i}}Carousel{{/i}}</a></li>
+            <li><a href="./javascript.html#typeahead">{{_i}}Typeahead{{/i}}</a></li>
+          </ul>
+        </div>
       </header>
 
 

diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index b5cff2d114019b4d30da3e232e38a535676573d3..ea7058fd9b6e36a93657454bd425fc8d497a8f85 100644 (file)
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -7,12 +7,14 @@
       <header class="jumbotron subhead" id="overview">
         <h1>{{_i}}Using LESS with Bootstrap{{/i}}</h1>
         <p class="lead">{{_i}}Customize and extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p>
-        <ul class="nav pills">
-          <li><a href="./less.html#builtWith">{{_i}}Built with Less{{/i}}</a></li>
-          <li><a href="./less.html#variables">{{_i}}Variables{{/i}}</a></li>
-          <li><a href="./less.html#mixins">{{_i}}Mixins{{/i}}</a></li>
-          <li><a href="./less.html#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
-        </ul>
+        <div class="subnav">
+          <ul class="nav pills">
+            <li><a href="./less.html#builtWith">{{_i}}Built with Less{{/i}}</a></li>
+            <li><a href="./less.html#variables">{{_i}}Variables{{/i}}</a></li>
+            <li><a href="./less.html#mixins">{{_i}}Mixins{{/i}}</a></li>
+            <li><a href="./less.html#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
+          </ul>
+        </div>
       </header>
 
 

diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index a8638f2735e3f52b7fa6075aaf8f2a85667de2ae..ed80dabfca0f97979a91eb8d1aff9501829744b9 100644 (file)
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -3,11 +3,13 @@
       <header class="jumbotron subhead" id="overview">
         <h1>{{_i}}Scaffolding{{/i}}</h1>
         <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>
-        <ul class="nav pills">
-          <li><a href="./scaffolding.html#grid-system">{{_i}}Grid system{{/i}}</a></li>
-          <li><a href="./scaffolding.html#layouts">{{_i}}Layouts{{/i}}</a></li>
-          <li><a href="./scaffolding.html#responsive">{{_i}}Responsive design{{/i}}</a></li>
-        </ul>
+        <div class="subnav">
+          <ul class="nav pills">
+            <li><a href="./scaffolding.html#grid-system">{{_i}}Grid system{{/i}}</a></li>
+            <li><a href="./scaffolding.html#layouts">{{_i}}Layouts{{/i}}</a></li>
+            <li><a href="./scaffolding.html#responsive">{{_i}}Responsive design{{/i}}</a></li>
+          </ul>
+        </div>
       </header>