mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-09 07:06:36 +02:00
Code Issues Releases Wiki Activity

rewrite navbar bits some more

Browse Source
This commit is contained in:
Mark Otto
2015-08-17 23:43:59 -07:00
parent 82615e9919
commit f1e10c37fd
3 changed files with 118 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

236
docs/components/navbar.md
View File

@@ -4,41 +4,37 @@ title: Navbar
group: components group: components
--- ---
The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content. The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
## Contents ## Contents
* Will be replaced with the ToC, excluding the "Contents" header * Will be replaced with the ToC, excluding the "Contents" header
{:toc} {:toc}
### Basics ## Basics
Here's what you need to know before getting started with the navbar: Here's what you need to know before getting started with the navbar:
- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles. - Navbars require a wrapping `.navbar` and a color scheme class (either `.navbar-default` or `.navbar-inverse`).
- When using multiple components in a navbar, some [alignment classes](#alignment) are required. - When using multiple components in a navbar, some [alignment classes](#alignment) are required.
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width. - Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.
- Use `.pull-left` and `.pull-right` to quickly align sub-components.
- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies. - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
### Branding ## Supported content
Name your company, product, or project with `.navbar-brand`. Navbars come with built-in support for a handful of sub-components. Mix and match from the following as you need:
- `.navbar-brand` for your company, product, or project name
- `.navbar-nav` for a full-height and lightweight navigation (including support for dropdowns)
- `.navbar-form` for vertically centering default-sized inputs and buttons.
Here's an example of all the sub-components included in a default, light navbar:
{% example html %} {% example html %}
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<h3 class="navbar-brand"> <a class="navbar-brand" href="#">Navbar</a>
<a href="#">Navbar</a> <ul class="nav navbar-nav">
</h3>
</nav>
{% endexample %}
### Navigation
Use `.nav-pills` within a navbar for basic navigation.
{% example html %}
<nav class="navbar navbar-default">
<ul class="nav nav-pills">
<li class="nav-item active"> <li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li> </li>
@@ -52,32 +48,49 @@ Use `.nav-pills` within a navbar for basic navigation.
<a class="nav-link" href="#">About</a> <a class="nav-link" href="#">About</a>
</li> </li>
</ul> </ul>
</nav> <form class="form-inline navbar-form pull-right">
{% endexample %}
### Inline forms
Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.
{% example html %}
<nav class="navbar navbar-default">
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search"> <input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button> <button class="btn btn-success-outline" type="submit">Search</button>
</form> </form>
</nav> </nav>
{% endexample %} {% endexample %}
### Containers ## Inverse theme
Although it's not required, you can wrap a navbar in a `.container` to center it on a page, or add one within to only center the contents of the navbar. When you want a darker navbar with light text colors, replace the `.navbar-default` with `.navbar-inverse`.
{% example html %}
<nav class="navbar navbar-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline navbar-form pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit">Search</button>
</form>
</nav>
{% endexample %}
## Containers
Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of the navbar.
{% example html %} {% example html %}
<div class="container"> <div class="container">
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<h3 class="navbar-brand"> <a class="navbar-brand" href="#">Navbar</a>
<a href="#">Navbar</a>
</h3>
</nav> </nav>
</div> </div>
{% endexample %} {% endexample %}
@@ -85,144 +98,12 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{% example html %} {% example html %}
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container"> <div class="container">
<h3 class="navbar-brand"> <a class="navbar-brand" href="#">Navbar</a>
<a href="#">Navbar</a>
</h3>
</div> </div>
</nav> </nav>
{% endexample %} {% endexample %}
### Alignment ## Collapsible content
Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.
{% example html %}
<nav class="navbar navbar-default">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav nav-pills pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<ul class="nav nav-pills pull-right">
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign out</a>
</li>
</ul>
</nav>
{% endexample %}
### Inverse color scheme
Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.
{% example html %}
<nav class="navbar navbar-inverse">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav nav-pills pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-primary" type="submit">Search</button>
</form>
</nav>
{% endexample %}
### Small navbar
Small navbars provide a similar aesthetic to Bootstrap 3's navbar. It cuts the padding down, enables full-height navigation, and tweaks vertical alignment for search forms, buttons, and more. It's also available in both default and inverse schemes.
When moving from a regular navbar to a small one, be sure to update your inputs and buttons to use their small variations as well.
<div class="bd-example">
<nav class="navbar navbar-default navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-inverse navbar-sm">
<h3 class="navbar-brand pull-left">
<a href="#">Navbar</a>
</h3>
<ul class="nav navbar-nav pull-left">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline pull-right">
<input class="form-control form-control-sm" type="text" placeholder="Search">
<button class="btn btn-sm btn-primary" type="submit">Search</button>
</form>
</nav>
</div>
{% highlight html %}
<nav class="navbar navbar-default navbar-sm">
<!-- Navbar contents -->
</nav>
<nav class="navbar navbar-inverse navbar-sm">
<!-- Navbar contents -->
</nav>
{% endhighlight %}
### Collapsible content
Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content. Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden content.
@@ -230,7 +111,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
<div class="collapse" id="exCollapsingNavbar"> <div class="collapse" id="exCollapsingNavbar">
<div class="inverse p-a"> <div class="inverse p-a">
<h4>Collapsed content</h4> <h4>Collapsed content</h4>
<p>Toggleable via the navbar brand.</p> <span class="text-muted">Toggleable via the navbar brand.</span>
</div> </div>
</div> </div>
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
@@ -248,8 +129,21 @@ For more complex navbar patterns, like those used in Bootstrap v3, use the `.nav
&#9776; &#9776;
</button> </button>
<div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"> <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
<h4>Collapsed on xs devices</h4> <a class="navbar-brand" href="#">Responsive navbar</a>
<p>Toggleable via the navbar brand.</p> <ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div> </div>
</nav> </nav>
{% endexample %} {% endexample %}

165
scss/_navbar.scss
View File

@@ -5,8 +5,6 @@
.navbar { .navbar {
position: relative; position: relative;
padding: $spacer;
margin-bottom: $navbar-margin-bottom;
@include clearfix; @include clearfix;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
@@ -15,7 +13,6 @@
} }
//
// Navbar alignment options // Navbar alignment options
// //
// Display the navbar across the entirety of the page or fixed it to the top or // Display the navbar across the entirety of the page or fixed it to the top or
@@ -66,20 +63,20 @@
} }
//
// Brand/project name // Brand/project name
//
.navbar-brand { .navbar-brand {
float: left; float: left;
padding: .625rem .75rem; padding: .95rem 1rem;
margin-right: $spacer;
margin-bottom: 0; // For headings
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: 1; line-height: 1;
color: $navbar-default-brand-color;
> a { @include hover-focus {
@include hover-focus { color: $navbar-default-brand-hover-color;
text-decoration: none; text-decoration: none;
}
} }
> img { > img {
@@ -94,13 +91,15 @@
// Bootstrap JavaScript plugin. // Bootstrap JavaScript plugin.
.navbar-toggler { .navbar-toggler {
padding: .55rem .75rem; padding: .5rem .75rem;
margin-right: $spacer; margin-top: .375rem;
margin-bottom: 0; // For headings margin-bottom: .375rem;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: 1; line-height: 1;
color: $navbar-default-link-color;
background: none; background: none;
border: 0; border: $border-width solid transparent;
@include border-radius($btn-border-radius);
@include hover-focus { @include hover-focus {
text-decoration: none; text-decoration: none;
@@ -122,37 +121,9 @@
} }
// Dropdown menus // Navigation
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
@include border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
@include border-top-radius($navbar-border-radius);
@include border-bottom-radius(0);
}
// Small navbar
// //
// Condensed dimensions for an aesthetic closer to v3's navbar. // Custom navbar navigation built on the base `.nav` styles.
.navbar-sm {
padding-top: 0;
padding-bottom: 0;
.navbar-brand {
padding-top: .95rem;
padding-bottom: .95rem;
}
.form-inline {
margin-top: .6rem;
}
}
.navbar-nav { .navbar-nav {
.nav-item { .nav-item {
@@ -161,9 +132,14 @@
.nav-link { .nav-link {
display: block; display: block;
padding-top: .95rem; padding: .95rem .75rem;
padding-bottom: .95rem;
line-height: 1.25; // Match the `.navbar-brand` line-height: 1.25; // Match the `.navbar-brand`
color: $navbar-default-link-color;
@include hover-focus {
color: $navbar-default-link-hover-color;
background-color: $navbar-default-link-hover-bg;
}
} }
.open > .nav-link, .open > .nav-link,
@@ -179,8 +155,20 @@
} }
// Forms
//
// Additional modifier class to add to `.form-inline` to vertically center forms.
.navbar-form {
margin-top: .375rem;
margin-bottom: .375rem;
margin-right: 1rem;
}
//
// Alternate navbars // Alternate navbars
// -------------------------------------------------- //
// todo: audit these styles // todo: audit these styles
@@ -205,29 +193,9 @@
background-color: $navbar-inverse-bg; background-color: $navbar-inverse-bg;
border-color: $navbar-inverse-border; border-color: $navbar-inverse-border;
.navbar-toggler,
.navbar-brand > a,
.nav-pills > .nav-item > .nav-link {
color: $navbar-inverse-link-color;
@include hover-focus {
color: $navbar-inverse-link-hover-color;
}
}
.nav-pills > .nav-item > .nav-link {
@include hover-focus {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
}
.nav-pills > .active > .nav-link,
.nav-pills > .nav-link.active {
color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
}
.navbar-brand { .navbar-brand {
color: $navbar-inverse-brand-color; color: $navbar-inverse-brand-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-brand-hover-color; color: $navbar-inverse-brand-hover-color;
background-color: $navbar-inverse-brand-hover-bg; background-color: $navbar-inverse-brand-hover-bg;
@@ -235,64 +203,27 @@
} }
.navbar-nav { .navbar-nav {
.navbar-link { .nav-link {
color: $navbar-inverse-link-color; color: $navbar-inverse-link-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-link-hover-color; color: $navbar-inverse-link-hover-color;
background-color: $navbar-inverse-link-hover-bg; background-color: $navbar-inverse-link-hover-bg;
} }
}
&.active > a { .open > .nav-link,
@include plain-hover-focus { .active > .nav-link,
color: $navbar-inverse-link-active-color; .nav-link.open,
background-color: $navbar-inverse-link-active-bg; .nav-link.active {
} @include plain-hover-focus {
} color: $navbar-inverse-link-active-color;
background-color: $navbar-inverse-link-active-bg;
&.disabled > a {
@include plain-hover-focus {
color: $navbar-inverse-link-disabled-color;
background-color: $navbar-inverse-link-disabled-bg;
}
} }
} }
} }
// .navbar-collapse, .navbar-toggler {
// .navbar-form { color: $navbar-inverse-link-color;
// border-color: darken($navbar-inverse-bg, 7%); }
// }
//
// // Dropdowns
// .navbar-nav {
// > .open > a {
// @include plain-hover-focus {
// color: $navbar-inverse-link-active-color;
// background-color: $navbar-inverse-link-active-bg;
// }
// }
// }
// .navbar-link {
// color: $navbar-inverse-link-color;
// @include hover {
// color: $navbar-inverse-link-hover-color;
// }
// }
//
// .btn-link {
// color: $navbar-inverse-link-color;
//
// @include hover-focus {
// color: $navbar-inverse-link-hover-color;
// }
//
// &:disabled,
// fieldset[disabled] & {
// @include hover-focus {
// color: $navbar-inverse-link-disabled-color;
// }
// }
// }
} }

10
scss/_variables.scss
View File

@@ -350,15 +350,15 @@ $navbar-default-bg: #f8f8f8 !default;
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default; $navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
$navbar-default-link-color: #777 !default; $navbar-default-link-color: #777 !default;
$navbar-default-link-hover-color: #333 !default; $navbar-default-link-hover-color: #555 !default;
$navbar-default-link-hover-bg: transparent !default; $navbar-default-link-hover-bg: transparent !default;
$navbar-default-link-active-color: #555 !default; $navbar-default-link-active-color: #333 !default;
$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default; $navbar-default-link-active-bg: darken($navbar-default-bg, 5%) !default;
$navbar-default-link-disabled-color: #ccc !default; $navbar-default-link-disabled-color: #ccc !default;
$navbar-default-link-disabled-bg: transparent !default; $navbar-default-link-disabled-bg: transparent !default;
$navbar-default-brand-color: $navbar-default-link-color !default; $navbar-default-brand-color: $navbar-default-link-color !default;
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default; $navbar-default-brand-hover-color: $navbar-default-link-hover-color !default;
$navbar-default-brand-hover-bg: transparent !default; $navbar-default-brand-hover-bg: transparent !default;
$navbar-default-toggle-hover-bg: #ddd !default; $navbar-default-toggle-hover-bg: #ddd !default;
@@ -390,7 +390,7 @@ $navbar-inverse-toggle-border-color: #333 !default;
// Navs // Navs
$nav-link-padding: .75em 1em !default; $nav-link-padding: .5em 1em !default;
$nav-link-hover-bg: $gray-lighter !default; $nav-link-hover-bg: $gray-lighter !default;
$nav-disabled-link-color: $gray-light !default; $nav-disabled-link-color: $gray-light !default;