diff options
Diffstat (limited to 'site/content/docs/5.2/components/navbar.md')
| -rw-r--r-- | site/content/docs/5.2/components/navbar.md | 58 |
1 files changed, 29 insertions, 29 deletions
diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.2/components/navbar.md index c4c1615384..d8aabc6afd 100644 --- a/site/content/docs/5.2/components/navbar.md +++ b/site/content/docs/5.2/components/navbar.md @@ -37,7 +37,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 >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> @@ -75,7 +75,7 @@ Here's an example of all the sub-components included in a responsive light-theme </nav> {{< /example >}} -This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes. +This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-body-tertiary`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes. ### Brand @@ -87,14 +87,14 @@ Add your text within an element with the `.navbar-brand` class. {{< example >}} <!-- As a link --> -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> </nav> <!-- As a heading --> -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">Navbar</span> </div> @@ -106,7 +106,7 @@ Add your text within an element with the `.navbar-brand` class. You can replace the text within the `.navbar-brand` with an `<img>`. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container"> <a class="navbar-brand" href="#"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24"> @@ -120,7 +120,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`. You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#"> <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top"> @@ -139,7 +139,7 @@ Add the `.active` class on `.nav-link` to indicate the current page. Please note that you should also add the `aria-current` attribute on the active `.nav-link`. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> @@ -168,7 +168,7 @@ Please note that you should also add the `aria-current` attribute on the active And because we use classes for our navs, you can avoid the list-based approach entirely if you like. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> @@ -189,7 +189,7 @@ And because we use classes for our navs, you can avoid the list-based approach e You can also use dropdowns in your navbar. 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 >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> @@ -227,7 +227,7 @@ You can also use dropdowns in your navbar. Dropdown menus require a wrapping ele Place various form controls and components within a navbar: {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> @@ -240,7 +240,7 @@ Place various form controls and components within a navbar: Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand">Navbar</a> <form class="d-flex" role="search"> @@ -254,7 +254,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <form class="container-fluid"> <div class="input-group"> <span class="input-group-text" id="basic-addon1">@</span> @@ -267,7 +267,7 @@ Input groups work, too. If your navbar is an entire form, or mostly a form, you 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 >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <form class="container-fluid justify-content-start"> <button class="btn btn-outline-success me-2" type="button">Main button</button> <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button> @@ -280,7 +280,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 >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <span class="navbar-text"> Navbar text with an inline element @@ -292,7 +292,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 >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar w/ text</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> @@ -385,7 +385,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and </div> </nav> - <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;"> + <nav class="navbar navbar-expand-lg" style="background-color: #e3f2fd;" data-bs-theme="light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation"> @@ -435,7 +435,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it {{< example >}} <div class="container"> - <nav class="navbar navbar-expand-lg bg-light"> + <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> </div> @@ -446,7 +446,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it Use any of the responsive containers to change how wide the content in your navbar is presented. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-md"> <a class="navbar-brand" href="#">Navbar</a> </div> @@ -460,7 +460,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the `<body>`) to prevent overlap with other elements. {{< example >}} -<nav class="navbar bg-light"> +<nav class="navbar bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Default</a> </div> @@ -468,7 +468,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -<nav class="navbar fixed-top bg-light"> +<nav class="navbar fixed-top bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed top</a> </div> @@ -476,7 +476,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -<nav class="navbar fixed-bottom bg-light"> +<nav class="navbar fixed-bottom bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Fixed bottom</a> </div> @@ -484,7 +484,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -<nav class="navbar sticky-top bg-light"> +<nav class="navbar sticky-top bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Sticky top</a> </div> @@ -492,7 +492,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -<nav class="navbar sticky-bottom bg-light"> +<nav class="navbar sticky-bottom bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Sticky bottom</a> </div> @@ -508,7 +508,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing. {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar scroll</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation"> @@ -559,7 +559,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el With no `.navbar-brand` shown at the smallest breakpoint: {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> @@ -589,7 +589,7 @@ With no `.navbar-brand` shown at the smallest breakpoint: With a brand name shown on the left and toggler on the right: {{< example >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> @@ -619,7 +619,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 >}} -<nav class="navbar navbar-expand-lg bg-light"> +<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> @@ -675,7 +675,7 @@ Transform your expanding and collapsing navbar into an offcanvas drawer with the In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely. {{< example >}} -<nav class="navbar bg-light fixed-top"> +<nav class="navbar bg-body-tertiary fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#">Offcanvas navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar"> @@ -721,7 +721,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`. ```html -<nav class="navbar navbar-expand-lg bg-light fixed-top"> +<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top"> <a class="navbar-brand" href="#">Offcanvas navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg"> <span class="navbar-toggler-icon"></span> |