rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables

Browse Source
This commit is contained in:
Mark Otto 2017-06-25 18:29:43 -07:00
parent 2392047a0c
commit 36e482ed27
20 changed files with 76 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/docs-navbar.html
View File

@ -1,4 +1,4 @@
<header class="navbar navbar-inverse flex-column flex-md-row bd-navbar">
<header class="navbar navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
{% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
</a>

60
docs/4.0/components/navbar.md
View File

@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -64,12 +64,12 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
{% example html %}
<!-- As a link -->
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<span class="h1" class="navbar-brand mb-0">Navbar</span>
</nav>
{% endexample %}
@ -78,7 +78,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
{% example html %}
<!-- Just an image -->
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
@ -87,7 +87,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
{% example html %}
<!-- Image and text -->
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
@ -102,7 +102,7 @@ Navbar navigation links build on our `.nav` options with their own modifier clas
Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -129,7 +129,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -148,7 +148,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -184,7 +184,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
Place various form controls and components within a navbar with `.form-inline`.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
@ -195,7 +195,7 @@ Place various form controls and components within a navbar with `.form-inline`.
Align the contents of your inline forms with utilities as needed.
{% example html %}
<nav class="navbar navbar-light bg-faded justify-content-between">
<nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Navbar</a>
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
@ -207,7 +207,7 @@ Align the contents of your inline forms with utilities as needed.
Input groups work, too:
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
@ -220,7 +220,7 @@ Input groups work, too:
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
@ -233,7 +233,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
@ -243,7 +243,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
Mix and match with other components and utilities as needed.
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -269,10 +269,10 @@ Mix and match with other components and utilities as needed.
## Color schemes
Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-inverse` 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. Choose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
<div class="bd-example">
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -300,7 +300,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-primary">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -358,11 +358,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div>
{% highlight html %}
<nav class="navbar navbar-inverse bg-inverse">
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-inverse bg-primary">
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
@ -377,7 +377,7 @@ 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-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
</div>
@ -386,7 +386,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
</div>
@ -398,25 +398,25 @@ When the container is within your navbar, its horizontal padding is removed at b
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](http://caniuse.com/#feat=css-sticky).**
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Full width</a>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar fixed-top navbar-light bg-faded">
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar fixed-bottom navbar-light bg-faded">
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
{% endexample %}
{% example html %}
<nav class="navbar sticky-top navbar-light bg-faded">
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
{% endexample %}
@ -434,7 +434,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
With no `.navbar-brand` shown in lowest breakpoint:
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -462,7 +462,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
With a brand name shown on the left and toggler on the right:
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -491,7 +491,7 @@ With a brand name shown on the left and toggler on the right:
With a toggler on the left and brand name on the right:
{% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -524,12 +524,12 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
{% example html %}
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-inverse p-4">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-inverse bg-inverse">
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

8
docs/4.0/components/scrollspy.md
View File

@ -22,7 +22,7 @@ When successfully implemented, your nav or list group will update accordingly, m
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
<div class="bd-example">
<nav id="navbar-example2" class="navbar navbar-light bg-faded">
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
@ -59,7 +59,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
</div>
{% highlight html %}
<nav id="navbar-example2" class="navbar navbar-light bg-faded">
<nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills">
<li class="nav-item">
@ -100,7 +100,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
<div class="bd-example">
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="navbar navbar-light bg-faded flex-column">
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
@ -139,7 +139,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
</div>
{% highlight html %}
<nav id="navbar-example3" class="navbar navbar-light bg-faded">
<nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>

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

@ -36,7 +36,7 @@
</div>
</div>
</div>
<div class="navbar navbar-inverse bg-inverse">
<div class="navbar navbar-dark bg-dark">
<div class="container d-flex justify-content-between">
<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">

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

@ -17,7 +17,7 @@
</head>
<body>
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

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

@ -17,7 +17,7 @@
</head>
<body>
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

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

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

2
docs/4.0/examples/justified-nav/index.html
View File

@ -23,7 +23,7 @@
<div class="masthead">
<h3 class="text-muted">Project name</h3>
<nav class="navbar navbar-expand-md navbar-light bg-faded rounded mb-3">
<nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

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

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

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

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse mb-4">
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="#">Top navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

20
docs/4.0/examples/navbars/index.html
View File

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-inverse bg-inverse">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Never expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -50,7 +50,7 @@
</div>
</nav>
<nav class="navbar navbar-expand navbar-inverse bg-inverse">
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -82,7 +82,7 @@
</div>
</nav>
<nav class="navbar navbar-expand-sm navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -114,7 +114,7 @@
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at md</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -146,7 +146,7 @@
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at lg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -178,7 +178,7 @@
</div>
</nav>
<nav class="navbar navbar-expand-xl navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at xl</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -210,7 +210,7 @@
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
@ -244,7 +244,7 @@
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@ -273,7 +273,7 @@
</nav>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-faded rounded">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -305,7 +305,7 @@
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light bg-faded rounded">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

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

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-expand-md fixed-top navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

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

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

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

@ -19,7 +19,7 @@
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

2
docs/4.0/migration.md
View File

@ -164,7 +164,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version
The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.
- Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-expand-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
- `.navbar-default` is now `.navbar-light`, though `.navbar-inverse` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentiatlly only affect `color`.
- `.navbar-default` is now `.navbar-light`, though `.navbar-dark` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentiatlly only affect `color`.
- Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navbar/#color-schemes).
- Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
- `.navbar-toggle` is now `.navbar-toggler` and has different styles and inner markup (no more three `<span>`s).

2
js/tests/visual/dropdown.html
View File

@ -10,7 +10,7 @@
<div class="container">
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

2
js/tests/visual/modal.html
View File

@ -13,7 +13,7 @@
</style>
</head>
<body>
<nav class="navbar navbar-full navbar-dark bg-inverse">
<nav class="navbar navbar-full navbar-dark bg-dark">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-expand-md" id="navbarResponsive">
<a class="navbar-brand" href="#">This shouldn't jump!</a>

2
js/tests/visual/scrollspy.html
View File

@ -10,7 +10,7 @@
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="70">
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Scrollspy test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>

22
scss/_navbar.scss
View File

@ -242,25 +242,25 @@
}
// White links against a dark background
.navbar-inverse {
.navbar-dark {
.navbar-brand {
color: $navbar-inverse-active-color;
color: $navbar-dark-active-color;
@include hover-focus {
color: $navbar-inverse-active-color;
color: $navbar-dark-active-color;
}
}
.navbar-nav {
.nav-link {
color: $navbar-inverse-color;
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-inverse-hover-color;
color: $navbar-dark-hover-color;
}
&.disabled {
color: $navbar-inverse-disabled-color;
color: $navbar-dark-disabled-color;
}
}
@ -268,20 +268,20 @@
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-inverse-active-color;
color: $navbar-dark-active-color;
}
}
.navbar-toggler {
color: $navbar-inverse-color;
border-color: $navbar-inverse-toggler-border-color;
color: $navbar-dark-color;
border-color: $navbar-dark-toggler-border-color;
}
.navbar-toggler-icon {
background-image: $navbar-inverse-toggler-icon-bg;
background-image: $navbar-dark-toggler-icon-bg;
}
.navbar-text {
color: $navbar-inverse-color;
color: $navbar-dark-color;
}
}

12
scss/_variables.scss
View File

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