]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
stub out some more of the navbar docs to include navbar-nav options and navbar-brand...
authorMark Otto <markdotto@gmail.com>
Mon, 7 Dec 2015 06:34:06 +0000 (22:34 -0800)
committerMark Otto <markdotto@gmail.com>
Mon, 7 Dec 2015 06:34:06 +0000 (22:34 -0800)
docs/components/navbar.md

index 29a757fa3063804c23a5130a569767c3f3f8ce7e..61458feebabf9f5a14127b6f6766e2b070f1725f 100644 (file)
@@ -54,6 +54,58 @@ Here's an example of all the sub-components included in a default, light navbar:
 </nav>
 {% endexample %}
 
+### Brand
+
+The `.navbar-brand` can be applied to most elements, but an anchor works best.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <a class="navbar-brand" href="#">Navbar</a>
+</nav>
+
+<nav class="navbar navbar-light bg-faded">
+  <h1 class="navbar-brand">Navbar</h1>
+</nav>
+
+{% endexample %}
+
+### Nav
+
+Navbar navigation is similar to our regular nav options—use the `.nav` base class with a modifier to achieve a particular look. In this case you'll want `.nav.navbar-nav`.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <ul class="nav navbar-nav">
+    <li class="nav-item active">
+      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Features</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">Pricing</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" href="#">About</a>
+    </li>
+  </ul>
+</nav>
+{% endexample %}
+
+And because we use classes for our navs, you can omit the list-based approach entirely if you like.
+
+{% example html %}
+<nav class="navbar navbar-light bg-faded">
+  <div class="nav navbar-nav">
+    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
+    <a class="nav-item nav-link" href="#">Features</a>
+    <a class="nav-item nav-link" href="#">Pricing</a>
+    <a class="nav-item nav-link" href="#">About</a>
+  </div>
+</nav>
+{% endexample %}
+
+
 ## Color schemes
 
 Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.