Nav docs updates

- More consistent states and labels in nav examples
- Add stacked pills example for with <nav> element

diff --git a/docs/components/navs.md b/docs/components/navs.md
index 734eb5046540380c437e8c20ee5ccf2e3e3b36f3..9bedc9cb4cd50659decd06aa11b6685aed6d9501 100644 (file)
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -22,13 +22,13 @@ Roll your own navigation style by extending the base `.nav` component. All Boots
 {% example html %}
 <ul class="nav">
   <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
+    <a class="nav-link active" href="#">Active</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -42,20 +42,20 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
 <nav class="nav">
   <a class="nav-link active" href="#">Active</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link" href="#">Another link</a>
+  <a class="nav-link" href="#">Link</a>
   <a class="nav-link disabled" href="#">Disabled</a>
 </nav>
 {% endexample %}
 
 ## Inline
 
-Easily space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
+Space out nav links in a horizontal band with `.nav-inline`. Longer series of links will wrap to a new line.
 
 {% example html %}
 <nav class="nav nav-inline">
   <a class="nav-link active" href="#">Active</a>
   <a class="nav-link" href="#">Link</a>
-  <a class="nav-link" href="#">Another link</a>
+  <a class="nav-link" href="#">Link</a>
   <a class="nav-link disabled" href="#">Disabled</a>
 </nav>
 {% endexample %}
@@ -65,13 +65,13 @@ The same works for a navigation built with lists.
 {% example html %}
 <ul class="nav nav-inline">
   <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
+    <a class="nav-link active" href="#">Active</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -92,7 +92,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -113,7 +113,7 @@ Take that same HTML, but use `.nav-pills` instead:
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -121,9 +121,9 @@ Take that same HTML, but use `.nav-pills` instead:
 </ul>
 {% endexample %}
 
-## Stacked pills
+### Stacked pills
 
-Just add `.nav-stacked` to the `.nav.nav-pills`.
+Add `.nav-stacked` to the `.nav.nav-pills` to stack them vertically. Each `.nav-link` becomes block-level, allowing for larger hit areas via mouse or tap.
 
 {% example html %}
 <ul class="nav nav-pills nav-stacked">
@@ -134,7 +134,7 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
     <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -142,6 +142,17 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
 </ul>
 {% endexample %}
 
+As always, stacked pills are possible without `<ul>`s.
+
+{% example html %}
+<nav class="nav nav-pills nav-stacked">
+  <a class="nav-link active" href="#">Active</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link disabled" href="#">Disabled</a>
+</nav>
+{% endexample %}
+
 ## Using dropdowns
 
 Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin]({{ site.baseurl }}/components/dropdowns/#usage).
@@ -164,7 +175,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
     </div>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>
@@ -190,7 +201,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
     </div>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#">Another link</a>
+    <a class="nav-link" href="#">Link</a>
   </li>
   <li class="nav-item">
     <a class="nav-link disabled" href="#">Disabled</a>