Skip to content

B
bootstrap
Commit 9482a5f8 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge pull request #9403 from twbs/bs3_navbar_overhaul 

BS3: Navbar overhaul
parents a8769b8c bd93ed2c
Show whitespace changes
Inline Side-by-side
Showing with 686 additions and 462 deletions
_includes/nav-components.html
View file @ 9482a5f8
...@@ -52,9 +52,7 @@ ...@@ -52,9 +52,7 @@
<li> <li>
<a href="#navbar">Navbar</a> <a href="#navbar">Navbar</a>
<ul class="nav"> <ul class="nav">
<li><a href="#navbar-basic">Basic navbar</a></li> <li><a href="#navbar-default">Default 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-buttons">Buttons in navbars</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-text">Text in navbars</a></li>
<li><a href="#navbar-links">Links in navbars</a></li> <li><a href="#navbar-links">Links in navbars</a></li>
...@@ -62,8 +60,6 @@ ...@@ -62,8 +60,6 @@
<li><a href="#navbar-fixed-top">Fixed top navbar</a></li> <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-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top 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> <li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul> </ul>
</li> </li>
......
_includes/nav-main.html
View file @ 9482a5f8
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner"> <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container"> <div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
...@@ -7,7 +8,8 @@ ...@@ -7,7 +8,8 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC2</a> <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"> <ul class="nav navbar-nav">
<li{% if page.slug == "getting-started" %} class="active"{% endif %}> <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
<a href="{{ page.base_url }}getting-started">Getting started</a> <a href="{{ page.base_url }}getting-started">Getting started</a>
......
assets/css/docs.css
View file @ 9482a5f8
...@@ -56,6 +56,9 @@ body { ...@@ -56,6 +56,9 @@ body {
.bs-docs-nav { .bs-docs-nav {
background-color: #563d7c; background-color: #563d7c;
} }
.bs-docs-nav .navbar-collapse {
border-color: #463265;
}
.bs-docs-nav .navbar-brand { .bs-docs-nav .navbar-brand {
color: #fff; color: #fff;
} }
...@@ -385,11 +388,10 @@ body { ...@@ -385,11 +388,10 @@ body {
} }
/* Tweak display of the examples */ /* Tweak display of the examples */
.bs-example + .prettyprint,
.bs-example + .highlight { .bs-example + .highlight {
margin-top: 0; margin: 0 -15px;
border-top-left-radius: 0; border-radius: 0;
border-top-right-radius: 0; border-width: 0 0 1px;
} }
/* Tweak content of examples for optimum awesome */ /* Tweak content of examples for optimum awesome */
...@@ -799,6 +801,15 @@ body { ...@@ -799,6 +801,15 @@ body {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
box-shadow: none; 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 { .carbonad {
margin: 0 !important; margin: 0 !important;
......
components.html
View file @ 9482a5f8
...@@ -1095,154 +1095,190 @@ base_url: "../" ...@@ -1095,154 +1095,190 @@ base_url: "../"
<h1 id="navbar">Navbar</h1> <h1 id="navbar">Navbar</h1>
</div> </div>
<h2 id="navbar-basic">Basic navbar</h2> <h2 id="navbar-default">Default 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> <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"> <div class="bs-example">
<nav class="navbar" role="navigation"> <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> <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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <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 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> </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> </nav>
</div><!-- /example --> </div>
{% highlight html %} {% highlight html %}
<nav class="navbar" role="navigation"> <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> <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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <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 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> </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> </nav>
{% endhighlight %} {% 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"> <div class="bs-callout bs-callout-warning">
<h4>Make navbars accessible</h4> <h4>Make navbars accessible</h4>
<p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p> <p>Be sure to add a <code>role="navigation"</code> to every navbar to help with accessibility.</p>
</div> </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 --> <h2 id="navbar-optional-content">Optional navbar content</h2>
{% highlight html %} <p>Quickly add other types of content, beyond links or forms, to a navbar with a few classes.</p>
<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 %}
<h3 id="navbar-buttons">Buttons</h3> <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> <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"> <div class="bs-example">
<nav class="navbar" role="navigation"> <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> <button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<button type="button" class="btn btn-default navbar-btn">Sign in</button> <button type="button" class="btn btn-default navbar-btn">Sign in</button>
{% endhighlight %} {% 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> <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"> <div class="bs-example">
<nav class="navbar" role="navigation"> <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> <p class="navbar-text">Signed in as Mark Otto</p>
</div>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav class="navbar" role="navigation"> <p class="navbar-text">Signed in as Mark Otto</p>
<a href="#" class="navbar-brand">Brand</a>
<p class="navbar-text">Signed in as Mark Otto</p>
</nav>
{% endhighlight %} {% 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> <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"> <div class="bs-example">
<nav class="navbar" role="navigation"> <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> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
</nav> </nav>
</div> </div>
{% highlight html %} {% highlight html %}
<nav class="navbar" role="navigation"> <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
<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>
{% endhighlight %} {% endhighlight %}
<h3 id="navbar-component-alignment">Component alignment</h3> <h3 id="navbar-component-alignment">Component alignment</h3>
...@@ -1255,15 +1291,26 @@ base_url: "../" ...@@ -1255,15 +1291,26 @@ base_url: "../"
<h3 id="navbar-fixed-top">Fixed to top</h3> <h3 id="navbar-fixed-top">Fixed to top</h3>
<p>Add <code>.navbar-fixed-top</code>.</p> <p>Add <code>.navbar-fixed-top</code>.</p>
<div class="bs-example bs-navbar-top-example"> <div class="bs-example bs-navbar-top-example">
<nav class="navbar navbar-fixed-top"> <nav class="navbar navbar-fixed-top" 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-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> <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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <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>
</ul> </ul>
</div> </div><!-- /.navbar-collapse -->
</nav> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
...@@ -1285,14 +1332,25 @@ body { padding-top: 70px; } ...@@ -1285,14 +1332,25 @@ body { padding-top: 70px; }
<p>Add <code>.navbar-fixed-bottom</code> instead.</p> <p>Add <code>.navbar-fixed-bottom</code> instead.</p>
<div class="bs-example bs-navbar-bottom-example"> <div class="bs-example bs-navbar-bottom-example">
<nav class="navbar navbar-fixed-bottom" role="navigation"> <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> <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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <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>
</ul> </ul>
</div> </div><!-- /.navbar-collapse -->
</nav> </nav>
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
...@@ -1313,142 +1371,32 @@ body { padding-bottom: 70px; } ...@@ -1313,142 +1371,32 @@ body { padding-bottom: 70px; }
<h3 id="navbar-static-top">Static top navbar</h3> <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> <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"> <div class="bs-example bs-navbar-top-example">
<nav class="navbar navbar-static-top" role="navigation" style="margin: -1px -1px 0;"> <nav class="navbar navbar-static-top" role="navigation">
<div class="container" style="width: auto;"> <!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="#">Title</a> <div class="navbar-header">
<ul class="nav navbar-nav"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex7-collapse">
<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">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="navbar-brand" href="#">Title</a> <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> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<h2 id="navbar-scrollable">Scrollable responsive navbar</h2> <div class="collapse navbar-collapse navbar-ex7-collapse">
<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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <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>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul> </ul>
<form class="navbar-form pull-left" action="." role="search"> </div><!-- /.navbar-collapse -->
<input type="text" class="form-control col-lg-8" placeholder="Search"> </nav>
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
</div><!-- /example --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<nav class="navbar"> <nav class="navbar navbar-static-top" role="navigation">
<div class="container">
...
<div class="collapse nav-collapse nav-collapse-scrollable">
... ...
</div><!-- /.nav-collapse --> </nav>
</div><!-- /.container -->
</nav><!-- /.navbar -->
{% endhighlight %} {% endhighlight %}
...@@ -1456,50 +1404,26 @@ body { padding-bottom: 70px; } ...@@ -1456,50 +1404,26 @@ body { padding-bottom: 70px; }
<p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p> <p>Modify the look of the navbar by adding <code>.navbar-inverse</code>.</p>
<div class="bs-example"> <div class="bs-example">
<nav class="navbar navbar-inverse" role="navigation"> <nav class="navbar navbar-inverse" role="navigation">
<div class="container"> <!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse"> <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> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">Title</a> <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"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <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 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> </ul>
</li> </div><!-- /.navbar-collapse -->
</ul> </nav>
<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 --> </div><!-- /example -->
{% highlight html %} {% highlight html %}
<nav class="navbar navbar-inverse" role="navigation"> <nav class="navbar navbar-inverse" role="navigation">
......
dist/css/bootstrap.css
View file @ 9482a5f8
...@@ -2410,6 +2410,10 @@ textarea.input-group-lg > .input-group-btn > .btn { ...@@ -2410,6 +2410,10 @@ textarea.input-group-lg > .input-group-btn > .btn {
position: relative; position: relative;
} }
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
top: 100%; top: 100%;
...@@ -3087,11 +3091,9 @@ button.close { ...@@ -3087,11 +3091,9 @@ button.close {
.navbar { .navbar {
position: relative; position: relative;
min-height: 50px; min-height: 50px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: #eeeeee; background-color: #f8f8f8;
border-radius: 4px; border: 1px solid #e7e7e7;
} }
.navbar:before, .navbar:before,
...@@ -3114,104 +3116,119 @@ button.close { ...@@ -3114,104 +3116,119 @@ button.close {
clear: both; clear: both;
} }
.navbar-nav > li > a { @media (min-width: 768px) {
padding-top: 15px; .navbar {
padding-bottom: 15px;
line-height: 20px;
color: #777777;
border-radius: 4px; border-radius: 4px;
}
} }
.navbar-nav > li > a:hover, .navbar-header {
.navbar-nav > li > a:focus { padding-right: 15px;
color: #333333; padding-left: 15px;
background-color: transparent;
} }
.navbar-nav > .active > a, .navbar-header:before,
.navbar-nav > .active > a:hover, .navbar-header:after {
.navbar-nav > .active > a:focus { display: table;
color: #555555; content: " ";
background-color: #d5d5d5;
} }
.navbar-nav > .disabled > a, .navbar-header:after {
.navbar-nav > .disabled > a:hover, clear: both;
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
} }
.navbar-nav.pull-right { .navbar-header:before,
width: 100%; .navbar-header:after {
display: table;
content: " ";
} }
.navbar-static-top { .navbar-header:after {
border-radius: 0; clear: both;
} }
.navbar-fixed-top, @media (min-width: 768px) {
.navbar-fixed-bottom { .navbar-header {
position: fixed; float: left;
right: 0; }
left: 0;
z-index: 1030;
border-radius: 0;
} }
.navbar-fixed-top { .navbar-collapse {
top: 0; 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-fixed-bottom { .navbar-collapse:before,
bottom: 0; .navbar-collapse:after {
margin-bottom: 0; display: table;
content: " ";
} }
.nav-collapse { .navbar-collapse:after {
padding-bottom: 15px;
clear: both; clear: both;
} }
.nav-collapse:before, .navbar-collapse:before,
.nav-collapse:after { .navbar-collapse:after {
display: table; display: table;
content: " "; content: " ";
} }
.nav-collapse:after { .navbar-collapse:after {
clear: both; clear: both;
} }
.nav-collapse:before, @media (min-width: 768px) {
.nav-collapse:after { .navbar-collapse {
display: table; width: auto;
content: " "; padding-top: 0;
padding-bottom: 0;
border-top: 0;
}
} }
.nav-collapse:after { @media (min-width: 768px) {
clear: both; .navbar-static-top {
border-width: 0 0 1px;
border-radius: 0;
}
} }
.navbar-toggle + .nav-collapse { .navbar-fixed-top,
width: 100%; .navbar-fixed-bottom {
margin-top: 50px; position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-width: 0 0 1px;
} }
@media (max-width: 768px) { @media (min-width: 768px) {
.nav-collapse-scrollable { .navbar-fixed-top,
max-height: 360px; .navbar-fixed-bottom {
margin-bottom: 15px; border-radius: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
} }
} }
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
}
.navbar-brand { .navbar-brand {
float: left; float: left;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
margin-right: 15px; margin-right: 7.5px;
font-size: 18px; font-size: 18px;
line-height: 20px; line-height: 20px;
color: #777777; color: #777777;
...@@ -3229,7 +3246,6 @@ button.close { ...@@ -3229,7 +3246,6 @@ button.close {
float: right; float: right;
padding: 9px 10px; padding: 9px 10px;
margin-top: 8px; margin-top: 8px;
margin-right: -10px;
margin-bottom: 8px; margin-bottom: 8px;
background-color: transparent; background-color: transparent;
border: 1px solid #dddddd; border: 1px solid #dddddd;
...@@ -3253,9 +3269,94 @@ button.close { ...@@ -3253,9 +3269,94 @@ button.close {
margin-top: 4px; 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 { .navbar-form {
width: 100%;
padding: 10px 15px;
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
...@@ -3281,6 +3382,21 @@ button.close { ...@@ -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 { .navbar-nav > li > .dropdown-menu {
margin-top: 0; margin-top: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
...@@ -3302,7 +3418,7 @@ button.close { ...@@ -3302,7 +3418,7 @@ button.close {
.navbar-nav > .open > a:hover, .navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus { .navbar-nav > .open > a:focus {
color: #555555; color: #555555;
background-color: #d5d5d5; background-color: #e7e7e7;
} }
.navbar-nav > .open > a .caret, .navbar-nav > .open > a .caret,
...@@ -3325,6 +3441,7 @@ button.close { ...@@ -3325,6 +3441,7 @@ button.close {
.navbar-inverse { .navbar-inverse {
background-color: #222222; background-color: #222222;
border-color: #080808;
} }
.navbar-inverse .navbar-brand { .navbar-inverse .navbar-brand {
...@@ -3378,6 +3495,10 @@ button.close { ...@@ -3378,6 +3495,10 @@ button.close {
background-color: #ffffff; background-color: #ffffff;
} }
.navbar-inverse .navbar-collapse {
border-top-color: #101010;
}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus { .navbar-inverse .navbar-nav > .open > a:focus {
...@@ -3402,10 +3523,30 @@ button.close { ...@@ -3402,10 +3523,30 @@ button.close {
border-bottom-color: #ffffff; border-bottom-color: #ffffff;
} }
@media screen and (min-width: 768px) { @media (max-width: 767px) {
.nav-collapse { .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
clear: none; 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 { .navbar-nav {
float: left; float: left;
margin-top: 0; margin-top: 0;
...@@ -3415,7 +3556,8 @@ button.close { ...@@ -3415,7 +3556,8 @@ button.close {
float: left; float: left;
} }
.navbar-nav > li > a { .navbar-nav > li > a {
border-radius: 0; padding-top: 15px;
padding-bottom: 15px;
} }
.navbar-nav.pull-right { .navbar-nav.pull-right {
width: auto; width: auto;
...@@ -3426,7 +3568,7 @@ button.close { ...@@ -3426,7 +3568,7 @@ button.close {
left: auto; left: auto;
display: none; display: none;
} }
.nav-collapse.collapse { .navbar-collapse.collapse {
display: block !important; display: block !important;
height: auto !important; height: auto !important;
padding-bottom: 0; padding-bottom: 0;
...@@ -3440,7 +3582,6 @@ button.close { ...@@ -3440,7 +3582,6 @@ button.close {
.navbar-text { .navbar-text {
float: left; float: left;
padding: 0 15px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }
......
dist/css/bootstrap.min.css
View file @ 9482a5f8
This source diff could not be displayed because it is too large. You can view the blob instead.
less/dropdowns.less
View file @ 9482a5f8
...@@ -21,6 +21,11 @@ ...@@ -21,6 +21,11 @@
position: relative; position: relative;
} }
// Prevent the focus on the dropdown toggle when closing dropdowns
.dropdown-toggle:focus {
outline: 0;
}
// The dropdown menu (ul) // The dropdown menu (ul)
.dropdown-menu { .dropdown-menu {
position: absolute; position: absolute;
......
less/navbar.less
View file @ 9482a5f8
...@@ -2,69 +2,89 @@ ...@@ -2,69 +2,89 @@
// Navbars // Navbars
// -------------------------------------------------- // --------------------------------------------------
// Wrapper and base class // Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar { .navbar {
position: relative; position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom; margin-bottom: @navbar-margin-bottom;
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
background-color: @navbar-bg; background-color: @navbar-bg;
border-radius: @navbar-border-radius; border: 1px solid @navbar-border;
// Prevent floats from breaking the navbar // Prevent floats from breaking the navbar
.clearfix(); .clearfix();
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
}
} }
// Navbar nav links
// -------------------------
.navbar-nav { // Navbar heading
> li > a { //
padding-top: ((@navbar-height - @line-height-computed) / 2); // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
padding-bottom: ((@navbar-height - @line-height-computed) / 2); // styling of responsive aspects.
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;
}
}
// Right aligned contents .navbar-header {
// Make them full width first so that they align properly on mobile padding-left: @navbar-padding-horizontal;
&.pull-right { padding-right: @navbar-padding-horizontal;
width: 100%; .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 // 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 { .navbar-static-top {
@media (min-width: @grid-float-breakpoint) {
border-width: 0 0 1px;
border-radius: 0; border-radius: 0;
}
} }
// Fix the top/bottom navbars when screen real estate supports it // Fix the top/bottom navbars when screen real estate supports it
...@@ -74,7 +94,12 @@ ...@@ -74,7 +94,12 @@
right: 0; right: 0;
left: 0; left: 0;
z-index: @zindex-navbar-fixed; z-index: @zindex-navbar-fixed;
border-width: 0 0 1px;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
border-radius: 0; border-radius: 0;
}
} }
.navbar-fixed-top { .navbar-fixed-top {
top: 0; top: 0;
...@@ -84,51 +109,12 @@ ...@@ -84,51 +109,12 @@
margin-bottom: 0; // override .navbar defaults 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 // Brand/project name
.navbar-brand { .navbar-brand {
float: left; float: left;
margin-right: 15px; margin-right: (@navbar-padding-horizontal / 2);
padding-top: @navbar-padding-vertical; padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical;
font-size: @font-size-large; font-size: @font-size-large;
...@@ -142,13 +128,17 @@ ...@@ -142,13 +128,17 @@
} }
} }
// Collapsible navbar toggle
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle { .navbar-toggle {
position: relative; position: relative;
float: right; float: right;
padding: 9px 10px; padding: 9px 10px;
.navbar-vertical-align(34px); .navbar-vertical-align(34px);
margin-right: -10px;
background-color: transparent; background-color: transparent;
border: 1px solid @navbar-toggle-border-color; border: 1px solid @navbar-toggle-border-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
...@@ -171,12 +161,134 @@ ...@@ -171,12 +161,134 @@
} }
} }
// 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: 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 // Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form { .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(); .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 // Dropdown menus
// Menu position and menu carets // Menu position and menu carets
...@@ -231,6 +343,7 @@ ...@@ -231,6 +343,7 @@
.navbar-inverse { .navbar-inverse {
background-color: @navbar-inverse-bg; background-color: @navbar-inverse-bg;
border-color: @navbar-inverse-border;
.navbar-brand { .navbar-brand {
color: @navbar-inverse-brand-color; color: @navbar-inverse-brand-color;
...@@ -285,6 +398,10 @@ ...@@ -285,6 +398,10 @@
} }
} }
.navbar-collapse {
border-top-color: darken(@navbar-inverse-bg, 7%);
}
// Dropdowns // Dropdowns
.navbar-nav { .navbar-nav {
> .open > a { > .open > a {
...@@ -313,7 +430,38 @@ ...@@ -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 @@ ...@@ -323,11 +471,6 @@
@media screen and (min-width: @grid-float-breakpoint) { @media screen and (min-width: @grid-float-breakpoint) {
// Undo clearing to keep nav and brand horizontal
.nav-collapse {
clear: none;
}
.navbar-nav { .navbar-nav {
float: left; float: left;
// undo margin to make nav extend full height of navbar // undo margin to make nav extend full height of navbar
...@@ -337,7 +480,8 @@ ...@@ -337,7 +480,8 @@
> li { > li {
float: left; float: left;
> a { > a {
border-radius: 0; padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
} }
} }
...@@ -353,7 +497,7 @@ ...@@ -353,7 +497,7 @@
left: auto; left: auto;
display: none; display: none;
} }
.nav-collapse.collapse { .navbar-collapse.collapse {
display: block !important; display: block !important;
height: auto !important; height: auto !important;
padding-bottom: 0; // Override default setting padding-bottom: 0; // Override default setting
...@@ -380,7 +524,6 @@ ...@@ -380,7 +524,6 @@
.navbar-text { .navbar-text {
float: left; float: left;
padding: 0 @navbar-padding-horizontal;
.navbar-vertical-align(@line-height-computed); .navbar-vertical-align(@line-height-computed);
} }
......
less/variables.less
View file @ 9482a5f8
...@@ -231,9 +231,10 @@ ...@@ -231,9 +231,10 @@
// Basics of a navbar // Basics of a navbar
@navbar-height: 50px; @navbar-height: 50px;
@navbar-color: #777;
@navbar-bg: #eee;
@navbar-margin-bottom: @line-height-computed; @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-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
...@@ -243,7 +244,7 @@ ...@@ -243,7 +244,7 @@
@navbar-link-hover-color: #333; @navbar-link-hover-color: #333;
@navbar-link-hover-bg: transparent; @navbar-link-hover-bg: transparent;
@navbar-link-active-color: #555; @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-color: #ccc;
@navbar-link-disabled-bg: transparent; @navbar-link-disabled-bg: transparent;
...@@ -263,6 +264,7 @@ ...@@ -263,6 +264,7 @@
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: @gray-light; @navbar-inverse-color: @gray-light;
@navbar-inverse-bg: #222; @navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links // Inverted navbar links
@navbar-inverse-link-color: @gray-light; @navbar-inverse-link-color: @gray-light;
......
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