More navbar CSS and docs cleanup

* Rearrange sections
* Add code snippets for text and links in navbars
* Add .navbar-link back in
* Add mention of .navbar-text, but it still needs to be re-implemented
* Update nav to reflect new order

diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html
index ebeb0d82800409d547d579b1efbe69cfcd7f5e0c..2c001a3f4cb48c56fffbf18775d8043b2c2f42c9 100644 (file)
--- a/docs/_includes/docs-nav.html
+++ b/docs/_includes/docs-nav.html
@@ -122,8 +122,9 @@
         <li><a href="#navbar-nav">Nav links</a></li>
         <li><a href="#navbar-forms">Forms in navbars</a></li>
         <li><a href="#navbar-buttons">Buttons in navbars</a></li>
-        <li><a href="#navbar-component-alignment">Component alignment</a></li>
         <li><a href="#navbar-text">Text in navbars</a></li>
+        <li><a href="#navbar-links">Links in navbars</a></li>
+        <li><a href="#navbar-component-alignment">Component alignment</a></li>
         <li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
         <li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
         <li><a href="#navbar-static-top">Static top navbar</a></li>

diff --git a/docs/docs.html b/docs/docs.html
index e4f711381838008c3ae090d291d1107ba7be3b1c..3b092f8047d8a72156e8544003bbb83fff39e56d 100644 (file)
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -3488,9 +3488,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <form class="navbar-form pull-left">
           <select name="" id="" style="width: 200px;">
             <option value="1">1</option>
-            <option value="1">1</option>
-            <option value="1">1</option>
-            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
           </select>
           <button type="submit" class="btn">Submit</button>
         </form>
@@ -3508,7 +3508,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <form class="navbar-form pull-left">
           <input type="text" style="width: 200px;">
           <label class="checkbox-inline">
-            <input type="checkbox"> Derp
+            <input type="checkbox"> Remember me
           </label>
           <button type="submit" class="btn">Submit</button>
         </form>
@@ -3526,16 +3526,43 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p>
     <div class="bs-docs-example">
       <div class="navbar">
-        <a href="#" class="navbar-brand">Derp</a>
+        <a href="#" class="navbar-brand">Brand</a>
         <button type="button" class="btn">Submit</button>
       </div>
     </div>
 
-    <h3 id="navbar-component-alignment">Component alignment</h3>
-    <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
-
     <h3 id="navbar-text">Text</h3>
     <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <a href="#" class="navbar-brand">Brand</a>
+        <p class="navbar-text">Signed in as Mark Otto</p>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="navbar">
+  <a href="#" class="navbar-brand">Brand</a>
+  <p class="navbar-text">Signed in as Mark Otto</p>
+</div>
+{% endhighlight %}
+
+    <h3 id="navbar-links">Links</h3>
+    <p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
+    <div class="bs-docs-example">
+      <div class="navbar">
+        <a href="#" class="navbar-brand">Brand</a>
+        <p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+      </div>
+    </div>
+{% highlight html linenos %}
+<div class="navbar">
+  <a href="#" class="navbar-brand">Brand</a>
+  <p class="pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+</div>
+{% endhighlight %}
+
+    <h3 id="navbar-component-alignment">Component alignment</h3>
+    <p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
 
 
     <h2>Optional display variations</h2>

diff --git a/less/navbar.less b/less/navbar.less
index 9511670cd5b9ca0bb9f547504e01e6d5a7f43826..6cee4030c4b0c37911b26f64b82836c278a0fcfe 100644 (file)
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -300,7 +300,8 @@
 }
 
 
-// Buttons in navbar
+
+// Buttons in navbars
 //
 // Vertically center a button within a navbar (when *not* in a form).
 
@@ -308,10 +309,23 @@
   margin-top: ((@navbar-height - @input-height-base) / 2);
 }
 
-/*
 
-// Janky solution for now to account for links outside the .nav
-// -------------------------
+
+// Text in navbars
+//
+// Add a class to make any element properly align itself vertically within the navbars.
+
+.navbar-text {
+
+}
+
+
+
+// Links in navbars
+//
+// Add a class to ensure links outside the navbar nav are colored correctly.
+
+// Default navbar variables
 .navbar-link {
   color: @navbar-link-color;
   &:hover {
@@ -319,4 +333,10 @@
   }
 }
 
-*/
+// Use the inverse navbar variables
+.navbar-inverse .navbar-link {
+  color: @navbar-inverse-link-color;
+  &:hover {
+    color: @navbar-inverse-link-hover-color;
+  }
+}