diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 83533ea784..889e3008d3 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -52,7 +52,7 @@ h3 code {
.subnav {
font-size: 13px;
}
-.navbar-fixed-top .brand {
+body > .navbar-fixed-top .brand {
padding-right: 0;
padding-left: 0;
margin-left: 20px;
@@ -64,7 +64,7 @@ h3 code {
-moz-transition: all .2s linear;
transition: all .2s linear;
}
-.navbar-fixed-top .brand:hover {
+body > .navbar-fixed-top .brand:hover {
text-decoration: none;
}
@@ -744,12 +744,39 @@ form.well {
.bs-docs-example .well,
.bs-docs-example .alert,
.bs-docs-example .hero-unit,
-.bs-docs-example .pagination {
+.bs-docs-example .pagination,
+.bs-docs-example .navbar {
margin-bottom: 5px;
}
.bs-docs-example .pagination {
margin-top: 0;
}
+.bs-navbar-top-example,
+.bs-navbar-bottom-example {
+ z-index: 1;
+ padding: 0;
+ height: 90px;
+}
+.bs-navbar-top-example {
+ -webkit-border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
+}
+.bs-navbar-top-example:after {
+ top: auto;
+ bottom: -1px;
+ -webkit-border-radius: 0 4px 0 4px;
+ -moz-border-radius: 0 4px 0 4px;
+ border-radius: 0 4px 0 4px;
+}
+.bs-navbar-bottom-example {
+ -webkit-border-radius: 4px 4px 0 0;
+ -moz-border-radius: 4px 4px 0 0;
+ border-radius: 4px 4px 0 0;
+}
+.bs-navbar-bottom-example .navbar {
+ margin-bottom: 0;
+}
form.bs-docs-example {
padding-bottom: 19px;
}
diff --git a/docs/components.html b/docs/components.html
index 5ff8244761..933d89a36c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -896,105 +896,213 @@
- Static navbar example
- An example of a static (not fixed to the top) navbar with project name, navigation, and search form.
-
-
-
-
-
-
-
-
+
+
+
Basic navbar
+
To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.
+
-
-
-
Navbar scaffolding
-
The navbar requires only a few divs to structure it well for static or fixed display.
+
+
<div class="navbar">
<div class="navbar-inner">
- <div class="container">
- ...
- </div>
+ <a class="brand" href="#">Title</a>
+ <ul class="nav">
+ <li class="active"><a href="#">Home</a></li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+ </ul>
</div>
</div>
-
-
Fixed navbar
-
Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.
-
-<div class="navbar navbar-fixed-top">
- ...
-</div>
-
-
-<div class="navbar navbar-fixed-bottom">
- ...
-</div>
-
When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
-
Brand name
+
+
+
+
+
Navbar components
+
+
Brand
A simple link to show your brand or project name only requires an anchor tag.
-<a class="brand" href="#">
- Project name
-</a>
+<a class="brand" href="#">Project name</a>
-
Forms in navbar
+
+
Nav links
+
Nav items are simple to add via unordered lists.
+
+<ul class="nav">
+ <li class="active">
+ <a href="#">Home</a>
+ </li>
+ <li><a href="#">Link</a></li>
+ <li><a href="#">Link</a></li>
+</ul>
+
+
You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
+
+<ul class="nav">
+ ...
+ <li class="divider-vertical"></li>
+ ...
+</ul>
+
+
+
Forms
To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
+
+
Search form
For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="Search">
</form>
-
Optional responsive variation
-
Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
+
+
Component alignment
+
Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
+
+
Using dropdowns
+
Add dropdowns and dropups to the nav with a bit of markup and the dropdowns javascript plugin.
+
+<ul class="nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ Account
+ <b class="caret"></b>
+ </a>
+ <ul class="dropdown-menu">
+ ...
+ </ul>
+ </li>
+</ul>
+
+
Visit the javascript dropdowns documentation for more markup and information on calling dropdowns.
+
+
Text
+
Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.
+
+
+
+
+
+
Fixed navigation
+
Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.
+
+
Fixed to top
+
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
+
+
+<div class="navbar navbar-fixed-top">
+ ...
+</div>
+
+
+
Fixed to bottom
+
Add .navbar-fixed-bottom instead.
+
+
+<div class="navbar navbar-fixed-bottom">
+ ...
+</div>
+
+
+
+
+
+
+
Responsive navbar
+
To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
+
<div class="navbar">
<div class="navbar-inner">
@@ -1023,49 +1131,6 @@
Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
Nav links
- Nav items are simple to add via unordered lists.
-
-<ul class="nav">
- <li class="active">
- <a href="#">Home</a>
- </li>
- <li><a href="#">Link</a></li>
- <li><a href="#">Link</a></li>
-</ul>
-
- You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
-
-<ul class="nav">
- ...
- <li class="divider-vertical"></li>
- ...
-</ul>
-
- Component alignment
- To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
- Adding dropdown menus
- Adding dropdowns and dropups to the nav is super simple, but does require the use of our javascript plugin.
-
-<ul class="nav">
- <li class="dropdown">
- <a href="#"
- class="dropdown-toggle"
- data-toggle="dropdown">
- Account
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- ...
- </ul>
- </li>
-</ul>
-
- Get the javascript →
-
- Text in the navbar
- Wrap strings of text in a <.navbar-text>, usually on a <p> tag for proper leading and color.
-
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 149d816449..3f4ad2d08e 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -819,105 +819,213 @@
- {{_i}}Static navbar example{{/i}}
- {{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}
-
-
-
-
-
-
-
-
+
+
+
{{_i}}Basic navbar{{/i}}
+
{{_i}}To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.{{/i}}
+
-
-
-
{{_i}}Navbar scaffolding{{/i}}
-
{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}
+
+
{{! /example }}
<div class="navbar">
<div class="navbar-inner">
- <div class="container">
- ...
- </div>
+ <a class="brand" href="#">{{_i}}Title{{/i}}</a>
+ <ul class="nav">
+ <li class="active"><a href="#">{{_i}}Home{{/i}}</a></li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ </ul>
</div>
</div>
-
-
{{_i}}Fixed navbar{{/i}}
-
{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.{{/i}}
-
-<div class="navbar navbar-fixed-top">
- ...
-</div>
-
-
-<div class="navbar navbar-fixed-bottom">
- ...
-</div>
-
{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}
-
{{_i}}Brand name{{/i}}
+
+
+
+
+
{{_i}}Navbar components{{/i}}
+
+
{{_i}}Brand{{/i}}
{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}
-<a class="brand" href="#">
- {{_i}}Project name{{/i}}
-</a>
+<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
-
{{_i}}Forms in navbar{{/i}}
+
+
{{_i}}Nav links{{/i}}
+
{{_i}}Nav items are simple to add via unordered lists.{{/i}}
+
+<ul class="nav">
+ <li class="active">
+ <a href="#">{{_i}}Home{{/i}}</a>
+ </li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+ <li><a href="#">{{_i}}Link{{/i}}</a></li>
+</ul>
+
+
{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}
+
+<ul class="nav">
+ ...
+ <li class="divider-vertical"></li>
+ ...
+</ul>
+
+
+
{{_i}}Forms{{/i}}
{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.{{/i}}
<form class="navbar-form pull-left">
<input type="text" class="span2">
</form>
+
+
{{_i}}Search form{{/i}}
{{_i}}For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.{{/i}}
<form class="navbar-search pull-left">
<input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
</form>
-
{{_i}}Optional responsive variation{{/i}}
-
{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
+
+
{{_i}}Component alignment{{/i}}
+
{{_i}}Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.{{/i}}
+
+
{{_i}}Using dropdowns{{/i}}
+
{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the dropdowns javascript plugin.{{/i}}
+
+<ul class="nav">
+ <li class="dropdown">
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+ {{_i}}Account{{/i}}
+ <b class="caret"></b>
+ </a>
+ <ul class="dropdown-menu">
+ ...
+ </ul>
+ </li>
+</ul>
+
+
{{_i}}Visit the javascript dropdowns documentation for more markup and information on calling dropdowns.{{/i}}
+
+
{{_i}}Text{{/i}}
+
{{_i}}Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.{{/i}}
+
+
+
+
+
+
{{_i}}Fixed navigation{{/i}}
+
{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.{{/i}}
+
+
Fixed to top
+
{{_i}}Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}
+
{{! /example }}
+
+<div class="navbar navbar-fixed-top">
+ ...
+</div>
+
+
+
Fixed to bottom
+
{{_i}}Add .navbar-fixed-bottom instead.{{/i}}
+
{{! /example }}
+
+<div class="navbar navbar-fixed-bottom">
+ ...
+</div>
+
+
+
+
+
+
+
{{_i}}Responsive navbar{{/i}}
+
{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.{{/i}}
+
{{! /example }}
<div class="navbar">
<div class="navbar-inner">
@@ -946,49 +1054,6 @@
{{_i}}Heads up!{{/i}} The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
{{_i}}Nav links{{/i}}
- {{_i}}Nav items are simple to add via unordered lists.{{/i}}
-
-<ul class="nav">
- <li class="active">
- <a href="#">{{_i}}Home{{/i}}</a>
- </li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
- <li><a href="#">{{_i}}Link{{/i}}</a></li>
-</ul>
-
- {{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}
-
-<ul class="nav">
- ...
- <li class="divider-vertical"></li>
- ...
-</ul>
-
- {{_i}}Component alignment{{/i}}
- {{_i}}To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.{{/i}}
- {{_i}}Adding dropdown menus{{/i}}
- {{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of our javascript plugin.{{/i}}
-
-<ul class="nav">
- <li class="dropdown">
- <a href="#"
- class="dropdown-toggle"
- data-toggle="dropdown">
- {{_i}}Account{{/i}}
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- ...
- </ul>
- </li>
-</ul>
-
- {{_i}}Get the javascript →{{/i}}
-
- {{_i}}Text in the navbar{{/i}}
- {{_i}}Wrap strings of text in a <.navbar-text>, usually on a <p> tag for proper leading and color.{{/i}}
-