<p>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 <code>.container</code>, which sets the width of your site and content.</p>
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
<divclass="bs-docs-example">
<divclass="navbar">
<divclass="navbar-inner">
<aclass="brand"href="#">Title</a>
</div>
<aclass="brand"href="#">Title</a>
</div>
</div>
<preclass="prettyprint linenums">
...
...
@@ -1077,13 +1069,11 @@
<p>Nav items are simple to add via unordered lists.</p>
<divclass="bs-docs-example">
<divclass="navbar">
<divclass="navbar-inner">
<ulclass="nav">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Link</a></li>
<li><ahref="#">Link</a></li>
</ul>
</div>
<ulclass="nav">
<liclass="active"><ahref="#">Home</a></li>
<li><ahref="#">Link</a></li>
<li><ahref="#">Link</a></li>
</ul>
</div>
</div>
<preclass="prettyprint linenums">
...
...
@@ -1122,12 +1112,10 @@
<p>To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.</p>
<divclass="bs-docs-example">
<divclass="navbar">
<divclass="navbar-inner">
<formclass="navbar-form pull-left">
<inputtype="text"class="span2">
<buttontype="submit"class="btn">Submit</button>
</form>
</div>
<formclass="navbar-form pull-left">
<inputtype="text"class="span2">
<buttontype="submit"class="btn">Submit</button>
</form>
</div>
</div>
<preclass="prettyprint linenums">
...
...
@@ -1141,11 +1129,9 @@
<p>For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.</p>
<p>Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.</p>
<p>To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
<p>{{_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 <code>.container</code>, which sets the width of your site and content.{{/i}}</p>
<p>{{_i}}To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include <code>.navbar-form</code> and either <code>.pull-left</code> or <code>.pull-right</code> to properly align it.{{/i}}</p>
<p>{{_i}}For a more customized search form, add <code>.navbar-search</code> to the <code>form</code> and <code>.search-query</code> to the input for specialized styles in the navbar.{{/i}}</p>
<p>{{_i}}Add <code>.navbar-fixed-top</code> and remember to account for the hidden area underneath it by adding at least 40px <code>padding</code> to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
<p>{{_i}}Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-top</code> class, you do not need to change any padding on the <code>body</code>.{{/i}}</p>
<p>{{_i}}To implement a collapsing responsive navbar, wrap your navbar content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>