diff options
| author | Mark Otto <[email protected]> | 2015-04-18 18:12:10 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-04-18 18:12:10 -0700 |
| commit | 8f94078da852b1a3b22d108f1029482c676272d9 (patch) | |
| tree | fd97fb00a8477f7dfaf16e8c432410728ecd93fc /docs/components | |
| parent | 7e86bfd9acaba9039a6fb90c9fb48a69161efea4 (diff) | |
| download | bootstrap-8f94078da852b1a3b22d108f1029482c676272d9.tar.xz bootstrap-8f94078da852b1a3b22d108f1029482c676272d9.zip | |
New form control sizing, new navbar condensed variation, update nav and navbar spacing
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/navbar.md | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index f61c3124c..a28ed3714 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -150,6 +150,61 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a </nav> {% endexample %} +### Condensed + +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. + +{% example html %} +<nav class="navbar navbar-default navbar-condensed"> + <h3 class="navbar-brand pull-left"> + <a href="#">Navbar</a> + </h3> + <ul class="nav navbar-nav pull-left"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Features</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Pricing</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">About</a> + </li> + </ul> + <form class="form-inline pull-right"> + <input class="form-control form-control-sm" type="text" placeholder="Search"> + <button class="btn btn-sm btn-primary" type="submit">Search</button> + </form> +</nav> + +<nav class="navbar navbar-inverse navbar-condensed"> + <h3 class="navbar-brand pull-left"> + <a href="#">Navbar</a> + </h3> + <ul class="nav navbar-nav pull-left"> + <li class="nav-item active"> + <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Features</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Pricing</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">About</a> + </li> + </ul> + <form class="form-inline pull-right"> + <input class="form-control form-control-sm" type="text" placeholder="Search"> + <button class="btn btn-sm btn-primary" type="submit">Search</button> + </form> +</nav> +{% endexample %} + + ### Collapsible content Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content. |