mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-18 03:11:19 +02:00
Overhaul navbar navs
* Switch from to to eliminate an element in selectors * Drop .navbar-divider entirely
This commit is contained in:
Mark Otto
129
docs/assets/css/bootstrap.css
vendored
129
docs/assets/css/bootstrap.css
vendored
@@ -3515,33 +3515,33 @@ button.close {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.navbar .nav {
|
||||
.navbar-nav {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.navbar .nav > li > a {
|
||||
.navbar-nav > li > a {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
line-height: 20px;
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
.navbar .nav > li > a:hover,
|
||||
.navbar .nav > li > a:focus {
|
||||
.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 {
|
||||
.navbar-nav > .active > a,
|
||||
.navbar-nav > .active > a:hover,
|
||||
.navbar-nav > .active > a:focus {
|
||||
color: #555555;
|
||||
background-color: #d5d5d5;
|
||||
}
|
||||
|
||||
.navbar .nav > .disabled > a,
|
||||
.navbar .nav > .disabled > a:hover,
|
||||
.navbar .nav > .disabled > a:focus {
|
||||
.navbar-nav > .disabled > a,
|
||||
.navbar-nav > .disabled > a:hover,
|
||||
.navbar-nav > .disabled > a:focus {
|
||||
color: #cccccc;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -3570,7 +3570,7 @@ button.close {
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
padding: 7px 15px;
|
||||
padding: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
font-size: 18px;
|
||||
@@ -3614,57 +3614,49 @@ button.close {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navbar .nav > .divider {
|
||||
height: 2px;
|
||||
margin: 9px 0;
|
||||
overflow: hidden;
|
||||
background-color: #e1e1e1;
|
||||
border-bottom: 1px solid #fbfbfb;
|
||||
}
|
||||
|
||||
.navbar-form {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.navbar .nav > li > .dropdown-menu {
|
||||
.navbar-nav > li > .dropdown-menu {
|
||||
margin-top: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-fixed-bottom .nav > li > .dropdown-menu {
|
||||
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.navbar .nav li.dropdown > a:hover .caret,
|
||||
.navbar .nav li.dropdown > a:focus .caret {
|
||||
.navbar-nav li.dropdown > a:hover .caret,
|
||||
.navbar-nav li.dropdown > a:focus .caret {
|
||||
border-top-color: #333333;
|
||||
border-bottom-color: #333333;
|
||||
}
|
||||
|
||||
.navbar .nav li.dropdown.open > .dropdown-toggle,
|
||||
.navbar .nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
||||
.navbar-nav li.dropdown.open > .dropdown-toggle,
|
||||
.navbar-nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar-nav li.dropdown.open.active > .dropdown-toggle {
|
||||
color: #555555;
|
||||
background-color: #d5d5d5;
|
||||
}
|
||||
|
||||
.navbar .nav li.dropdown > .dropdown-toggle .caret {
|
||||
.navbar-nav li.dropdown > .dropdown-toggle .caret {
|
||||
border-top-color: #777777;
|
||||
border-bottom-color: #777777;
|
||||
}
|
||||
|
||||
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
|
||||
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
|
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
|
||||
.navbar-nav li.dropdown.open > .dropdown-toggle .caret,
|
||||
.navbar-nav li.dropdown.active > .dropdown-toggle .caret,
|
||||
.navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
|
||||
border-top-color: #555555;
|
||||
border-bottom-color: #555555;
|
||||
}
|
||||
|
||||
.navbar .pull-right > li > .dropdown-menu,
|
||||
.navbar .nav > li > .dropdown-menu.pull-right {
|
||||
.navbar-nav.pull-right > li > .dropdown-menu,
|
||||
.navbar-nav > li > .dropdown-menu.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
@@ -3687,26 +3679,26 @@ button.close {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav > li > a {
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav > li > a:hover,
|
||||
.navbar-inverse .nav > li > a:focus {
|
||||
.navbar-inverse .navbar-nav > li > a:hover,
|
||||
.navbar-inverse .navbar-nav > li > a:focus {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav > .active > a,
|
||||
.navbar-inverse .nav > .active > a:hover,
|
||||
.navbar-inverse .nav > .active > a:focus {
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-nav > .active > a:focus {
|
||||
color: #ffffff;
|
||||
background-color: #080808;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav > .disabled > a,
|
||||
.navbar-inverse .nav > .disabled > a:hover,
|
||||
.navbar-inverse .nav > .disabled > a:focus {
|
||||
.navbar-inverse .navbar-nav > .disabled > a,
|
||||
.navbar-inverse .navbar-nav > .disabled > a:hover,
|
||||
.navbar-inverse .navbar-nav > .disabled > a:focus {
|
||||
color: #444444;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -3724,31 +3716,26 @@ button.close {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav > .divider {
|
||||
background-color: #151515;
|
||||
border-bottom-color: #2f2f2f;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
|
||||
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
|
||||
.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle,
|
||||
.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background-color: #080808;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav li.dropdown > a:hover .caret {
|
||||
.navbar-inverse .navbar-nav li.dropdown > a:hover .caret {
|
||||
border-top-color: #ffffff;
|
||||
border-bottom-color: #ffffff;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
|
||||
.navbar-inverse .navbar-nav li.dropdown > .dropdown-toggle .caret {
|
||||
border-top-color: #999999;
|
||||
border-bottom-color: #999999;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
|
||||
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
|
||||
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
|
||||
.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle .caret,
|
||||
.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle .caret,
|
||||
.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle .caret {
|
||||
border-top-color: #ffffff;
|
||||
border-bottom-color: #ffffff;
|
||||
}
|
||||
@@ -3760,36 +3747,19 @@ button.close {
|
||||
}
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
margin-left: -10px;
|
||||
margin-right: 5px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
.navbar .nav {
|
||||
float: left;
|
||||
margin-top: 0;
|
||||
}
|
||||
.navbar .nav:before,
|
||||
.navbar .nav:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.navbar .nav:after {
|
||||
clear: both;
|
||||
}
|
||||
.navbar .nav:before,
|
||||
.navbar .nav:after {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.navbar .nav:after {
|
||||
clear: both;
|
||||
.navbar .nav > li {
|
||||
float: left;
|
||||
}
|
||||
.navbar .nav.pull-right {
|
||||
float: right;
|
||||
}
|
||||
.navbar .nav > li {
|
||||
float: left;
|
||||
}
|
||||
.navbar .nav > .divider {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
@@ -3800,15 +3770,6 @@ button.close {
|
||||
.navbar-inverse .nav > .divider {
|
||||
border-right-color: #2f2f2f;
|
||||
}
|
||||
.navbar-fixed-left {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.navbar-fixed-left .navbar-brand,
|
||||
.navbar-fixed-left .nav,
|
||||
.navbar-fixed-left .nav > li {
|
||||
float: none;
|
||||
}
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
top: auto;
|
||||
|
||||
@@ -308,7 +308,7 @@ section > ul li {
|
||||
.bs-navbar-bottom-example {
|
||||
z-index: 1;
|
||||
padding: 0;
|
||||
height: 90px;
|
||||
height: 110px;
|
||||
overflow: hidden; /* cut the drop shadows off */
|
||||
}
|
||||
.bs-navbar-top-example .navbar-fixed-top,
|
||||
|
||||
@@ -3423,7 +3423,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<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>
|
||||
@@ -3433,7 +3433,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
{% highlight html linenos %}
|
||||
<div class="navbar">
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<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>
|
||||
@@ -3458,7 +3458,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<p>Nav items are simple to add via unordered lists.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<ul class="nav">
|
||||
<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>
|
||||
@@ -3466,31 +3466,11 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html linenos %}
|
||||
<ul class="nav">
|
||||
<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 %}
|
||||
<p>You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <code><li></code> elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="divider"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html linenos %}
|
||||
<ul class="nav">
|
||||
...
|
||||
<li class="divider"></li>
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="navbar-forms">Forms</h3>
|
||||
@@ -3529,7 +3509,7 @@ For example, <code><section></code> should be wrapped as inline.
|
||||
<div class="navbar navbar-fixed-top" style="position: absolute; top: -1px;">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<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>
|
||||
@@ -3565,7 +3545,7 @@ body {
|
||||
<div class="navbar navbar-fixed-bottom" style="position: absolute; bottom: -1px;">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<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>
|
||||
@@ -3601,7 +3581,7 @@ body {
|
||||
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<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>
|
||||
@@ -3628,7 +3608,7 @@ body {
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<div class="nav-collapse collapse navbar-responsive-collapse">
|
||||
<ul class="nav">
|
||||
<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>
|
||||
@@ -3648,9 +3628,8 @@ body {
|
||||
<form class="navbar-form pull-left" action="">
|
||||
<input type="text" class="col-span-8" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav pull-right">
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
@@ -3706,7 +3685,7 @@ body {
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<div class="nav-collapse collapse navbar-inverse-collapse">
|
||||
<ul class="nav">
|
||||
<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>
|
||||
@@ -3726,9 +3705,8 @@ body {
|
||||
<form class="navbar-form pull-left" action="">
|
||||
<input type="text" class="col-span-8" placeholder="Search">
|
||||
</form>
|
||||
<ul class="nav pull-right">
|
||||
<ul class="nav navbar-nav pull-right">
|
||||
<li><a href="#">Link</a></li>
|
||||
<li class="divider"></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
|
||||
Reference in New Issue
Block a user