mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Navbar realignment:
* Change .brand to .navbar-brand * Change .btn-navbar to .navbar-toggle * Redesign navbar toggle to be a bit lighter and wider * Center align the navbar brand with a max-width of 200px (to minimize hit area) while still centering
This commit is contained in:
Mark Otto
parent
f51862f158
commit
023568fe3d
@ -2,12 +2,12 @@
|
||||
================================================== -->
|
||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="brand" href="/">Bootstrap</a>
|
||||
<a class="navbar-brand" href="/">Bootstrap</a>
|
||||
<div class="nav-collapse collapse">
|
||||
<ul class="nav">
|
||||
<li {% if page.title == "Bootstrap" %}class="active"{% endif %}>
|
||||
|
||||
61
docs/assets/css/bootstrap.css
vendored
61
docs/assets/css/bootstrap.css
vendored
@ -3120,6 +3120,7 @@ button.close {
|
||||
*/
|
||||
|
||||
.navbar {
|
||||
position: relative;
|
||||
padding: 10px 15px;
|
||||
background-color: #eeeeee;
|
||||
border-radius: 4px;
|
||||
@ -3160,7 +3161,6 @@ button.close {
|
||||
}
|
||||
|
||||
.navbar-static-top {
|
||||
position: static;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@ -3181,40 +3181,51 @@ button.close {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.navbar .brand {
|
||||
display: inline-block;
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
padding: 7px 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
color: #777777;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar .brand:hover,
|
||||
.navbar .brand:focus {
|
||||
.navbar-brand:hover,
|
||||
.navbar-brand:focus {
|
||||
color: #5e5e5e;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-navbar {
|
||||
float: right;
|
||||
padding: 10px 12px;
|
||||
background-color: #ddd;
|
||||
border: 0;
|
||||
.navbar-toggle {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 8px 12px;
|
||||
background-color: transparent;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-navbar .icon-bar {
|
||||
.navbar-toggle:hover,
|
||||
.navbar-toggle:focus {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.navbar-toggle .icon-bar {
|
||||
display: block;
|
||||
width: 20px;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.btn-navbar .icon-bar + .icon-bar {
|
||||
margin-top: 3px;
|
||||
.navbar-toggle .icon-bar + .icon-bar {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navbar .nav > .divider {
|
||||
@ -3276,12 +3287,12 @@ button.close {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
.navbar-inverse .brand {
|
||||
.navbar-inverse .navbar-brand {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.navbar-inverse .brand:hover,
|
||||
.navbar-inverse .brand:focus {
|
||||
.navbar-inverse .navbar-brand:hover,
|
||||
.navbar-inverse .navbar-brand:focus {
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -3307,8 +3318,13 @@ button.close {
|
||||
background-color: #080808;
|
||||
}
|
||||
|
||||
.navbar-inverse .btn-navbar {
|
||||
background-color: #444;
|
||||
.navbar-inverse .navbar-toggle {
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-toggle:hover,
|
||||
.navbar-inverse .navbar-toggle:focus {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.navbar-inverse .nav > .divider {
|
||||
@ -3345,7 +3361,7 @@ button.close {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar .brand {
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
@ -3379,7 +3395,10 @@ button.close {
|
||||
.navbar-inverse .nav > .divider {
|
||||
border-right-color: #2f2f2f;
|
||||
}
|
||||
.navbar .btn-navbar {
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
display: none;
|
||||
}
|
||||
.nav-collapse.collapse {
|
||||
|
||||
@ -766,7 +766,7 @@ title: Components
|
||||
<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>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
@ -776,7 +776,7 @@ title: Components
|
||||
</div><!-- /example -->
|
||||
{% highlight html linenos %}
|
||||
<div class="navbar">
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
@ -791,11 +791,11 @@ title: Components
|
||||
<p>A simple link to show your brand or project name only requires an anchor tag.</p>
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar">
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
</div>
|
||||
</div><!-- /example -->
|
||||
{% highlight html linenos %}
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3>Nav links</h3>
|
||||
@ -874,7 +874,7 @@ title: Components
|
||||
<div class="bs-docs-example bs-navbar-top-example">
|
||||
<div class="navbar navbar-fixed-top" style="position: absolute;">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
@ -894,7 +894,7 @@ title: Components
|
||||
<div class="bs-docs-example bs-navbar-bottom-example">
|
||||
<div class="navbar navbar-fixed-bottom" style="position: absolute;">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
@ -914,7 +914,7 @@ title: Components
|
||||
<div class="bs-docs-example bs-navbar-top-example">
|
||||
<div class="navbar navbar-static-top" style="margin: -1px -1px 0;">
|
||||
<div class="container" style="width: auto;">
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
<li><a href="#">Link</a></li>
|
||||
@ -931,16 +931,16 @@ title: Components
|
||||
|
||||
|
||||
<h2>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>.btn-navbar</code>.</p>
|
||||
<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-docs-example">
|
||||
<div class="navbar">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
|
||||
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<div class="nav-collapse collapse navbar-responsive-collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
@ -984,15 +984,15 @@ title: Components
|
||||
<div class="navbar">
|
||||
<div class="container">
|
||||
|
||||
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
|
||||
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
|
||||
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</a>
|
||||
|
||||
<!-- Be sure to leave the brand out there if you want it shown -->
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
|
||||
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
|
||||
<div class="nav-collapse collapse navbar-responsive-collapse">
|
||||
@ -1012,12 +1012,12 @@ title: Components
|
||||
<div class="bs-docs-example">
|
||||
<div class="navbar navbar-inverse" style="position: static;">
|
||||
<div class="container">
|
||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
|
||||
<a 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>
|
||||
</a>
|
||||
<a class="brand" href="#">Title</a>
|
||||
<a class="navbar-brand" href="#">Title</a>
|
||||
<div class="nav-collapse collapse navbar-inverse-collapse">
|
||||
<ul class="nav">
|
||||
<li class="active"><a href="#">Home</a></li>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
// Wrapper and base class
|
||||
.navbar {
|
||||
position: relative;
|
||||
padding: 10px 15px;
|
||||
background-color: @navbar-bg;
|
||||
border-radius: @border-radius-base;
|
||||
@ -16,7 +17,8 @@
|
||||
|
||||
.navbar {
|
||||
.nav {
|
||||
margin-top: 15px; // space out from .navbar .brand and .btn-navbar
|
||||
// space out from .navbar .brand and .btn-navbar
|
||||
margin-top: 15px;
|
||||
}
|
||||
.nav > li > a {
|
||||
padding-top: (@navbar-height - @line-height-base) / 2;
|
||||
@ -45,7 +47,6 @@
|
||||
|
||||
// Static navbar
|
||||
.navbar-static-top {
|
||||
position: static;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@ -68,13 +69,17 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
// Brand/project name
|
||||
.navbar .brand {
|
||||
display: inline-block;
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 7px 15px;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: @line-height-base;
|
||||
color: @navbar-brand-color;
|
||||
text-align: center;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @navbar-brand-color-hover;
|
||||
@ -84,23 +89,30 @@
|
||||
}
|
||||
|
||||
// Collapsible navbar toggle
|
||||
.btn-navbar {
|
||||
float: right;
|
||||
padding: 10px 12px;
|
||||
background-color: #ddd;
|
||||
border: 0;
|
||||
.navbar-toggle {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
padding: 8px 12px;
|
||||
background-color: transparent;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
// Bars
|
||||
.icon-bar {
|
||||
display: block;
|
||||
width: 20px;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.icon-bar + .icon-bar {
|
||||
margin-top: 3px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -171,7 +183,7 @@
|
||||
.navbar-inverse {
|
||||
background-color: @navbar-inverse-bg;
|
||||
|
||||
.brand {
|
||||
.navbar-brand {
|
||||
color: @navbar-inverse-brand-color;
|
||||
&:hover,
|
||||
&:focus {
|
||||
@ -200,8 +212,12 @@
|
||||
}
|
||||
|
||||
// Darken the responsive nav toggle
|
||||
.btn-navbar {
|
||||
background-color: #444;
|
||||
.navbar-toggle {
|
||||
border-color: #333;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// Darken dividers
|
||||
@ -243,7 +259,7 @@
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.navbar .brand {
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding-top: (@navbar-height - @line-height-base) / 2;
|
||||
padding-bottom: (@navbar-height - @line-height-base) / 2;
|
||||
@ -277,7 +293,10 @@
|
||||
}
|
||||
|
||||
// Required to make the collapsing navbar work on regular desktops
|
||||
.navbar .btn-navbar {
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
display: none;
|
||||
}
|
||||
.nav-collapse.collapse {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user