diff options
| -rw-r--r-- | _includes/nav-components.html | 1 | ||||
| -rw-r--r-- | components.html | 62 |
2 files changed, 49 insertions, 14 deletions
diff --git a/_includes/nav-components.html b/_includes/nav-components.html index 8b239b226..7660a41db 100644 --- 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 c2e0e261a..9b724b209 100644 --- 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><form></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><form></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> |