clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-25 12:37:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9403 from twbs/bs3_navbar_overhaul

Browse Source 
BS3: Navbar overhaul
This commit is contained in:
Mark Otto 2013-08-13 13:53:27 -07:00
commit 9482a5f812
9 changed files with 734 additions and 510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_includes/nav-components.html
View File

@ -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>

18
_includes/nav-main.html
View File

@ -1,13 +1,15 @@
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<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>
<span class="icon-bar"></span>
<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 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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC2</a>
</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>

19
assets/css/docs.css
View File

@ -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 */
@ -799,6 +801,15 @@ body {
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;

482
components.html
View File

@ -1095,154 +1095,190 @@ 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="" 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>
<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>&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>
<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>
@ -1255,15 +1291,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 %}
@ -1285,14 +1332,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 %}
@ -1313,15 +1371,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 %}
@ -1331,175 +1400,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">

305
dist/css/bootstrap.css vendored
View File

@ -2410,6 +2410,10 @@ textarea.input-group-lg > .input-group-btn > .btn {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
@ -3087,67 +3091,112 @@ button.close {
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
background-color: #f8f8f8;
border: 1px solid #e7e7e7;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}
.navbar-header {
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
background-color: #eeeeee;
border-radius: 4px;
}
.navbar:before,
.navbar:after {
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar:after {
.navbar-header:after {
clear: both;
}
.navbar:before,
.navbar:after {
.navbar-header:before,
.navbar-header:after {
display: table;
content: " ";
}
.navbar:after {
.navbar-header:after {
clear: both;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #777777;
border-radius: 4px;
@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
.navbar-collapse {
max-height: 360px;
padding: 5px 15px;
overflow-x: visible;
overflow-y: scroll;
border-top: 1px solid #e6e6e6;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
.navbar-collapse:after {
clear: both;
}
.navbar-nav.pull-right {
width: 100%;
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-static-top {
border-radius: 0;
.navbar-collapse:after {
clear: both;
}
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
padding-top: 0;
padding-bottom: 0;
border-top: 0;
}
}
@media (min-width: 768px) {
.navbar-static-top {
border-width: 0 0 1px;
border-radius: 0;
}
}
.navbar-fixed-top,
@ -3156,7 +3205,14 @@ button.close {
right: 0;
left: 0;
z-index: 1030;
border-radius: 0;
border-width: 0 0 1px;
}
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
@ -3168,50 +3224,11 @@ button.close {
margin-bottom: 0;
}
.nav-collapse {
padding-bottom: 15px;
clear: both;
}
.nav-collapse:before,
.nav-collapse:after {
display: table;
content: " ";
}
.nav-collapse:after {
clear: both;
}
.nav-collapse:before,
.nav-collapse:after {
display: table;
content: " ";
}
.nav-collapse:after {
clear: both;
}
.navbar-toggle + .nav-collapse {
width: 100%;
margin-top: 50px;
}
@media (max-width: 768px) {
.nav-collapse-scrollable {
max-height: 360px;
margin-bottom: 15px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
.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;
@ -3229,7 +3246,6 @@ button.close {
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: -10px;
margin-bottom: 8px;
background-color: transparent;
border: 1px solid #dddddd;
@ -3253,9 +3269,94 @@ button.close {
margin-top: 4px;
}
.navbar-nav {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.navbar-nav {
margin-right: 0;
margin-left: 0;
}
}
.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: #e7e7e7;
}
.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: #e7e7e7;
}
.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 #e6e6e6;
border-bottom: 1px solid #e6e6e6;
}
@media (min-width: 768px) {
@ -3281,6 +3382,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;
@ -3302,7 +3418,7 @@ button.close {
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus {
color: #555555;
background-color: #d5d5d5;
background-color: #e7e7e7;
}
.navbar-nav > .open > a .caret,
@ -3325,6 +3441,7 @@ button.close {
.navbar-inverse {
background-color: #222222;
border-color: #080808;
}
.navbar-inverse .navbar-brand {
@ -3378,6 +3495,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 {
@ -3402,10 +3523,30 @@ button.close {
border-bottom-color: #ffffff;
}
@media screen and (min-width: 768px) {
.nav-collapse {
clear: none;
@media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
color: #999999;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ffffff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ffffff;
background-color: #080808;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
color: #444444;
background-color: transparent;
}
}
@media screen and (min-width: 768px) {
.navbar-nav {
float: left;
margin-top: 0;
@ -3415,7 +3556,8 @@ button.close {
float: left;
}
.navbar-nav > li > a {
border-radius: 0;
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-nav.pull-right {
width: auto;
@ -3426,7 +3568,7 @@ button.close {
left: auto;
display: none;
}
.nav-collapse.collapse {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
@ -3440,7 +3582,6 @@ button.close {
.navbar-text {
float: left;
padding: 0 15px;
margin-top: 15px;
margin-bottom: 15px;
}

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
less/dropdowns.less
View File

@ -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;

399
less/navbar.less
View File

@ -2,30 +2,185 @@
// 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;
border: 1px solid @navbar-border;
// Prevent floats from breaking the navbar
.clearfix();
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.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: 5px @navbar-padding-horizontal;
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 top (unfixed, but 100% wide) navbar
.navbar-static-top {
@media (min-width: @grid-float-breakpoint) {
border-width: 0 0 1px;
border-radius: 0;
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-width: 0 0 1px;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
}
// Brand/project name
.navbar-brand {
float: left;
margin-right: (@navbar-padding-horizontal / 2);
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
font-size: @font-size-large;
line-height: @line-height-computed;
color: @navbar-brand-color;
&:hover,
&:focus {
color: @navbar-brand-hover-color;
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
}
// 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);
background-color: transparent;
border: 1px solid @navbar-toggle-border-color;
border-radius: @border-radius-base;
&:hover,
&:focus {
background-color: @navbar-toggle-hover-bg;
}
// Bars
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: @navbar-toggle-icon-bar-bg;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
}
// 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 {
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-left: 0;
margin-right: 0;
}
> li > a {
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
padding-top: 10px;
padding-bottom: 10px;
color: @navbar-link-color;
line-height: @line-height-computed;
border-radius: @border-radius-base;
&:hover,
&:focus {
color: @navbar-link-hover-color;
@ -54,129 +209,86 @@
&.pull-right {
width: 100%;
}
}
//
// Navbar alignment options
// --------------------------------------------------
// Static navbar
.navbar-static-top {
border-radius: 0;
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-radius: 0;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
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;
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
font-size: @font-size-large;
line-height: @line-height-computed;
color: @navbar-brand-color;
&:hover,
&:focus {
color: @navbar-brand-hover-color;
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
}
// Collapsible navbar toggle
.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;
&:hover,
&:focus {
background-color: @navbar-toggle-hover-bg;
@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;
}
}
}
}
// Bars
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: @navbar-toggle-icon-bar-bg;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 4px;
}
}
// 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
@ -231,6 +343,7 @@
.navbar-inverse {
background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border;
.navbar-brand {
color: @navbar-inverse-brand-color;
@ -285,6 +398,10 @@
}
}
.navbar-collapse {
border-top-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns
.navbar-nav {
> .open > a {
@ -313,7 +430,38 @@
}
}
}
@media (max-width: @screen-phone-max) {
// Dropdowns get custom display
.open .dropdown-menu {
> li > a {
color: @navbar-inverse-link-color;
&:hover,
&:focus {
color: @navbar-inverse-link-hover-color;
background-color: @navbar-inverse-link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-active-color;
background-color: @navbar-inverse-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-inverse-link-disabled-color;
background-color: @navbar-inverse-link-disabled-bg;
}
}
}
}
}
}
@ -323,11 +471,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 +480,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 +497,7 @@
left: auto;
display: none;
}
.nav-collapse.collapse {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
@ -380,7 +524,6 @@
.navbar-text {
float: left;
padding: 0 @navbar-padding-horizontal;
.navbar-vertical-align(@line-height-computed);
}

8
less/variables.less
View File

@ -231,9 +231,10 @@
// Basics of a navbar
@navbar-height: 50px;
@navbar-color: #777;
@navbar-bg: #eee;
@navbar-margin-bottom: @line-height-computed;
@navbar-color: #777;
@navbar-bg: #f8f8f8;
@navbar-border: darken(@navbar-bg, 6.5%);
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@ -243,7 +244,7 @@
@navbar-link-hover-color: #333;
@navbar-link-hover-bg: transparent;
@navbar-link-active-color: #555;
@navbar-link-active-bg: darken(@navbar-bg, 10%);
@navbar-link-active-bg: darken(@navbar-bg, 6.5%);
@navbar-link-disabled-color: #ccc;
@navbar-link-disabled-bg: transparent;
@ -263,6 +264,7 @@
// Reset inverted navbar basics
@navbar-inverse-color: @gray-light;
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: @gray-light;