mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 11:21:23 +02:00
Code Issues Releases Wiki Activity

fixes #18115: move forward with one naming scheme for inversed color schemes, renaming .navbar-dark to .navbar-inverse (matching .card-inverse in the process and restoring v3's inverted class name)

Browse Source
This commit is contained in:
Mark Otto
2016-12-21 21:40:26 -08:00
committed by Mark Otto
parent ecba56828d
commit 80674b0c58
14 changed files with 44 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/components/navbar.md
View File

@@ -265,10 +265,10 @@ Mix and match with other components and utilities as needed.
## Color schemes ## Color schemes
Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Chose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities. Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Chose from `.navbar-light` for use with light background colors, or `.navbar-inverse` for dark background colors. Then, customize with `.bg-*` utilities.
<div class="bd-example"> <div class="bd-example">
<nav class="navbar navbar-dark navbar-toggleable-md bg-inverse"> <nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
@@ -294,7 +294,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div> </div>
</nav> </nav>
<nav class="navbar navbar-dark navbar-toggleable-md bg-primary"> <nav class="navbar navbar-inverse navbar-toggleable-md bg-primary">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
@@ -348,11 +348,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div> </div>
{% highlight html %} {% highlight html %}
<nav class="navbar navbar-dark bg-inverse"> <nav class="navbar navbar-inverse bg-inverse">
<!-- Navbar content --> <!-- Navbar content -->
</nav> </nav>
<nav class="navbar navbar-dark bg-primary"> <nav class="navbar navbar-inverse bg-primary">
<!-- Navbar content --> <!-- Navbar content -->
</nav> </nav>
@@ -478,7 +478,7 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
<span class="text-muted">Toggleable via the navbar brand.</span> <span class="text-muted">Toggleable via the navbar brand.</span>
</div> </div>
</div> </div>
<nav class="navbar navbar-dark bg-inverse"> <nav class="navbar navbar-inverse bg-inverse">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"></button>
</nav> </nav>
</div> </div>

2
docs/examples/album/index.html
View File

@@ -38,7 +38,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="navbar navbar-dark bg-inverse navbar-toggleable-sm"> <div class="navbar navbar-inverse bg-inverse navbar-toggleable-sm">
<div class="container flex-items-between"> <div class="container flex-items-between">
<a href="#" class="navbar-brand">Album</a> <a href="#" class="navbar-brand">Album</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"></button>

2
docs/examples/carousel/index.html
View File

@@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-dark navbar-fixed-top navbar-toggleable-md bg-inverse"> <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Carousel</a> <a class="navbar-brand" href="#">Carousel</a>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">

2
docs/examples/dashboard/index.html
View File

@@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-sm" id="navbar"> <div class="collapse navbar-toggleable-sm" id="navbar">
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>

2
docs/examples/jumbotron/index.html
View File

@@ -20,7 +20,7 @@
<body> <body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item active"> <li class="nav-item active">

11
docs/examples/justified-nav/justified-nav.css
View File

@@ -20,17 +20,26 @@ body {
} }
.navbar { .navbar {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7),to(#eee));
background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#eee 100%);
background-image: -o-linear-gradient(top, #f7f7f7 0%,#eee 100%);
background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%); background-image: linear-gradient(to bottom, #f7f7f7 0%,#eee 100%);
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.navbar-nav { .navbar-nav {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; display: flex;
} }
.navbar-nav .nav-item { .navbar-nav .nav-item {
flex: 1 0 auto; -webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
} }
} }

2
docs/examples/navbar-top-fixed/index.html
View File

@@ -20,7 +20,7 @@
<body> <body>
<nav class="navbar navbar-dark navbar-fixed-top navbar-toggleable-md bg-inverse"> <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Fixed navbar</a> <a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">

2
docs/examples/navbar-top/index.html
View File

@@ -20,7 +20,7 @@
<body> <body>
<nav class="navbar navbar-dark navbar-toggleable-md bg-inverse mb-3"> <nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse mb-3">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Fixed navbar</a> <a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">

6
docs/examples/navbars/index.html
View File

@@ -20,7 +20,7 @@
<body> <body>
<nav class="navbar navbar-dark bg-inverse"> <nav class="navbar navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
@@ -51,7 +51,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-dark bg-inverse"> <nav class="navbar navbar-inverse bg-inverse">
<div class="container"> <div class="container">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Container</a> <a class="navbar-brand" href="#">Container</a>
@@ -84,7 +84,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-dark bg-inverse"> <nav class="navbar navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarsExampleCenteredNav" aria-controls="navbarsExampleCenteredNav" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarsExampleCenteredNav"> <div class="collapse navbar-toggleable-md" id="navbarsExampleCenteredNav">

2
docs/examples/offcanvas/index.html
View File

@@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
<div class="container"> <div class="container">
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">

2
docs/examples/starter-template/index.html
View File

@@ -20,7 +20,7 @@
<body> <body>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
<a class="navbar-brand" href="#">Project name</a> <a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="nav-item active"> <li class="nav-item active">

2
docs/examples/sticky-footer-navbar/index.html
View File

@@ -21,7 +21,7 @@
<body> <body>
<!-- Fixed navbar --> <!-- Fixed navbar -->
<nav class="navbar navbar-dark navbar-fixed-top navbar-toggleable-md bg-inverse"> <nav class="navbar navbar-inverse navbar-fixed-top navbar-toggleable-md bg-inverse">
<button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler navbar-toggler-right hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"></button>
<a class="navbar-brand" href="#">Fixed navbar</a> <a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse"> <div class="collapse navbar-collapse" id="navbarCollapse">

20
scss/_navbar.scss
View File

@@ -177,26 +177,26 @@
} }
// White links against a dark background // White links against a dark background
.navbar-dark { .navbar-inverse {
.navbar-brand, .navbar-brand,
.navbar-toggler { .navbar-toggler {
color: $navbar-dark-active-color; color: $navbar-inverse-active-color;
@include hover-focus { @include hover-focus {
color: $navbar-dark-active-color; color: $navbar-inverse-active-color;
} }
} }
.navbar-nav { .navbar-nav {
.nav-link { .nav-link {
color: $navbar-dark-color; color: $navbar-inverse-color;
@include hover-focus { @include hover-focus {
color: $navbar-dark-hover-color; color: $navbar-inverse-hover-color;
} }
&.disabled { &.disabled {
color: $navbar-dark-disabled-color; color: $navbar-inverse-disabled-color;
} }
} }
@@ -205,14 +205,14 @@
.nav-link.open, .nav-link.open,
.nav-link.active { .nav-link.active {
@include plain-hover-focus { @include plain-hover-focus {
color: $navbar-dark-active-color; color: $navbar-inverse-active-color;
} }
} }
} }
.navbar-toggler { .navbar-toggler {
background-image: $navbar-dark-toggler-bg; background-image: $navbar-inverse-toggler-bg;
border-color: $navbar-dark-toggler-border; border-color: $navbar-inverse-toggler-border;
} }
.navbar-divider { .navbar-divider {
@@ -220,7 +220,7 @@
} }
.navbar-text { .navbar-text {
color: $navbar-dark-color; color: $navbar-inverse-color;
} }
} }

12
scss/_variables.scss
View File

@@ -596,12 +596,12 @@ $navbar-toggler-padding-y: .5rem !default;
$navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-dark-color: rgba(255,255,255,.5) !default; $navbar-inverse-color: rgba(255,255,255,.5) !default;
$navbar-dark-hover-color: rgba(255,255,255,.75) !default; $navbar-inverse-hover-color: rgba(255,255,255,.75) !default;
$navbar-dark-active-color: rgba(255,255,255,1) !default; $navbar-inverse-active-color: rgba(255,255,255,1) !default;
$navbar-dark-disabled-color: rgba(255,255,255,.25) !default; $navbar-inverse-disabled-color: rgba(255,255,255,.25) !default;
$navbar-dark-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-inverse-toggler-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-dark-toggler-border: rgba(255,255,255,.1) !default; $navbar-inverse-toggler-border: rgba(255,255,255,.1) !default;
$navbar-light-color: rgba(0,0,0,.5) !default; $navbar-light-color: rgba(0,0,0,.5) !default;
$navbar-light-hover-color: rgba(0,0,0,.7) !default; $navbar-light-hover-color: rgba(0,0,0,.7) !default;