diff options
author | Mark Otto <markdotto@gmail.com> | 2017-06-26 04:29:43 +0300 |
---|---|---|
committer | Mark Otto <markdotto@gmail.com> | 2017-06-26 04:29:43 +0300 |
commit | 36e482ed2728eec37188b5ec486283334bb3034f (patch) | |
tree | e1a288cfc8531874814b8aaf7cdf004d7a3c6e5b /docs/4.0/components/navbar.md | |
parent | 2392047a0ccc270897c3c451e9646e81a4ff3035 (diff) |
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables
Diffstat (limited to 'docs/4.0/components/navbar.md')
-rw-r--r-- | docs/4.0/components/navbar.md | 60 |
1 files changed, 30 insertions, 30 deletions
diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md index 07c86c938c..350e970dab 100644 --- a/docs/4.0/components/navbar.md +++ b/docs/4.0/components/navbar.md @@ -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> |