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"> <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" %} {% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
</a> </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. 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 %} {% 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> <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"> <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> <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 %} {% example html %}
<!-- As a link --> <!-- As a link -->
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
</nav> </nav>
<!-- As a heading --> <!-- 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> <span class="h1" class="navbar-brand mb-0">Navbar</span>
</nav> </nav>
{% endexample %} {% endexample %}
@ -78,7 +78,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
{% example html %} {% example html %}
<!-- Just an image --> <!-- Just an image -->
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a> </a>
@ -87,7 +87,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
{% example html %} {% example html %}
<!-- Image and text --> <!-- Image and text -->
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"> <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=""> <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap 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. 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 %} {% 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> <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"> <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> <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. And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{% example html %} {% 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> <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"> <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> <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. 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 %} {% 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> <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"> <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> <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`. Place various form controls and components within a navbar with `.form-inline`.
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<form class="form-inline"> <form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <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> <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. Align the contents of your inline forms with utilities as needed.
{% example html %} {% 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> <a class="navbar-brand">Navbar</a>
<form class="form-inline"> <form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <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: Input groups work, too:
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<form class="form-inline"> <form class="form-inline">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span> <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. 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 %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<form class="form-inline"> <form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button> <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> <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. 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 %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<span class="navbar-text"> <span class="navbar-text">
Navbar text with an inline element Navbar text with an inline element
</span> </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. Mix and match with other components and utilities as needed.
{% example html %} {% 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> <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"> <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> <span class="navbar-toggler-icon"></span>
@ -269,10 +269,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. 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"> <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> <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"> <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> <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> </div>
</nav> </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> <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"> <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> <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> </div>
{% highlight html %} {% highlight html %}
<nav class="navbar navbar-inverse bg-inverse"> <nav class="navbar navbar-dark bg-dark">
<!-- Navbar content --> <!-- Navbar content -->
</nav> </nav>
<nav class="navbar navbar-inverse bg-primary"> <nav class="navbar navbar-dark bg-primary">
<!-- Navbar content --> <!-- Navbar content -->
</nav> </nav>
@ -377,7 +377,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{% example html %} {% example html %}
<div class="container"> <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> <a class="navbar-brand" href="#">Navbar</a>
</nav> </nav>
</div> </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. 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 %} {% 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"> <div class="container">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
</div> </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).** 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 %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Full width</a> <a class="navbar-brand" href="#">Full width</a>
</nav> </nav>
{% endexample %} {% endexample %}
{% example html %} {% 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> <a class="navbar-brand" href="#">Fixed top</a>
</nav> </nav>
{% endexample %} {% endexample %}
{% example html %} {% 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> <a class="navbar-brand" href="#">Fixed bottom</a>
</nav> </nav>
{% endexample %} {% endexample %}
{% example html %} {% 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> <a class="navbar-brand" href="#">Sticky top</a>
</nav> </nav>
{% endexample %} {% 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: With no `.navbar-brand` shown in lowest breakpoint:
{% example html %} {% 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"> <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> <span class="navbar-toggler-icon"></span>
</button> </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: With a brand name shown on the left and toggler on the right:
{% example html %} {% 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> <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"> <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> <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: With a toggler on the left and brand name on the right:
{% example html %} {% 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> <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"> <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> <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 %} {% example html %}
<div class="pos-f-t"> <div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent"> <div class="collapse" id="navbarToggleExternalContent">
<div class="bg-inverse p-4"> <div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4> <h4 class="text-white">Collapsed content</h4>
<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-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"> <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> <span class="navbar-toggler-icon"></span>
</button> </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. Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
<div class="bd-example"> <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> <a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <li class="nav-item">
@ -59,7 +59,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
</div> </div>
{% highlight html %} {% 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> <a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <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="bd-example">
<div class="row"> <div class="row">
<div class="col-4"> <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> <a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column"> <nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a> <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> </div>
{% highlight html %} {% 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> <a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column"> <nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a> <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>
</div> </div>
<div class="navbar navbar-inverse bg-inverse"> <div class="navbar navbar-dark bg-dark">
<div class="container d-flex justify-content-between"> <div class="container d-flex justify-content-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 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> </head>
<body> <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> <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"> <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> <span class="navbar-toggler-icon"></span>

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

@ -17,7 +17,7 @@
</head> </head>
<body> <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> <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"> <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> <span class="navbar-toggler-icon"></span>

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

@ -18,7 +18,7 @@
<body> <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> <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"> <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> <span class="navbar-toggler-icon"></span>

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

@ -23,7 +23,7 @@
<div class="masthead"> <div class="masthead">
<h3 class="text-muted">Project name</h3> <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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>

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

@ -18,7 +18,7 @@
<body> <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> <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"> <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> <span class="navbar-toggler-icon"></span>

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

@ -18,7 +18,7 @@
<body> <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> <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"> <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> <span class="navbar-toggler-icon"></span>

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

@ -18,7 +18,7 @@
<body> <body>
<nav class="navbar navbar-inverse bg-inverse"> <nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Never expand</a> <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"> <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> <span class="navbar-toggler-icon"></span>
@ -50,7 +50,7 @@
</div> </div>
</nav> </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> <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"> <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> <span class="navbar-toggler-icon"></span>
@ -82,7 +82,7 @@
</div> </div>
</nav> </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> <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"> <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> <span class="navbar-toggler-icon"></span>
@ -114,7 +114,7 @@
</div> </div>
</nav> </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> <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"> <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> <span class="navbar-toggler-icon"></span>
@ -146,7 +146,7 @@
</div> </div>
</nav> </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> <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"> <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> <span class="navbar-toggler-icon"></span>
@ -178,7 +178,7 @@
</div> </div>
</nav> </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> <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"> <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> <span class="navbar-toggler-icon"></span>
@ -210,7 +210,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container"> <div class="container">
<a class="navbar-brand" href="#">Container</a> <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"> <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> </div>
</nav> </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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>
@ -273,7 +273,7 @@
</nav> </nav>
<div class="container"> <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> <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"> <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> <span class="navbar-toggler-icon"></span>
@ -305,7 +305,7 @@
</div> </div>
</nav> </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"> <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> <span class="navbar-toggler-icon"></span>
</button> </button>

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

@ -18,7 +18,7 @@
<body> <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> <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"> <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> <span class="navbar-toggler-icon"></span>

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

@ -18,7 +18,7 @@
<body> <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> <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"> <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> <span class="navbar-toggler-icon"></span>

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

@ -19,7 +19,7 @@
<body> <body>
<!-- Fixed navbar --> <!-- 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> <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"> <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> <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. 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. - 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). - 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. - 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). - `.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"> <div class="container">
<h1>Dropdown <small>Bootstrap Visual Test</small></h1> <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> <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"> <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> <span class="navbar-toggler-icon"></span>

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

@ -13,7 +13,7 @@
</style> </style>
</head> </head>
<body> <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> <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"> <div class="collapse navbar-expand-md" id="navbarResponsive">
<a class="navbar-brand" href="#">This shouldn't jump!</a> <a class="navbar-brand" href="#">This shouldn't jump!</a>

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

@ -10,7 +10,7 @@
</style> </style>
</head> </head>
<body data-spy="scroll" data-target=".navbar" data-offset="70"> <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> <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"> <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> <span class="navbar-toggler-icon"></span>

22
scss/_navbar.scss
View File

@ -242,25 +242,25 @@
} }
// White links against a dark background // White links against a dark background
.navbar-inverse { .navbar-dark {
.navbar-brand { .navbar-brand {
color: $navbar-inverse-active-color; color: $navbar-dark-active-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-active-color; color: $navbar-dark-active-color;
} }
} }
.navbar-nav { .navbar-nav {
.nav-link { .nav-link {
color: $navbar-inverse-color; color: $navbar-dark-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-hover-color; color: $navbar-dark-hover-color;
} }
&.disabled { &.disabled {
color: $navbar-inverse-disabled-color; color: $navbar-dark-disabled-color;
} }
} }
@ -268,20 +268,20 @@
.active > .nav-link, .active > .nav-link,
.nav-link.show, .nav-link.show,
.nav-link.active { .nav-link.active {
color: $navbar-inverse-active-color; color: $navbar-dark-active-color;
} }
} }
.navbar-toggler { .navbar-toggler {
color: $navbar-inverse-color; color: $navbar-dark-color;
border-color: $navbar-inverse-toggler-border-color; border-color: $navbar-dark-toggler-border-color;
} }
.navbar-toggler-icon { .navbar-toggler-icon {
background-image: $navbar-inverse-toggler-icon-bg; background-image: $navbar-dark-toggler-icon-bg;
} }
.navbar-text { .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-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-inverse-color: rgba($white,.5) !default; $navbar-dark-color: rgba($white,.5) !default;
$navbar-inverse-hover-color: rgba($white,.75) !default; $navbar-dark-hover-color: rgba($white,.75) !default;
$navbar-inverse-active-color: rgba($white,1) !default; $navbar-dark-active-color: rgba($white,1) !default;
$navbar-inverse-disabled-color: rgba($white,.25) !default; $navbar-dark-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-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-inverse-toggler-border-color: rgba($white,.1) !default; $navbar-dark-toggler-border-color: rgba($white,.1) !default;
$navbar-light-color: rgba($black,.5) !default; $navbar-light-color: rgba($black,.5) !default;
$navbar-light-hover-color: rgba($black,.7) !default; $navbar-light-hover-color: rgba($black,.7) !default;