diff options
| author | Mark Otto <[email protected]> | 2015-06-22 16:30:52 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-06-22 16:30:52 -0700 |
| commit | 9b5fe0ca4688c2fd316f10c83cc1c3b8fa30b98f (patch) | |
| tree | 646dc33dcf224db829c868664a3b813b5b1dadf0 | |
| parent | ce9c0f0125ffcebf20d993a70ca2d6348bdd8336 (diff) | |
| download | bootstrap-9b5fe0ca4688c2fd316f10c83cc1c3b8fa30b98f.tar.xz bootstrap-9b5fe0ca4688c2fd316f10c83cc1c3b8fa30b98f.zip | |
clarify some stuff about small navbar; also renamed navbar-condensed to -sm
| -rw-r--r-- | docs/components/navbar.md | 30 |
1 files changed, 15 insertions, 15 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 1e53de16b..f45ee5876 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -69,26 +69,26 @@ Add an `.inline-form` within the navbar with nearly any combination of form cont ### Containers -Although it's not required, you can wrap a navbar in a `.container` or add one within for basic horizontal control. +Although it's not required, you can wrap a navbar in a `.container` to center it on a page, or add one within to only center the contents of the navbar. {% example html %} -<nav class="navbar navbar-default"> - <div class="container"> +<div class="container"> + <nav class="navbar navbar-default"> <h3 class="navbar-brand"> <a href="#">Navbar</a> </h3> - </div> -</nav> + </nav> +</div> {% endexample %} {% example html %} -<div class="container"> - <nav class="navbar navbar-default"> +<nav class="navbar navbar-default"> + <div class="container"> <h3 class="navbar-brand"> <a href="#">Navbar</a> </h3> - </nav> -</div> + </div> +</nav> {% endexample %} ### Alignment @@ -155,12 +155,14 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a </nav> {% endexample %} -### Condensed +### Small navbar + +Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes. -Condensed navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes. +When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well. {% example html %} -<nav class="navbar navbar-default navbar-condensed"> +<nav class="navbar navbar-default navbar-sm"> <h3 class="navbar-brand pull-left"> <a href="#">Navbar</a> </h3> @@ -184,7 +186,7 @@ Condensed navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts t </form> </nav> -<nav class="navbar navbar-inverse navbar-condensed"> +<nav class="navbar navbar-inverse navbar-sm"> <h3 class="navbar-brand pull-left"> <a href="#">Navbar</a> </h3> @@ -241,5 +243,3 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav </div> </nav> {% endexample %} - - |
