fixes #3858: add var for responsive navbar. also add additional examples to navbar docs

docs/components.html

@@ -1044,12 +1044,30 @@
 
           <h3>Brand</h3>
           <p>A simple link to show your brand or project name only requires an anchor tag.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <a class="brand" href="#">Title</a>
+              </div>
+            </div>
+          </div>
 <pre class="prettyprint linenums">
 &lt;a class="brand" href="#"&gt;Project name&lt;/a&gt;
 </pre>
 
           <h3>Nav links</h3>
           <p>Nav items are simple to add via unordered lists.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <ul class="nav">
+                  <li class="active"><a href="#">Home</a></li>
+                  <li><a href="#">Link</a></li>
+                  <li><a href="#">Link</a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   &lt;li class="active"&gt;
@@ -1060,6 +1078,20 @@
 &lt;/ul&gt;
 </pre>
           <p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <ul class="nav">
+                  <li class="active"><a href="#">Home</a></li>
+                  <li class="divider-vertical"></li>
+                  <li><a href="#">Link</a></li>
+                  <li class="divider-vertical"></li>
+                  <li><a href="#">Link</a></li>
+                  <li class="divider-vertical"></li>
+                </ul>
+              </div>
+            </div>
+          </div>
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   ...
@@ -1070,6 +1102,15 @@
 
           <h3>Forms</h3>
           <p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <form class="navbar-form pull-left">
+                  <input type="text" class="span2">
+                </form>
+              </div>
+            </div>
+          </div>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-form pull-left"&gt;
   &lt;input type="text" class="span2"&gt;
@@ -1078,6 +1119,15 @@
 
           <h3>Search form</h3>
           <p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <form class="navbar-search pull-left">
+                  <input type="text" class="search-query" placeholder="Search">
+                </form>
+              </div>
+            </div>
+          </div>
 <pre class="prettyprint linenums">
 &lt;form class="navbar-search pull-left"&gt;
   &lt;input type="text" class="search-query" placeholder="Search"&gt;

docs/templates/pages/components.mustache

@@ -973,12 +973,30 @@
 
           <h3>{{_i}}Brand{{/i}}</h3>
           <p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <a class="brand" href="#">{{_i}}Title{{/i}}</a>
+              </div>
+            </div>
+          </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
 </pre>
 
           <h3>{{_i}}Nav links{{/i}}</h3>
           <p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <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>
+                </ul>
+              </div>
+            </div>
+          </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   &lt;li class="active"&gt;
@@ -989,6 +1007,20 @@
 &lt;/ul&gt;
 </pre>
           <p>{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <ul class="nav">
+                  <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+                  <li class="divider-vertical"></li>
+                  <li><a href="#">{{_i}}Link{{/i}}</a></li>
+                  <li class="divider-vertical"></li>
+                  <li><a href="#">{{_i}}Link{{/i}}</a></li>
+                  <li class="divider-vertical"></li>
+                </ul>
+              </div>
+            </div>
+          </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;ul class="nav"&gt;
   ...
@@ -999,6 +1031,15 @@
 
           <h3>{{_i}}Forms{{/i}}</h3>
           <p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <form class="navbar-form pull-left">
+                  <input type="text" class="span2">
+                </form>
+              </div>
+            </div>
+          </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;form class="navbar-form pull-left"&gt;
   &lt;input type="text" class="span2"&gt;
@@ -1007,6 +1048,15 @@
 
           <h3>{{_i}}Search form{{/i}}</h3>
           <p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
+          <div class="bs-docs-example">
+            <div class="navbar">
+              <div class="navbar-inner">
+                <form class="navbar-search pull-left">
+                  <input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
+                </form>
+              </div>
+            </div>
+          </div>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;form class="navbar-search pull-left"&gt;
   &lt;input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}"&gt;

less/responsive-navbar.less

@@ -5,7 +5,7 @@
 
 // TABLETS AND BELOW
 // -----------------
-@media (max-width: 979px) {
+@media (max-width: @navbarCollapseWidth) {
 
   // UNFIX THE TOPBAR
   // ----------------

less/variables.less

@@ -154,6 +154,8 @@
 
 // Navbar
 // -------------------------
+@navbarCollapseWidth:             979px;
+
 @navbarHeight:                    40px;
 @navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
 @navbarBackgroundHighlight:       #ffffff;