rewrite navbar once more for lower key styles and a new take on modifiers for improved customization
This commit is contained in:
Mark Otto
parent
d073a3beaa
commit
d6b6a20a0d
|
|
@ -4,7 +4,7 @@ title: Navbar
|
|||
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 into a concise navigation header. It's easily extensible and, with the help of our collapse plugin, it can easily integrate offscreen content.
|
||||
|
||||
## Contents
|
||||
|
||||
|
|
@ -28,11 +28,12 @@ Navbars come with built-in support for a handful of sub-components. Mix and matc
|
|||
- `.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.
|
||||
- `.navbar-toggler` for use with our collapse plugin and other navigation toggling behaviors.
|
||||
|
||||
Here's an example of all the sub-components included in a default, light navbar:
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-default">
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item active">
|
||||
|
|
@ -55,33 +56,91 @@ Here's an example of all the sub-components included in a default, light navbar:
|
|||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
## Inverse theme
|
||||
## Color schemes
|
||||
|
||||
When you want a darker navbar with light text colors, replace the `.navbar-default` with `.navbar-inverse`.
|
||||
Theming the navbar has never been easier thanks to the combination of a simple link color modifier class and `background-color` utilities. Put another way, you specify light or dark and apply a background color.
|
||||
|
||||
{% 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>
|
||||
Here are some examples to show what we mean.
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-dark bg-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-info-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
<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-secondary-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
|
||||
<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-primary-outline" type="submit">Search</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<nav class="navbar navbar-dark bg-inverse">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
{% endexample %}
|
||||
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
{% endhighlight %}
|
||||
|
||||
## Containers
|
||||
|
||||
|
|
@ -89,14 +148,14 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
|
|||
|
||||
{% example html %}
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-default">
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</nav>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-default">
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
</div>
|
||||
|
|
@ -109,12 +168,12 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
|
|||
|
||||
{% example html %}
|
||||
<div class="collapse" id="exCollapsingNavbar">
|
||||
<div class="inverse p-a">
|
||||
<div class="bg-inverse p-a">
|
||||
<h4>Collapsed content</h4>
|
||||
<span class="text-muted">Toggleable via the navbar brand.</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navbar navbar-default">
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
|
||||
☰
|
||||
</button>
|
||||
|
|
@ -124,7 +183,7 @@ Our collapse plugin allows you to use a `<button>` or `<a>` to toggle hidden con
|
|||
For more complex navbar patterns, like those used in Bootstrap v3, use the `.navbar-toggleable-*` classes in conjunction with the `.navbar-toggler`. These classes override our responsive utilities to show navigation only when content is meant to be shown.
|
||||
|
||||
{% example html %}
|
||||
<nav class="navbar navbar-default">
|
||||
<nav class="navbar navbar-light bg-faded">
|
||||
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
|
||||
☰
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
.navbar {
|
||||
position: relative;
|
||||
padding: $navbar-padding-vertical $navbar-padding-horizontal;
|
||||
@include clearfix;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
|
@ -69,13 +70,12 @@
|
|||
|
||||
.navbar-brand {
|
||||
float: left;
|
||||
padding: .95rem 1rem;
|
||||
margin-right: 1rem;
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
font-size: $font-size-lg;
|
||||
line-height: 1;
|
||||
color: $navbar-default-brand-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-default-brand-hover-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -92,11 +92,8 @@
|
|||
|
||||
.navbar-toggler {
|
||||
padding: .5rem .75rem;
|
||||
margin-top: .375rem;
|
||||
margin-bottom: .375rem;
|
||||
font-size: $font-size-lg;
|
||||
line-height: 1;
|
||||
color: $navbar-default-link-color;
|
||||
background: none;
|
||||
border: $border-width solid transparent;
|
||||
@include border-radius($btn-border-radius);
|
||||
|
|
@ -132,83 +129,26 @@
|
|||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: .95rem .75rem;
|
||||
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,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-default-link-active-color;
|
||||
cursor: default;
|
||||
background-color: $navbar-default-link-active-bg;
|
||||
}
|
||||
padding: .425rem .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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
|
||||
//
|
||||
|
||||
// todo: audit these styles
|
||||
|
||||
// Default navbar
|
||||
.navbar-default {
|
||||
background-color: $navbar-default-bg;
|
||||
border-color: $navbar-default-border;
|
||||
|
||||
// Dark links against a light background
|
||||
.navbar-light {
|
||||
.navbar-brand {
|
||||
color: $navbar-default-brand-color;
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-default-brand-hover-color;
|
||||
background-color: $navbar-default-brand-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inverse navbar
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: $navbar-inverse-bg;
|
||||
border-color: $navbar-inverse-border;
|
||||
|
||||
.navbar-brand {
|
||||
color: $navbar-inverse-brand-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-inverse-brand-hover-color;
|
||||
background-color: $navbar-inverse-brand-hover-bg;
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-inverse-link-color;
|
||||
color: $navbar-light-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-inverse-link-hover-color;
|
||||
background-color: $navbar-inverse-link-hover-bg;
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -217,13 +157,38 @@
|
|||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-inverse-link-active-color;
|
||||
background-color: $navbar-inverse-link-active-bg;
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-inverse-link-color;
|
||||
// White links against a dark background
|
||||
.navbar-dark {
|
||||
.navbar-brand {
|
||||
color: $navbar-dark-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -336,56 +336,20 @@ $zindex-modal: 1050 !default;
|
|||
|
||||
|
||||
// Navbar
|
||||
//
|
||||
//
|
||||
|
||||
// Basics of a navbar
|
||||
$navbar-margin-bottom: $spacer-y !default;
|
||||
$navbar-border-radius: $border-radius !default;
|
||||
$navbar-padding-horizontal: $spacer !default;
|
||||
$navbar-padding-vertical: ($spacer / 2) !default;
|
||||
$navbar-border-radius: $border-radius !default;
|
||||
$navbar-padding-horizontal: $spacer !default;
|
||||
$navbar-padding-vertical: ($spacer / 2) !default;
|
||||
|
||||
$navbar-default-color: #777 !default;
|
||||
$navbar-default-bg: #f8f8f8 !default;
|
||||
$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
|
||||
$navbar-dark-color: rgba(255,255,255,.5);
|
||||
$navbar-dark-hover-color: rgba(255,255,255,.75);
|
||||
$navbar-dark-active-color: rgba(255,255,255,1);
|
||||
$navbar-dark-disabled-color: rgba(255,255,255,.25);
|
||||
|
||||
$navbar-default-link-color: #777 !default;
|
||||
$navbar-default-link-hover-color: #555 !default;
|
||||
$navbar-default-link-hover-bg: transparent !default;
|
||||
$navbar-default-link-active-color: #333 !default;
|
||||
$navbar-default-link-active-bg: darken($navbar-default-bg, 5%) !default;
|
||||
$navbar-default-link-disabled-color: #ccc !default;
|
||||
$navbar-default-link-disabled-bg: transparent !default;
|
||||
|
||||
$navbar-default-brand-color: $navbar-default-link-color !default;
|
||||
$navbar-default-brand-hover-color: $navbar-default-link-hover-color !default;
|
||||
$navbar-default-brand-hover-bg: transparent !default;
|
||||
|
||||
$navbar-default-toggle-hover-bg: #ddd !default;
|
||||
$navbar-default-toggle-icon-bar-bg: #888 !default;
|
||||
$navbar-default-toggle-border-color: #ddd !default;
|
||||
|
||||
|
||||
// Inverted navbar
|
||||
$navbar-inverse-color: lighten($gray-light, 12%) !default;
|
||||
$navbar-inverse-bg: #373a3c !default;
|
||||
$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
|
||||
|
||||
$navbar-inverse-link-color: lighten($gray-light, 15%) !default;
|
||||
$navbar-inverse-link-hover-color: #fff !default;
|
||||
$navbar-inverse-link-hover-bg: transparent !default;
|
||||
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
|
||||
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
|
||||
$navbar-inverse-link-disabled-color: #444 !default;
|
||||
$navbar-inverse-link-disabled-bg: transparent !default;
|
||||
|
||||
$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
|
||||
$navbar-inverse-brand-hover-color: #fff !default;
|
||||
$navbar-inverse-brand-hover-bg: transparent !default;
|
||||
|
||||
$navbar-inverse-toggle-hover-bg: #333 !default;
|
||||
$navbar-inverse-toggle-icon-bar-bg: #fff !default;
|
||||
$navbar-inverse-toggle-border-color: #333 !default;
|
||||
$navbar-light-color: rgba(0,0,0,.3);
|
||||
$navbar-light-hover-color: rgba(0,0,0,.6);
|
||||
$navbar-light-active-color: rgba(0,0,0,.8);
|
||||
$navbar-light-disabled-color: rgba(0,0,0,.15);
|
||||
|
||||
|
||||
// Navs
|
||||
|
|
|
|||
Loading…
Reference in New Issue