From 04164e4367134103a2ca94e49785a18b17032ec3 Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
Date: Mon, 30 Jul 2012 10:24:41 -0700
Subject: [PATCH] fixes #3858: add var for responsive navbar. also add
 additional examples to navbar docs

---
 docs/components.html                     | 50 ++++++++++++++++++++++++
 docs/templates/pages/components.mustache | 50 ++++++++++++++++++++++++
 less/responsive-navbar.less              |  2 +-
 less/variables.less                      |  2 +
 4 files changed, 103 insertions(+), 1 deletion(-)

diff --git a/docs/components.html b/docs/components.html
index 8399b4297d..d6d4cc1bcd 100644
--- a/docs/components.html
+++ b/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;
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 7c94999470..f0f19ee723 100644
--- a/docs/templates/pages/components.mustache
+++ b/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;
diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less
index 7f01059ce5..d684fcafa1 100644
--- a/less/responsive-navbar.less
+++ b/less/responsive-navbar.less
@@ -5,7 +5,7 @@
 
 // TABLETS AND BELOW
 // -----------------
-@media (max-width: 979px) {
+@media (max-width: @navbarCollapseWidth) {
 
   // UNFIX THE TOPBAR
   // ----------------
diff --git a/less/variables.less b/less/variables.less
index 9c914d8741..7d627f9ee3 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -154,6 +154,8 @@
 
 // Navbar
 // -------------------------
+@navbarCollapseWidth:             979px;
+
 @navbarHeight:                    40px;
 @navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
 @navbarBackgroundHighlight:       #ffffff;