Fixes #10082: document `.navbar-form`

* Adds new section to navbar docs with example
* Updates example classes for all collapsing navbars so their numbers
increment as you scroll

diff --git a/_includes/nav-components.html b/_includes/nav-components.html
index 8b239b22617b49097083cc99e936141bab53692c..7660a41db2a25fd01a2d80f97f4f6b1ed666eaf4 100644 (file)
--- a/_includes/nav-components.html
+++ b/_includes/nav-components.html
@@ -61,6 +61,7 @@
   <a href="#navbar">Navbar</a>
   <ul class="nav">
     <li><a href="#navbar-default">Default navbar</a></li>
+    <li><a href="#navbar-forms">Forms</a></li>
     <li><a href="#navbar-buttons">Buttons</a></li>
     <li><a href="#navbar-text">Text</a></li>
     <li><a href="#navbar-links">Non-nav links</a></li>

diff --git a/components.html b/components.html
index c2e0e261a913fe4a10838c5595b48f51dfdeae27..9b724b209f9b74681de522a1ec3006b5111d9ccc 100644 (file)
--- a/components.html
+++ b/components.html
@@ -1497,8 +1497,9 @@ base_url: "../"
 </div>
 
 
-    <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>
+    <h2 id="navbar-forms">Forms</h2>
+    <p>Place form content within <code>.navbar-form</code> for proper vertical alignment and collapsed behavior in narrow viewports. Use the alignment options to decide where it resides within the navbar content.</p>
+    <p>As a heads up, <code>.navbar-form</code> shares much of it's code with <code>.form-inline</code> via mixin.</p>
     <div class="bs-example">
       <nav class="navbar navbar-default" role="navigation">
         <div class="navbar-header">
@@ -1511,6 +1512,39 @@ base_url: "../"
           <a class="navbar-brand" href="#">Brand</a>
         </div>
         <div class="collapse navbar-collapse navbar-ex2-collapse">
+          <form class="navbar-form navbar-left" role="search">
+            <div class="form-group">
+              <input type="text" class="form-control" placeholder="Search">
+            </div>
+            <button type="submit" class="btn btn-default">Submit</button>
+          </form>
+        </div>
+      </nav>
+    </div>
+{% highlight html %}
+<form class="navbar-form navbar-left" role="search">
+  <div class="form-group">
+    <input type="text" class="form-control" placeholder="Search">
+  </div>
+  <button type="submit" class="btn btn-default">Submit</button>
+</form>
+{% endhighlight %}
+
+
+    <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 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>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Brand</a>
+        </div>
+        <div class="collapse navbar-collapse navbar-ex3-collapse">
           <button type="button" class="btn btn-default navbar-btn">Sign in</button>
         </div>
       </nav>
@@ -1525,7 +1559,7 @@ base_url: "../"
     <div class="bs-example">
       <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">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -1533,7 +1567,7 @@ base_url: "../"
           </button>
           <a class="navbar-brand" href="#">Brand</a>
         </div>
-        <div class="collapse navbar-collapse navbar-ex3-collapse">
+        <div class="collapse navbar-collapse navbar-ex4-collapse">
           <p class="navbar-text">Signed in as Mark Otto</p>
         </div>
       </nav>
@@ -1548,7 +1582,7 @@ base_url: "../"
     <div class="bs-example">
       <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">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -1556,7 +1590,7 @@ base_url: "../"
           </button>
           <a class="navbar-brand" href="#">Brand</a>
         </div>
-        <div class="collapse navbar-collapse navbar-ex4-collapse">
+        <div class="collapse navbar-collapse navbar-ex5-collapse">
           <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
         </div>
       </nav>
@@ -1577,7 +1611,7 @@ base_url: "../"
       <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">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -1587,7 +1621,7 @@ base_url: "../"
         </div>
 
         <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse navbar-ex5-collapse">
+        <div class="collapse navbar-collapse navbar-ex6-collapse">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
@@ -1618,7 +1652,7 @@ body { padding-top: 70px; }
       <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">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -1628,7 +1662,7 @@ body { padding-top: 70px; }
         </div>
 
         <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse navbar-ex6-collapse">
+        <div class="collapse navbar-collapse navbar-ex7-collapse">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
@@ -1659,7 +1693,7 @@ body { padding-bottom: 70px; }
       <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">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -1669,7 +1703,7 @@ body { padding-bottom: 70px; }
         </div>
 
         <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse navbar-ex7-collapse">
+        <div class="collapse navbar-collapse navbar-ex8-collapse">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>
@@ -1691,7 +1725,7 @@ body { padding-bottom: 70px; }
       <nav class="navbar navbar-inverse" 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-ex8-collapse">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex9-collapse">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
@@ -1701,7 +1735,7 @@ body { padding-bottom: 70px; }
         </div>
 
         <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="collapse navbar-collapse navbar-ex8-collapse">
+        <div class="collapse navbar-collapse navbar-ex9-collapse">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Link</a></li>