aboutsummaryrefslogtreecommitdiff
path: root/docs
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2015-12-06 22:34:06 -0800
committerMark Otto <[email protected]>2015-12-06 22:34:06 -0800
commite61eae4f9d1a8bf06f6c36ae8e9aee9bcb6d438e (patch)
treea9b05f7c1340f9ddfbc7bead6d918fbf57edc906 /docs
parentdd2c784c92a66d3471b41c7a5448709cd55ba7d4 (diff)
downloadbootstrap-e61eae4f9d1a8bf06f6c36ae8e9aee9bcb6d438e.tar.xz
bootstrap-e61eae4f9d1a8bf06f6c36ae8e9aee9bcb6d438e.zip
stub out some more of the navbar docs to include navbar-nav options and navbar-brand options
Diffstat (limited to 'docs')
-rw-r--r--docs/components/navbar.md52
1 files changed, 52 insertions, 0 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md
index 29a757fa3..61458feeb 100644
--- a/docs/components/navbar.md
+++ b/docs/components/navbar.md
@@ -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.