diff options
| -rw-r--r-- | docs/components/navbar.md | 24 |
1 files changed, 12 insertions, 12 deletions
diff --git a/docs/components/navbar.md b/docs/components/navbar.md index 74f19609b..ea4245b46 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -38,7 +38,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 `md` (medium) breakpoint. {% example html %} -<nav class="navbar navbar-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -108,7 +108,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-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -135,7 +135,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-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -154,7 +154,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-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -249,7 +249,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-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -278,7 +278,7 @@ Mix and match with other components and utilities as needed. 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. <div class="bd-example"> - <nav class="navbar navbar-inverse navbar-toggleable-md bg-inverse"> + <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -306,7 +306,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </div> </nav> - <nav class="navbar navbar-inverse navbar-toggleable-md bg-primary"> + <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -334,7 +334,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl </div> </nav> - <nav class="navbar navbar-light navbar-toggleable-md" style="background-color: #e3f2fd;"> + <nav class="navbar navbar-toggleable-md navbar-light" style="background-color: #e3f2fd;"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -383,7 +383,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-light bg-faded navbar-toggleable-md"> + <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <a class="navbar-brand" href="#">Navbar</a> </nav> </div> @@ -392,7 +392,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-toggleable-*` 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-light bg-faded navbar-toggleable-md"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <div class="container"> <a class="navbar-brand" href="#">Navbar</a> </div> @@ -432,7 +432,7 @@ Navbar togglers can be left or right aligned with `.navbar-toggler-left` or `.na With no `.navbar-brand` shown in lowest breakpoint: {% example html %} -<nav class="navbar navbar-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <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> @@ -460,7 +460,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-light navbar-toggleable-md bg-faded"> +<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> |