clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-24 03:57:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Navbar update

Browse Source 
Addresses a few different cases where the navbar has and doesn't have a
container, and accordingly adjusts the padding and margin of key
elements.
This commit is contained in:
Mark Otto 2013-08-17 21:00:13 -07:00
parent b413aff045
commit 5539db5237
5 changed files with 80 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
dist/css/bootstrap.css vendored
View File

@ -3210,11 +3210,6 @@ button.close {
}
}
.navbar-header {
padding-right: 15px;
padding-left: 15px;
}
.navbar-header:before,
.navbar-header:after {
display: table;
@ -3238,9 +3233,6 @@ button.close {
@media (min-width: 768px) {
.navbar-header {
float: left;
padding-right: 0;
padding-left: 0;
margin-right: 15px;
}
}
@ -3281,8 +3273,6 @@ button.close {
@media (min-width: 768px) {
.navbar-collapse {
width: auto;
padding-right: 0;
padding-left: 0;
border-top: 0;
box-shadow: none;
}
@ -3297,6 +3287,20 @@ button.close {
}
}
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-static-top {
border-width: 0 0 1px;
}
@ -3334,8 +3338,7 @@ button.close {
.navbar-brand {
float: left;
padding-top: 15px;
padding-bottom: 15px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
color: #777777;
@ -3348,11 +3351,18 @@ button.close {
background-color: transparent;
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand {
margin-left: -15px;
}
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
border: 1px solid #dddddd;
@ -3378,9 +3388,6 @@ button.close {
@media (min-width: 768px) {
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none;
}
}
@ -5177,7 +5184,7 @@ a.list-group-item.active > .badge,
}
.jumbotron {
padding: 30px 15px;
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;

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

File diff suppressed because one or more lines are too long

64
examples/navbar/index.html
View File

@ -22,40 +22,38 @@
<!-- Static navbar -->
<div class="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</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">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><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">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->

2
less/jumbotron.less
View File

@ -4,7 +4,7 @@
.jumbotron {
padding: 30px 15px;
padding: 30px;
margin-bottom: 30px;
font-size: (@font-size-base * 1.5);
font-weight: 200;

36
less/navbar.less
View File

@ -30,15 +30,10 @@
// 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;
padding-left: 0;
padding-right: 0;
margin-right: @navbar-padding-horizontal;
}
}
@ -69,8 +64,6 @@
@media (min-width: @grid-float-breakpoint) {
width: auto;
padding-right: 0;
padding-left: 0;
border-top: 0;
box-shadow: none;
@ -88,6 +81,22 @@
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container > .navbar-header,
.container > .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
}
}
//
// Navbar alignment options
//
@ -129,8 +138,7 @@
.navbar-brand {
float: left;
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
line-height: @line-height-computed;
color: @navbar-brand-color;
@ -140,6 +148,12 @@
text-decoration: none;
background-color: @navbar-brand-hover-bg;
}
@media (min-width: @grid-float-breakpoint) {
.navbar > .container & {
margin-left: -@navbar-padding-horizontal;
}
}
}
@ -151,6 +165,7 @@
.navbar-toggle {
position: relative;
float: right;
margin-right: @navbar-padding-horizontal;
padding: 9px 10px;
.navbar-vertical-align(34px);
background-color: transparent;
@ -175,9 +190,6 @@
}
@media (min-width: @grid-float-breakpoint) {
position: relative;
top: auto;
left: auto;
display: none;
}
}