Commit 2f2ce15e authored by Mark Otto's avatar Mark Otto

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
parent 19c0d2ad
...@@ -61,6 +61,7 @@ ...@@ -61,6 +61,7 @@
<a href="#navbar">Navbar</a> <a href="#navbar">Navbar</a>
<ul class="nav"> <ul class="nav">
<li><a href="#navbar-default">Default navbar</a></li> <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-buttons">Buttons</a></li>
<li><a href="#navbar-text">Text</a></li> <li><a href="#navbar-text">Text</a></li>
<li><a href="#navbar-links">Non-nav links</a></li> <li><a href="#navbar-links">Non-nav links</a></li>
......
...@@ -1497,8 +1497,9 @@ base_url: "../" ...@@ -1497,8 +1497,9 @@ base_url: "../"
</div> </div>
<h2 id="navbar-buttons">Buttons</h2> <h2 id="navbar-forms">Forms</h2>
<p>For buttons not residing in a <code>&lt;form&gt;</code>, add this class to vertically center buttons within a navbar.</p> <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"> <div class="bs-example">
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header"> <div class="navbar-header">
...@@ -1511,6 +1512,39 @@ base_url: "../" ...@@ -1511,6 +1512,39 @@ base_url: "../"
<a class="navbar-brand" href="#">Brand</a> <a class="navbar-brand" href="#">Brand</a>
</div> </div>
<div class="collapse navbar-collapse navbar-ex2-collapse"> <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> <button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div> </div>
</nav> </nav>
...@@ -1525,7 +1559,7 @@ base_url: "../" ...@@ -1525,7 +1559,7 @@ base_url: "../"
<div class="bs-example"> <div class="bs-example">
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header"> <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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
...@@ -1533,7 +1567,7 @@ base_url: "../" ...@@ -1533,7 +1567,7 @@ base_url: "../"
</button> </button>
<a class="navbar-brand" href="#">Brand</a> <a class="navbar-brand" href="#">Brand</a>
</div> </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> <p class="navbar-text">Signed in as Mark Otto</p>
</div> </div>
</nav> </nav>
...@@ -1548,7 +1582,7 @@ base_url: "../" ...@@ -1548,7 +1582,7 @@ base_url: "../"
<div class="bs-example"> <div class="bs-example">
<nav class="navbar navbar-default" role="navigation"> <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header"> <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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
...@@ -1556,7 +1590,7 @@ base_url: "../" ...@@ -1556,7 +1590,7 @@ base_url: "../"
</button> </button>
<a class="navbar-brand" href="#">Brand</a> <a class="navbar-brand" href="#">Brand</a>
</div> </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> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div> </div>
</nav> </nav>
...@@ -1577,7 +1611,7 @@ base_url: "../" ...@@ -1577,7 +1611,7 @@ base_url: "../"
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
...@@ -1587,7 +1621,7 @@ base_url: "../" ...@@ -1587,7 +1621,7 @@ base_url: "../"
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- 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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
...@@ -1618,7 +1652,7 @@ body { padding-top: 70px; } ...@@ -1618,7 +1652,7 @@ body { padding-top: 70px; }
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
...@@ -1628,7 +1662,7 @@ body { padding-top: 70px; } ...@@ -1628,7 +1662,7 @@ body { padding-top: 70px; }
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- 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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
...@@ -1659,7 +1693,7 @@ body { padding-bottom: 70px; } ...@@ -1659,7 +1693,7 @@ body { padding-bottom: 70px; }
<nav class="navbar navbar-default navbar-static-top" role="navigation"> <nav class="navbar navbar-default navbar-static-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
...@@ -1669,7 +1703,7 @@ body { padding-bottom: 70px; } ...@@ -1669,7 +1703,7 @@ body { padding-bottom: 70px; }
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- 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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
...@@ -1691,7 +1725,7 @@ body { padding-bottom: 70px; } ...@@ -1691,7 +1725,7 @@ body { padding-bottom: 70px; }
<nav class="navbar navbar-inverse" role="navigation"> <nav class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display --> <!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header"> <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="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
...@@ -1701,7 +1735,7 @@ body { padding-bottom: 70px; } ...@@ -1701,7 +1735,7 @@ body { padding-bottom: 70px; }
</div> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <!-- 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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment