Add a .navbar-default class for default colors

* Extract color styles from .navbar { } and put them into
.navbar-default { }
* Change variable names
* Change the docs accordingly (i.e., add the .navbar-default class to
all default navbars)
* Change customizer accordingly

1 files changed, 12 insertions, 12 deletions

diff --git a/components.html b/components.html
index 6b3ca7053..0c84d60a6 100644
--- a/components.html
+++ b/components.html
@@ -1312,7 +1312,7 @@ base_url: "../"
 
     <h3>Tabs with dropdowns</h3>
     <div class="bs-example">
-      <nav class="navbar" role="navigation">
+      <nav class="navbar navbar-default" role="navigation">
         <ul class="nav nav-tabs">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Help</a></li>
@@ -1400,7 +1400,7 @@ base_url: "../"
     </div>
 
     <div class="bs-example">
-      <nav class="navbar" role="navigation">
+      <nav class="navbar navbar-default" role="navigation">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
@@ -1450,7 +1450,7 @@ base_url: "../"
       </nav>
     </div>
 {% highlight html %}
-<nav class="navbar" role="navigation">
+<nav class="navbar navbar-default" role="navigation">
   <!-- Brand and toggle get grouped for better mobile display -->
   <div class="navbar-header">
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
@@ -1514,7 +1514,7 @@ base_url: "../"
     <h2 id="navbar-buttons">Buttons</h2>
     <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-example">
-      <nav class="navbar" role="navigation">
+      <nav class="navbar navbar-default" role="navigation">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
             <span class="sr-only">Toggle navigation</span>
@@ -1537,7 +1537,7 @@ base_url: "../"
     <h2 id="navbar-text">Text</h2>
     <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-example">
-      <nav class="navbar" role="navigation">
+      <nav class="navbar navbar-default" role="navigation">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex3-collapse">
             <span class="sr-only">Toggle navigation</span>
@@ -1560,7 +1560,7 @@ base_url: "../"
     <h2 id="navbar-links">Non-nav links</h2>
     <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-example">
-      <nav class="navbar" role="navigation">
+      <nav class="navbar navbar-default" role="navigation">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse">
             <span class="sr-only">Toggle navigation</span>
@@ -1588,7 +1588,7 @@ base_url: "../"
     <h2 id="navbar-fixed-top">Fixed to top</h2>
     <p>Add <code>.navbar-fixed-top</code>.</p>
     <div class="bs-example bs-navbar-top-example">
-      <nav class="navbar navbar-fixed-top" role="navigation">
+      <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse">
@@ -1611,7 +1611,7 @@ base_url: "../"
       </nav>
     </div><!-- /example -->
 {% highlight html %}
-<nav class="navbar navbar-fixed-top" role="navigation">
+<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   ...
 </nav>
 {% endhighlight %}
@@ -1629,7 +1629,7 @@ body { padding-top: 70px; }
     <h2 id="navbar-fixed-bottom">Fixed to bottom</h2>
     <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
     <div class="bs-example bs-navbar-bottom-example">
-      <nav class="navbar navbar-fixed-bottom" role="navigation">
+      <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse">
@@ -1652,7 +1652,7 @@ body { padding-top: 70px; }
       </nav>
     </div><!-- /example -->
 {% highlight html %}
-<nav class="navbar navbar-fixed-bottom" role="navigation">
+<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
   ...
 </nav>
 {% endhighlight %}
@@ -1670,7 +1670,7 @@ body { padding-bottom: 70px; }
     <h2 id="navbar-static-top">Static top</h2>
     <p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
     <div class="bs-example bs-navbar-top-example">
-      <nav class="navbar navbar-static-top" role="navigation">
+      <nav class="navbar navbar-default navbar-static-top" role="navigation">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse">
@@ -1693,7 +1693,7 @@ body { padding-bottom: 70px; }
       </nav>
     </div><!-- /example -->
 {% highlight html %}
-<nav class="navbar navbar-static-top" role="navigation">
+<nav class="navbar navbar-default navbar-static-top" role="navigation">
   ...
 </nav>
 {% endhighlight %}