rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

clarify some stuff about small navbar; also renamed navbar-condensed to -sm

Browse Source
This commit is contained in:
Mark Otto 2015-06-22 16:30:52 -07:00
parent ce9c0f0125
commit 9b5fe0ca46
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/components/navbar.md
View File

@ -69,17 +69,7 @@ Add an `.inline-form` within the navbar with nearly any combination of form cont
### Containers ### 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">
<h3 class="navbar-brand">
<a href="#">Navbar</a>
</h3>
</div>
</nav>
{% endexample %}
{% example html %} {% example html %}
<div class="container"> <div class="container">
@ -91,6 +81,16 @@ Although it's not required, you can wrap a navbar in a `.container` or add one w
</div> </div>
{% endexample %} {% endexample %}
{% example html %}
<nav class="navbar navbar-default">
<div class="container">
<h3 class="navbar-brand">
<a href="#">Navbar</a>
</h3>
</div>
</nav>
{% endexample %}
### Alignment ### Alignment
Use `.pull-left` or `.pull-right` to align multiple elements within the navbar. Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
@ -155,12 +155,14 @@ Replace `.navbar-default` with `.navbar-inverse` for a darker background color a
</nav> </nav>
{% endexample %} {% endexample %}
### Condensed ### Small navbar
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. 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.
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 %} {% example html %}
<nav class="navbar navbar-default navbar-condensed"> <nav class="navbar navbar-default navbar-sm">
<h3 class="navbar-brand pull-left"> <h3 class="navbar-brand pull-left">
<a href="#">Navbar</a> <a href="#">Navbar</a>
</h3> </h3>
@ -184,7 +186,7 @@ Condensed navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts t
</form> </form>
</nav> </nav>
<nav class="navbar navbar-inverse navbar-condensed"> <nav class="navbar navbar-inverse navbar-sm">
<h3 class="navbar-brand pull-left"> <h3 class="navbar-brand pull-left">
<a href="#">Navbar</a> <a href="#">Navbar</a>
</h3> </h3>
@ -241,5 +243,3 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
</div> </div>
</nav> </nav>
{% endexample %} {% endexample %}