mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-28 20:52:21 +01:00
rewrite the navbar section
This commit is contained in:
Mark Otto
parent
0c817bf5e2
commit
017b7cb804
@ -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;
|
||||
}
|
||||
|
||||
@ -896,105 +896,213 @@
|
||||
<div class="page-header">
|
||||
<h1>Navbar</h1>
|
||||
</div>
|
||||
<h2>Static navbar example</h2>
|
||||
<p>An example of a static (not fixed to the top) navbar with project name, navigation, and search form.</p>
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
|
||||
|
||||
<h2>Basic navbar</h2>
|
||||
<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>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<a class="brand" href="#">Title</a>
|
||||
<div class="nav-collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-search pull-left" action="">
|
||||
<input type="text" class="search-query span2" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="divider-vertical"></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.nav-collapse -->
|
||||
<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><!-- /navbar-inner -->
|
||||
</div><!-- /navbar -->
|
||||
|
||||
|
||||
<h3>Navbar scaffolding</h3>
|
||||
<p>The navbar requires only a few divs to structure it well for static or fixed display.</p>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<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>
|
||||
</pre>
|
||||
<h3>Fixed navbar</h3>
|
||||
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-top">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-bottom">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<p>When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.</p>
|
||||
<h3>Brand name</h3>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Navbar components</h2>
|
||||
|
||||
<h3>Brand</h3>
|
||||
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<a class="brand" href="#">
|
||||
Project name
|
||||
</a>
|
||||
<a class="brand" href="#">Project name</a>
|
||||
</pre>
|
||||
<h3>Forms in navbar</h3>
|
||||
|
||||
<h3>Nav links</h3>
|
||||
<p>Nav items are simple to add via unordered lists.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="active">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
...
|
||||
<li class="divider-vertical"></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>Forms</h3>
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-form pull-left">
|
||||
<input type="text" class="span2">
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>Search form</h3>
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-search pull-left">
|
||||
<input type="text" class="search-query" placeholder="Search">
|
||||
</form>
|
||||
</pre>
|
||||
<h3>Optional responsive variation</h3>
|
||||
<p>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, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.</p>
|
||||
|
||||
<h3>Component alignment</h3>
|
||||
<p>Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
|
||||
|
||||
<h3>Using dropdowns</h3>
|
||||
<p>Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<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>
|
||||
</pre>
|
||||
<p>Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.</p>
|
||||
|
||||
<h3>Text</h3>
|
||||
<p>Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.</p>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Fixed navigation</h2>
|
||||
<p>Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.</p>
|
||||
|
||||
<h3>Fixed to top</h3>
|
||||
<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>
|
||||
<div class="bs-docs-example bs-navbar-top-example">
|
||||
<div class="navbar navbar-fixed-top" style="position: absolute;">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto; padding: 0 20px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-top">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Fixed to bottom</h3>
|
||||
<p>Add <code>.navbar-fixed-bottom</code> instead.</p>
|
||||
<div class="bs-docs-example bs-navbar-bottom-example">
|
||||
<div class="navbar navbar-fixed-bottom" style="position: absolute;">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto; padding: 0 20px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-bottom">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>Responsive navbar</h2>
|
||||
<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>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Title</a>
|
||||
<div class="nav-collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-search pull-left" action="">
|
||||
<input type="text" class="search-query span2" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="divider-vertical"></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.nav-collapse -->
|
||||
</div>
|
||||
</div><!-- /navbar-inner -->
|
||||
</div><!-- /navbar -->
|
||||
</div>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
@ -1023,49 +1131,6 @@
|
||||
<strong>Heads up!</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
|
||||
</div>
|
||||
|
||||
<h3>Nav links</h3>
|
||||
<p>Nav items are simple to add via unordered lists.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
<li class="active">
|
||||
<a href="#">Home</a>
|
||||
</li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</pre>
|
||||
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
...
|
||||
<li class="divider-vertical"></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
<h3>Component alignment</h3>
|
||||
<p>To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.</p>
|
||||
<h3>Adding dropdown menus</h3>
|
||||
<p>Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<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>
|
||||
</pre>
|
||||
<p><a class="btn" href="./javascript.html#dropdowns">Get the javascript →</a></p>
|
||||
<hr>
|
||||
<h3>Text in the navbar</h3>
|
||||
<p>Wrap strings of text in a <code><.navbar-text></code>, usually on a <code><p></code> tag for proper leading and color.</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
301
docs/templates/pages/components.mustache
vendored
301
docs/templates/pages/components.mustache
vendored
@ -819,105 +819,213 @@
|
||||
<div class="page-header">
|
||||
<h1>{{_i}}Navbar{{/i}}</h1>
|
||||
</div>
|
||||
<h2>{{_i}}Static navbar example{{/i}}</h2>
|
||||
<p>{{_i}}An example of a static (not fixed to the top) navbar with project name, navigation, and search form.{{/i}}</p>
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
|
||||
|
||||
<h2>{{_i}}Basic navbar{{/i}}</h2>
|
||||
<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>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||
<div class="nav-collapse">
|
||||
<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>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-search pull-left" action="">
|
||||
<input type="text" class="search-query span2" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||
<li class="divider-vertical"></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.nav-collapse -->
|
||||
<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><!-- /navbar-inner -->
|
||||
</div><!-- /navbar -->
|
||||
|
||||
|
||||
<h3>{{_i}}Navbar scaffolding{{/i}}</h3>
|
||||
<p>{{_i}}The navbar requires only a few divs to structure it well for static or fixed display.{{/i}}</p>
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<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>
|
||||
</pre>
|
||||
<h3>{{_i}}Fixed navbar{{/i}}</h3>
|
||||
<p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-top">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-bottom">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<p>{{_i}}When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <code><body></code>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}</p>
|
||||
<h3>{{_i}}Brand name{{/i}}</h3>
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Navbar components{{/i}}</h2>
|
||||
|
||||
<h3>{{_i}}Brand{{/i}}</h3>
|
||||
<p>{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<a class="brand" href="#">
|
||||
{{_i}}Project name{{/i}}
|
||||
</a>
|
||||
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
|
||||
</pre>
|
||||
<h3>{{_i}}Forms in navbar{{/i}}</h3>
|
||||
|
||||
<h3>{{_i}}Nav links{{/i}}</h3>
|
||||
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<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>
|
||||
</pre>
|
||||
<p>{{_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}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
...
|
||||
<li class="divider-vertical"></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Forms{{/i}}</h3>
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-form pull-left">
|
||||
<input type="text" class="span2">
|
||||
</form>
|
||||
</pre>
|
||||
|
||||
<h3>{{_i}}Search form{{/i}}</h3>
|
||||
<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>
|
||||
<pre class="prettyprint linenums">
|
||||
<form class="navbar-search pull-left">
|
||||
<input type="text" class="search-query" placeholder="{{_i}}Search{{/i}}">
|
||||
</form>
|
||||
</pre>
|
||||
<h3>{{_i}}Optional responsive variation{{/i}}</h3>
|
||||
<p>{{_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, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Component alignment{{/i}}</h3>
|
||||
<p>{{_i}}Align nav links, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Using dropdowns{{/i}}</h3>
|
||||
<p>{{_i}}Add dropdowns and dropups to the nav with a bit of markup and the <a href="./javascript.html#dropdowns">dropdowns javascript plugin</a>.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<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>
|
||||
</pre>
|
||||
<p>{{_i}}Visit the <a href="./javascript.html#dropdowns">javascript dropdowns documentation</a> for more markup and information on calling dropdowns.{{/i}}</p>
|
||||
|
||||
<h3>{{_i}}Text{{/i}}</h3>
|
||||
<p>{{_i}}Wrap strings of text in an element with <code>.navbar-text</code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Fixed navigation{{/i}}</h2>
|
||||
<p>{{_i}}Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, <code>.navbar</code>.{{/i}}</p>
|
||||
|
||||
<h3>Fixed to top</h3>
|
||||
<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>
|
||||
<div class="bs-docs-example bs-navbar-top-example">
|
||||
<div class="navbar navbar-fixed-top" style="position: absolute;">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto; padding: 0 20px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-top">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
<h3>Fixed to bottom</h3>
|
||||
<p>{{_i}}Add <code>.navbar-fixed-bottom</code> instead.{{/i}}</p>
|
||||
<div class="bs-docs-example bs-navbar-bottom-example">
|
||||
<div class="navbar navbar-fixed-bottom" style="position: absolute;">
|
||||
<div class="navbar-inner">
|
||||
<div class="container" style="width: auto; padding: 0 20px;">
|
||||
<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>
|
||||
</div>
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar navbar-fixed-bottom">
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
|
||||
<h2>{{_i}}Responsive navbar{{/i}}</h2>
|
||||
<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>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">{{_i}}Title{{/i}}</a>
|
||||
<div class="nav-collapse">
|
||||
<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>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="nav-header">Nav header</li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}One more separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-search pull-left" action="">
|
||||
<input type="text" class="search-query span2" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav pull-right">
|
||||
<li><a href="#">{{_i}}Link{{/i}}</a></li>
|
||||
<li class="divider-vertical"></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{_i}}Dropdown{{/i}} <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">{{_i}}Action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Another action{{/i}}</a></li>
|
||||
<li><a href="#">{{_i}}Something else here{{/i}}</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">{{_i}}Separated link{{/i}}</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.nav-collapse -->
|
||||
</div>
|
||||
</div><!-- /navbar-inner -->
|
||||
</div><!-- /navbar -->
|
||||
</div>{{! /example }}
|
||||
<pre class="prettyprint linenums">
|
||||
<div class="navbar">
|
||||
<div class="navbar-inner">
|
||||
@ -946,49 +1054,6 @@
|
||||
<strong>{{_i}}Heads up!{{/i}}</strong> The responsive navbar requires the <a href="./javascript.html#collapse">collapse plugin</a> and <a href="./scaffolding.html#responsive">responsive Bootstrap CSS file</a>.
|
||||
</div>
|
||||
|
||||
<h3>{{_i}}Nav links{{/i}}</h3>
|
||||
<p>{{_i}}Nav items are simple to add via unordered lists.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<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>
|
||||
</pre>
|
||||
<p>{{_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}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<ul class="nav">
|
||||
...
|
||||
<li class="divider-vertical"></li>
|
||||
...
|
||||
</ul>
|
||||
</pre>
|
||||
<h3>{{_i}}Component alignment{{/i}}</h3>
|
||||
<p>{{_i}}To align a nav, search form, or text, use the <code>.pull-left</code> or <code>.pull-right</code> utility classes. Both classes will add a CSS float in the specified direction.{{/i}}</p>
|
||||
<h3>{{_i}}Adding dropdown menus{{/i}}</h3>
|
||||
<p>{{_i}}Adding dropdowns and dropups to the nav is super simple, but does require the use of <a href="./javascript.html#dropdowns">our javascript plugin</a>.{{/i}}</p>
|
||||
<pre class="prettyprint linenums">
|
||||
<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>
|
||||
</pre>
|
||||
<p><a class="btn" href="./javascript.html#dropdowns">{{_i}}Get the javascript →{{/i}}</a></p>
|
||||
<hr>
|
||||
<h3>{{_i}}Text in the navbar{{/i}}</h3>
|
||||
<p>{{_i}}Wrap strings of text in a <code><.navbar-text></code>, usually on a <code><p></code> tag for proper leading and color.{{/i}}</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user