Skip to content

B
bootstrap
Commit 8bb7def2 authored by Mark Otto's avatar Mark Otto
Browse files
Options

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
parent eac61de1
Show whitespace changes
Inline Side-by-side
Showing with 599 additions and 456 deletions
_includes/nav-components.html
View file @ 8bb7def2
......@@ -52,9 +52,7 @@
<li>
<a href="#navbar">Navbar</a>
<ul class="nav">
<li><a href="#navbar-basic">Basic navbar</a></li>
<li><a href="#navbar-nav">Nav links</a></li>
<li><a href="#navbar-forms">Forms in navbars</a></li>
<li><a href="#navbar-default">Default navbar</a></li>
<li><a href="#navbar-buttons">Buttons in navbars</a></li>
<li><a href="#navbar-text">Text in navbars</a></li>
<li><a href="#navbar-links">Links in navbars</a></li>
......@@ -62,8 +60,6 @@
<li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li>
<li><a href="#navbar-responsive">Responsive navbar</a></li>
<li><a href="#navbar-scrollable">Scrollable responsive navbar</a></li>
<li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul>
</li>
......
_includes/nav-main.html
View file @ 8bb7def2
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
......@@ -7,7 +8,8 @@
<span class="icon-bar"></span>
</button>
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC2</a>
<nav class="nav-collapse collapse bs-navbar-collapse" role="navigation">
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li{% if page.slug == "getting-started" %} class="active"{% endif %}>
<a href="{{ page.base_url }}getting-started">Getting started</a>
......
assets/css/docs.css
View file @ 8bb7def2
......@@ -56,6 +56,9 @@ body {
.bs-docs-nav {
background-color: #563d7c;
}
.bs-docs-nav .navbar-collapse {
border-color: #463265;
}
.bs-docs-nav .navbar-brand {
color: #fff;
}
......@@ -385,11 +388,10 @@ body {
}
/* Tweak display of the examples */
.bs-example + .prettyprint,
.bs-example + .highlight {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin: 0 -15px;
border-radius: 0;
border-width: 0 0 1px;
}
/* Tweak content of examples for optimum awesome */
......@@ -796,6 +798,15 @@ input.focused {
border-radius: 4px 4px 0 0;
box-shadow: none;
}
.bs-example + .prettyprint,
.bs-example + .highlight {
margin-top: 0;
margin-left: 0;
margin-right: 0;
border-width: 1px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.carbonad {
margin: 0 !important;
......
components.html
View file @ 8bb7def2
......@@ -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">
<!-- 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">
<!-- 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>&lt;form&gt;</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>
<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>&lt;p&gt;</code> tag for proper leading and color.</p>
<div class="bs-example">
<nav class="navbar" role="navigation">
<a href="#" class="navbar-brand">Brand</a>
<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>
<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,142 +1327,32 @@ 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;">
<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>
</div>
</nav>
</div><!-- /example -->
{% highlight html %}
<nav class="navbar navbar-static-top" role="navigation">
...
</nav>
{% 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>
<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">
<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">
<!-- .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">
<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>
<!-- 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">
<!-- 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>
<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><!-- /.navbar-collapse -->
</nav>
</div><!-- /example -->
{% highlight html %}
<nav class="navbar">
<div class="container">
...
<div class="collapse nav-collapse nav-collapse-scrollable">
<nav class="navbar navbar-static-top" role="navigation">
...
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
</nav>
{% endhighlight %}
......@@ -1413,50 +1360,26 @@ body { padding-bottom: 70px; }
<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">
<!-- 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-inverse-collapse">
</div>
<!-- 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>
<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><!-- /.navbar-collapse -->
</nav>
</div><!-- /example -->
{% highlight html %}
<nav class="navbar navbar-inverse" role="navigation">
......
dist/css/bootstrap.css
View file @ 8bb7def2
......@@ -2377,6 +2377,10 @@ input[type="button"].btn-block {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
......@@ -2990,11 +2994,8 @@ button.close {
.navbar {
position: relative;
min-height: 50px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
background-color: #eeeeee;
border-radius: 4px;
}
.navbar:before,
......@@ -3017,104 +3018,118 @@ button.close {
clear: both;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #777777;
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
.navbar-header {
padding-right: 15px;
padding-left: 15px;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
.navbar-header:after {
clear: both;
}
.navbar-nav.pull-right {
width: 100%;
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar-static-top {
border-radius: 0;
.navbar-header:after {
clear: both;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-radius: 0;
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-fixed-top {
top: 0;
.navbar-collapse {
max-height: 360px;
padding-top: 5px;
padding-bottom: 5px;
overflow-x: visible;
overflow-y: scroll;
border-top: 1px solid #dcdcdc;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.nav-collapse {
padding-bottom: 15px;
.navbar-collapse:after {
clear: both;
}
.nav-collapse:before,
.nav-collapse:after {
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.nav-collapse:after {
.navbar-collapse:after {
clear: both;
}
.nav-collapse:before,
.nav-collapse:after {
display: table;
content: " ";
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
}
}
.nav-collapse:after {
clear: both;
@media (min-width: 768px) {
.navbar-static-top {
border-radius: 0;
}
}
.navbar-toggle + .nav-collapse {
width: 100%;
margin-top: 50px;
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
@media (max-width: 768px) {
.nav-collapse-scrollable {
max-height: 360px;
margin-bottom: 15px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
}
.navbar-brand {
float: left;
padding-top: 15px;
padding-bottom: 15px;
margin-right: 15px;
margin-right: 7.5px;
font-size: 18px;
line-height: 20px;
color: #777777;
......@@ -3132,7 +3147,6 @@ button.close {
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: -10px;
margin-bottom: 8px;
background-color: transparent;
border: 1px solid #dddddd;
......@@ -3156,9 +3170,82 @@ button.close {
margin-top: 4px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
color: #777777;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-nav.pull-right {
width: 100%;
}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
color: #777777;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
color: #333333;
background-color: transparent;
background-image: none;
}
.navbar-nav .open .dropdown-menu > .active > a,
.navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-nav .open .dropdown-menu > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
}
.navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
}
.navbar-form {
width: 100%;
padding: 10px 15px;
margin-top: 8px;
margin-bottom: 8px;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
}
@media (min-width: 768px) {
......@@ -3184,6 +3271,21 @@ button.close {
}
}
@media (max-width: 767px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
}
@media (min-width: 768px) {
.navbar-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
border: 0;
}
}
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
......@@ -3281,6 +3383,10 @@ button.close {
background-color: #ffffff;
}
.navbar-inverse .navbar-collapse {
border-top-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
......@@ -3306,9 +3412,6 @@ button.close {
}
@media screen and (min-width: 768px) {
.nav-collapse {
clear: none;
}
.navbar-nav {
float: left;
margin-top: 0;
......@@ -3318,7 +3421,8 @@ button.close {
float: left;
}
.navbar-nav > li > a {
border-radius: 0;
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-nav.pull-right {
width: auto;
......@@ -3329,7 +3433,7 @@ button.close {
left: auto;
display: none;
}
.nav-collapse.collapse {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
......
dist/css/bootstrap.min.css
View file @ 8bb7def2
This source diff could not be displayed because it is too large. You can view the blob instead.
less/dropdowns.less
View file @ 8bb7def2
......@@ -21,6 +21,11 @@
position: relative;
}
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul)
.dropdown-menu {
position: absolute;
......
less/navbar.less
View file @ 8bb7def2
......@@ -2,69 +2,88 @@
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
background-color: @navbar-bg;
border-radius: @navbar-border-radius;
// Prevent floats from breaking the navbar
.clearfix();
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
}
}
// Navbar nav links
// -------------------------
.navbar-nav {
> li > a {
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
color: @navbar-link-color;
line-height: @line-height-computed;
border-radius: @border-radius-base;
&:hover,
&:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
// Right aligned contents
// Make them full width first so that they align properly on mobile
&.pull-right {
width: 100%;
.navbar-header {
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
.clearfix();
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid darken(@navbar-bg, 7%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
// Clear floated elements and prevent collapsing of padding
.clearfix();
// This is not automatically added to the `.navbar-fixed-top` because it causes
// z-index bugs in iOS7 (possibly earlier).
max-height: 360px;
overflow-x: visible;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
@media (min-width: @grid-float-breakpoint) {
width: auto;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
}
}
//
// Navbar alignment options
// --------------------------------------------------
//
// Display the navbar across the entirity of the page or fixed it to the top or
// bottom of the page.
// Static navbar
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
// Fix the top/bottom navbars when screen real estate supports it
......@@ -74,7 +93,11 @@
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
......@@ -84,51 +107,12 @@
margin-bottom: 0; // override .navbar defaults
}
.nav-collapse {
// Prevent overlap of `.navbar-brand` and `.navbar-toggle`
clear: both;
// Space out collapsed contents within the mobile navbar
padding-bottom: @navbar-padding-vertical;
// Clear floated elements and prevent collapsing of padding
.clearfix();
// When there is no `.navbar-brand` present (which normally sits between the
// navbar brand and toggle), prevent the nav from overlapping the toggle.
.navbar-toggle + & {
width: 100%;
margin-top: @navbar-height;
}
}
// Scrollable navbar navigation
//
// Sometimes you might have too many links in your fixed navbar and you need to
// maintain access to all that content. To help, add `.nav-collapse-scrollable`
// to your `.nav-collapse` to prevent the the content from flowing past the max-
// height of your browser.
//
// This is not automatically added to the `.navbar-fixed-top` because it causes
// z-index bugs in iOS7 (possibly earlier).
@media (max-width: @screen-small) {
.nav-collapse-scrollable {
margin-bottom: @navbar-padding-vertical;
max-height: 360px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
//
// Navbar optional components
// --------------------------------------------------
// Brand/project name
.navbar-brand {
float: left;
margin-right: 15px;
margin-right: (@navbar-padding-horizontal / 2);
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
font-size: @font-size-large;
......@@ -142,13 +126,17 @@
}
}
// Collapsible navbar toggle
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
.navbar-vertical-align(34px);
margin-right: -10px;
background-color: transparent;
border: 1px solid @navbar-toggle-border-color;
border-radius: @border-radius-base;
......@@ -171,12 +159,126 @@
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with it's own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
> li > a {
padding-top: 10px;
padding-bottom: 10px;
color: @navbar-link-color;
line-height: @line-height-computed;
&:hover,
&:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
// Right aligned contents
// Make them full width first so that they align properly on mobile
&.pull-right {
width: 100%;
}
@media (max-width: @screen-phone-max) {
// Dropdowns get custom display
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
> li > a,
.dropdown-header {
padding: 5px 15px 5px 25px;
}
> li > a {
color: @navbar-link-color;
line-height: @line-height-computed;
&:hover,
&:focus {
color: @navbar-link-hover-color;
background-color: @navbar-link-hover-bg;
background-image: none;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-link-active-color;
background-color: @navbar-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-link-disabled-color;
background-color: @navbar-link-disabled-bg;
}
}
}
}
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
width: 100%; // Counteract the float from `.pull-` classes
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid darken(@navbar-bg, 7%);
border-bottom: 1px solid darken(@navbar-bg, 7%);
// Mixin behavior for optimum display
.form-inline();
.navbar-vertical-align(@input-height-base); // Vertically center in navbar
.form-group {
@media (max-width: @screen-phone-max) {
margin-bottom: 5px;
}
}
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base);
// Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) {
width: auto;
border: 0;
padding-top: 0;
padding-bottom: 0;
}
}
// Dropdown menus
// Menu position and menu carets
......@@ -285,6 +387,10 @@
}
}
.navbar-collapse {
border-top-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
......@@ -323,11 +429,6 @@
@media screen and (min-width: @grid-float-breakpoint) {
// Undo clearing to keep nav and brand horizontal
.nav-collapse {
clear: none;
}
.navbar-nav {
float: left;
// undo margin to make nav extend full height of navbar
......@@ -337,7 +438,8 @@
> li {
float: left;
> a {
border-radius: 0;
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
}
}
......@@ -353,7 +455,7 @@
left: auto;
display: none;
}
.nav-collapse.collapse {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment