mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-24 14:04:09 +03:00
Navbar refactor
* Now responsive by default (fits better with mobile-first approach) * Requires `.nav-header` to group `.navbar-brand` and `.navbar-toggle` for proper mobile display. * Changed `.nav-collapse` to `.navbar-collapse` * Simplified examples in docs
This commit is contained in:
Mark Otto
+203
-280
@@ -1052,154 +1052,189 @@ base_url: "../"
|
||||
<h1 id="navbar">Navbar</h1>
|
||||
</div>
|
||||
|
||||
<h2 id="navbar-basic">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>
|
||||
<h2 id="navbar-default">Default navbar</h2>
|
||||
<p>Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.</p>
|
||||
|
||||
<div class="bs-example">
|
||||
<nav class="navbar" role="navigation">
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse navbar-ex1-collapse">
|
||||
<ul class="nav navbar-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><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form pull-left" action="" role="search">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<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><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<nav class="navbar" role="navigation">
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse navbar-ex1-collapse">
|
||||
<ul class="nav navbar-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><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form pull-left" action="" role="search">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<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><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Plugin dependency</h4>
|
||||
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Make navbars accessible</h4>
|
||||
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
|
||||
</div>
|
||||
|
||||
<h2>Navbar components</h2>
|
||||
|
||||
<h3 id="navbar-brand">Brand</h3>
|
||||
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar" role="navigation">
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="navbar-nav">Nav links</h3>
|
||||
<p>Nav items are simple to add via unordered lists.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar" role="navigation">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="disabled"><a href="#">Disabled</a></li>
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="navbar-forms">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>
|
||||
<div class="bs-example">
|
||||
|
||||
<nav class="navbar" role="navigation">
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<input type="text" class="form-control" style="width: 200px;">
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar" role="navigation">
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<select name="" id="" class="form-control" style="width: 200px;">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
</select>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar" role="navigation">
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<input type="text" class="form-control" style="width: 200px;">
|
||||
<input type="checkbox">
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar" role="navigation">
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<input type="text" class="form-control" style="width: 200px;">
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
</nav>
|
||||
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<form class="navbar-form pull-left" role="form">
|
||||
<input type="text" class="form-control" style="width: 200px;">
|
||||
<button type="submit" class="btn btn-default">Submit</button>
|
||||
</form>
|
||||
{% endhighlight %}
|
||||
<h2 id="navbar-optional-content">Optional navbar content</h2>
|
||||
<p>Quickly add other types of content, beyond links or forms, to a navbar with a few classes.</p>
|
||||
|
||||
<h3 id="navbar-buttons">Buttons</h3>
|
||||
<p>For buttons not residing in a <code><form></code>, add this class to vertically center buttons within a navbar.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar" role="navigation">
|
||||
<a href="#" class="navbar-brand">Brand</a>
|
||||
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse navbar-ex2-collapse">
|
||||
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="navbar-text">Text</h3>
|
||||
<h3 id="navbar-text">Text in navbars</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>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar" role="navigation">
|
||||
<a href="#" class="navbar-brand">Brand</a>
|
||||
<p class="navbar-text">Signed in as Mark Otto</p>
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex3-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse navbar-ex3-collapse">
|
||||
<p class="navbar-text">Signed in as Mark Otto</p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<nav class="navbar" role="navigation">
|
||||
<a href="#" class="navbar-brand">Brand</a>
|
||||
<p class="navbar-text">Signed in as Mark Otto</p>
|
||||
</nav>
|
||||
<p class="navbar-text">Signed in as Mark Otto</p>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="navbar-links">Links</h3>
|
||||
<h3 id="navbar-links">Non-nav links</h3>
|
||||
<p>For folks using standard links that are not within the regular navbar navigation component, use the <code>.navbar-link</code> class to add the proper colors for the default and inverse navbar options.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar" role="navigation">
|
||||
<a href="#" class="navbar-brand">Brand</a>
|
||||
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex4-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse navbar-ex4-collapse">
|
||||
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<nav class="navbar" role="navigation">
|
||||
<a href="#" class="navbar-brand">Brand</a>
|
||||
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
|
||||
</nav>
|
||||
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="navbar-component-alignment">Component alignment</h3>
|
||||
@@ -1212,15 +1247,26 @@ base_url: "../"
|
||||
<h3 id="navbar-fixed-top">Fixed to top</h3>
|
||||
<p>Add <code>.navbar-fixed-top</code>.</p>
|
||||
<div class="bs-example bs-navbar-top-example">
|
||||
<nav class="navbar navbar-fixed-top">
|
||||
<div class="container" style="width: auto;">
|
||||
<nav class="navbar navbar-fixed-top" role="navigation">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse navbar-ex5-collapse">
|
||||
<ul class="nav navbar-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-collapse -->
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
@@ -1242,14 +1288,25 @@ body { padding-top: 70px; }
|
||||
<p>Add <code>.navbar-fixed-bottom</code> instead.</p>
|
||||
<div class="bs-example bs-navbar-bottom-example">
|
||||
<nav class="navbar navbar-fixed-bottom" role="navigation">
|
||||
<div class="container" style="width: auto;">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex6-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse navbar-ex6-collapse">
|
||||
<ul class="nav navbar-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-collapse -->
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
@@ -1270,15 +1327,26 @@ body { padding-bottom: 70px; }
|
||||
<h3 id="navbar-static-top">Static top navbar</h3>
|
||||
<p>Create a full-width navbar that scrolls away with the page by adding <code>.navbar-static-top</code>. Unlike the <code>.navbar-fixed-*</code> classes, you do not need to change any padding on the <code>body</code>.</p>
|
||||
<div class="bs-example bs-navbar-top-example">
|
||||
<nav class="navbar navbar-static-top" role="navigation" style="margin: -1px -1px 0;">
|
||||
<div class="container" style="width: auto;">
|
||||
<nav class="navbar navbar-static-top" role="navigation">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse navbar-ex7-collapse">
|
||||
<ul class="nav navbar-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-collapse -->
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
@@ -1288,175 +1356,30 @@ body { padding-bottom: 70px; }
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="navbar-responsive">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>.navbar-toggle</code>.</p>
|
||||
<h2 id="navbar-inverted">Inverted variation</h2>
|
||||
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar" role="navigation">
|
||||
<div class="container">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
|
||||
<nav class="navbar navbar-inverse" role="navigation">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex8-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<div class="nav-collapse collapse navbar-responsive-collapse">
|
||||
<ul class="nav navbar-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="dropdown-header">Dropdown header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form pull-left" action="" role="search">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<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><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.nav-collapse -->
|
||||
</div><!-- /.container -->
|
||||
</nav><!-- /.navbar -->
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<nav class="navbar" role="navigation">
|
||||
<div class="container">
|
||||
</div>
|
||||
|
||||
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
|
||||
<!-- Be sure to leave the brand out there if you want it shown -->
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
|
||||
<!-- Place everything within .nav-collapse to hide it until above 768px -->
|
||||
<div class="nav-collapse collapse navbar-responsive-collapse">
|
||||
...
|
||||
</div><!-- /.nav-collapse -->
|
||||
</div><!-- /.container -->
|
||||
</nav><!-- /.navbar -->
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Plugin dependency</h4>
|
||||
<p>The responsive navbar requires the <a href="../javascript/#collapse">collapse plugin</a> to be included in your version of Bootstrap.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2 id="navbar-scrollable">Scrollable responsive navbar</h2>
|
||||
<p>For instances where you have too many items in your navbar to fight within the viewport of a small device, add <code>.nav-collapse-scrollable</code> to your navbar's <code>.nav-collapse</code> to set a <code>max-height</code> and smooth scrolling.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-scroll-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<div class="collapse nav-collapse nav-collapse-scrollable bs-navbar-scroll-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
<form class="navbar-form pull-left" action="" role="search">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
||||
</form>
|
||||
</div><!-- /.nav-collapse -->
|
||||
</div><!-- /.container -->
|
||||
</nav><!-- /.navbar -->
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
...
|
||||
|
||||
<div class="collapse nav-collapse nav-collapse-scrollable">
|
||||
...
|
||||
</div><!-- /.nav-collapse -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
</nav><!-- /.navbar -->
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
<h2 id="navbar-inverted">Inverted variation</h2>
|
||||
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
|
||||
<div class="bs-example">
|
||||
<nav class="navbar navbar-inverse" role="navigation">
|
||||
<div class="container">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<div class="nav-collapse collapse navbar-inverse-collapse">
|
||||
<ul class="nav navbar-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="dropdown-header">Dropdown header</li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
<li><a href="#">One more separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="navbar-form pull-left" action="" role="search">
|
||||
<input type="text" class="form-control col-lg-8" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<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><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- /.nav-collapse -->
|
||||
</div><!-- /.container -->
|
||||
</nav><!-- /.navbar -->
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse navbar-ex8-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</nav>
|
||||
</div><!-- /example -->
|
||||
{% highlight html %}
|
||||
<nav class="navbar navbar-inverse" role="navigation">
|
||||
|
||||
Reference in New Issue
Block a user