mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-05 16:42:29 +03:00
Add dark mode support (#35857)
* Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond <julien.deramond@orange.com> * Apply suggestions from code review Co-authored-by: Julien Déramond <julien.deramond@orange.com> * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond <juderamond@gmail.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
This commit is contained in:
Mark Otto
@@ -66,7 +66,7 @@ Click the accordions below to expand/collapse the accordion content.
|
||||
|
||||
Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example class="bg-body-secondary" >}}
|
||||
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingOne">
|
||||
|
||||
@@ -10,6 +10,10 @@ toc: true
|
||||
|
||||
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
|
||||
|
||||
{{< callout info >}}
|
||||
**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
|
||||
{{< /callout >}}
|
||||
|
||||
{{< example >}}
|
||||
{{< alerts.inline >}}
|
||||
{{- range (index $.Site.Data "theme-colors") }}
|
||||
@@ -177,6 +181,8 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS
|
||||
|
||||
### Sass mixin
|
||||
|
||||
{{< deprecated-in "5.3.0" >}}
|
||||
|
||||
Used in combination with `$theme-colors` to create contextual modifier classes for our alerts.
|
||||
|
||||
{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
|
||||
|
||||
@@ -236,8 +236,12 @@ Carousels support swiping left/right on touchscreen devices to move between slid
|
||||
|
||||
## Dark variant
|
||||
|
||||
{{< deprecated-in "5.3.0" >}}
|
||||
|
||||
Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
|
||||
|
||||
{{< callout-deprecated-dark-variants "carousel" >}}
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
|
||||
<div class="carousel-indicators">
|
||||
|
||||
@@ -22,13 +22,19 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event
|
||||
<button type="button" class="btn-close" disabled aria-label="Close"></button>
|
||||
{{< /example >}}
|
||||
|
||||
## White variant
|
||||
## Dark variant
|
||||
|
||||
Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`.
|
||||
{{< callout info >}}
|
||||
**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button.
|
||||
{{< /callout >}}
|
||||
|
||||
Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.
|
||||
|
||||
{{< example class="bg-dark" >}}
|
||||
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
|
||||
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>
|
||||
<div data-bs-theme="dark">
|
||||
<button type="button" class="btn-close" aria-label="Close"></button>
|
||||
<button type="button" class="btn-close" disabled aria-label="Close"></button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Sass
|
||||
|
||||
@@ -349,8 +349,12 @@ Button dropdowns work with buttons of all sizes, including default and split dro
|
||||
|
||||
## Dark dropdowns
|
||||
|
||||
{{< deprecated-in "5.3.0" >}}
|
||||
|
||||
Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items.
|
||||
|
||||
{{< callout-deprecated-dark-variants "dropdown-menu" >}}
|
||||
|
||||
{{< example >}}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
@@ -998,6 +1002,12 @@ As part of Bootstrap's evolving CSS variables approach, dropdowns now use local
|
||||
|
||||
{{< scss-docs name="dropdown-css-vars" file="scss/_dropdown.scss" >}}
|
||||
|
||||
{{< callout info >}}
|
||||
Dropdown items include at least one variable that is not set on `.dropdown`. This allows you to provide a new value while Bootstrap defaults to a fallback value.
|
||||
|
||||
- `--bs-dropdown-item-border-radius`
|
||||
{{< /callout >}}
|
||||
|
||||
Customization through CSS variables can be seen on the `.dropdown-menu-dark` class where we override specific values without adding duplicate CSS selectors.
|
||||
|
||||
{{< scss-docs name="dropdown-dark-css-vars" file="scss/_dropdown.scss" >}}
|
||||
|
||||
@@ -154,7 +154,11 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
|
||||
{{< /list-group.inline >}}
|
||||
{{< /example >}}
|
||||
|
||||
## Contextual classes
|
||||
## Variants
|
||||
|
||||
{{< callout info >}}
|
||||
**Heads up!** As of v5.3.0, the `list-group-item-variant()` Sass mixin is deprecated. List group item variants now have their CSS variables overridden in [the Sass loop](#sass-loop).
|
||||
{{< /callout >}}
|
||||
|
||||
Use contextual classes to style list items with a stateful background and color.
|
||||
|
||||
@@ -169,7 +173,9 @@ Use contextual classes to style list items with a stateful background and color.
|
||||
</ul>
|
||||
{{< /example >}}
|
||||
|
||||
Contextual classes also work with `.list-group-item-action`. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
|
||||
### For links and buttons
|
||||
|
||||
Contextual classes also work with `.list-group-item-action` for `<a>` and `<button>` elements. Note the addition of the hover styles here not present in the previous example. Also supported is the `.active` state; apply it to indicate an active selection on a contextual list group item.
|
||||
|
||||
{{< example >}}
|
||||
<div class="list-group">
|
||||
@@ -311,15 +317,15 @@ As part of Bootstrap's evolving CSS variables approach, list groups now use loca
|
||||
|
||||
{{< scss-docs name="list-group-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Mixins
|
||||
### Sass mixins
|
||||
|
||||
Used in combination with `$theme-colors` to generate the [contextual variant classes](#contextual-classes) for `.list-group-item`s.
|
||||
Used in combination with `$theme-colors` to generate the [contextual variant classes](#variants) for `.list-group-item`s.
|
||||
|
||||
{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
|
||||
|
||||
### Loop
|
||||
### Sass loop
|
||||
|
||||
Loop that generates the modifier classes with the `list-group-item-variant()` mixin.
|
||||
Loop that generates the modifier classes with an overriding of CSS variables.
|
||||
|
||||
{{< scss-docs name="list-group-modifiers" file="scss/_list-group.scss" >}}
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@ Keep reading for demos and usage guidelines.
|
||||
|
||||
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
|
||||
|
||||
<div class="bd-example bg-light">
|
||||
<div class="bd-example bg-body-tertiary">
|
||||
<div class="modal position-static d-block" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
|
||||
@@ -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">
|
||||
@@ -321,13 +321,17 @@ Mix and match with other components and utilities as needed.
|
||||
## Color schemes
|
||||
|
||||
{{< callout warning >}}
|
||||
**New in v5.2.0:** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
|
||||
**New dark navbars in v5.3.0 —** We've deprecated `.navbar-dark` in favor of the new `data-bs-theme="dark"`. Add `data-bs-theme="dark"` to the `.navbar` to enable a component-specific color mode. [Learn more about our color modes.]({{< docsref "/customize/color-modes" >}})
|
||||
|
||||
---
|
||||
|
||||
**New in v5.2.0 —** Navbar theming is now powered by CSS variables and `.navbar-light` has been deprecated. CSS variables are applied to `.navbar`, defaulting to the "light" appearance, and can be overridden with `.navbar-dark`.
|
||||
{{< /callout >}}
|
||||
|
||||
Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<nav class="navbar navbar-expand-lg bg-body-secondary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
@@ -356,7 +360,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
@@ -385,7 +389,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">
|
||||
@@ -416,11 +420,11 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
|
||||
</div>
|
||||
|
||||
```html
|
||||
<nav class="navbar navbar-dark bg-dark">
|
||||
<nav class="navbar bg-dark" data-bs-theme="dark">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-dark bg-primary">
|
||||
<nav class="navbar bg-primary" data-bs-theme="dark">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
@@ -435,7 +439,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 +450,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 +464,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 +472,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 +480,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 +488,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 +496,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 +512,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 +563,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 +593,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 +623,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 +679,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 +725,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>
|
||||
|
||||
@@ -27,7 +27,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
|
||||
|
||||
Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
|
||||
|
||||
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
|
||||
{{< example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" >}}
|
||||
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
|
||||
@@ -143,7 +143,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
|
||||
|
||||
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
|
||||
|
||||
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
|
||||
{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}
|
||||
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
|
||||
|
||||
@@ -25,7 +25,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
|
||||
Scroll the area below the navbar and watch the active class change. Open the dropdown menu and watch the dropdown items be highlighted as well.
|
||||
|
||||
<div class="bd-example">
|
||||
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
|
||||
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3 rounded-2">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
@@ -45,7 +45,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="scrollspy-example bg-light p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
|
||||
<div class="scrollspy-example bg-body-tertiary p-3 rounded-2" data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
@@ -60,7 +60,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
|
||||
</div>
|
||||
|
||||
```html
|
||||
<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
|
||||
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
@@ -80,7 +80,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
|
||||
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
|
||||
<h4 id="scrollspyHeading1">First heading</h4>
|
||||
<p>...</p>
|
||||
<h4 id="scrollspyHeading2">Second heading</h4>
|
||||
|
||||
@@ -27,7 +27,7 @@ To encourage extensible and predictable toasts, we recommend a header and body.
|
||||
|
||||
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
@@ -121,7 +121,7 @@ Toasts are slightly translucent to blend in with what's below them.
|
||||
|
||||
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast-container position-static">
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
@@ -153,7 +153,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
|
||||
|
||||
Customize your toasts by removing sub-components, tweaking them with [utilities]({{< docsref "/utilities/api" >}}), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
@@ -166,7 +166,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]
|
||||
|
||||
Alternatively, you can also add additional controls and components to toasts.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a toast message.
|
||||
@@ -182,7 +182,7 @@ Alternatively, you can also add additional controls and components to toasts.
|
||||
|
||||
Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-primary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
@@ -215,7 +215,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
|
||||
<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
|
||||
<div class="toast-container p-3" id="toastPlacement">
|
||||
<div class="toast">
|
||||
<div class="toast-header">
|
||||
@@ -233,7 +233,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
|
||||
|
||||
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
|
||||
|
||||
{{< example class="bg-dark bd-example-toasts p-0" >}}
|
||||
{{< example class="bd-example-toasts p-0" >}}
|
||||
<div aria-live="polite" aria-atomic="true" class="position-relative">
|
||||
<!-- Position it: -->
|
||||
<!-- - `.toast-container` for spacing between toasts -->
|
||||
@@ -271,7 +271,7 @@ For systems that generate more notifications, consider using a wrapping element
|
||||
|
||||
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
|
||||
|
||||
{{< example class="bg-dark bd-example-toasts d-flex" >}}
|
||||
{{< example class="bd-example-toasts d-flex" >}}
|
||||
<!-- Flexbox container for aligning the toasts -->
|
||||
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
|
||||
|
||||
@@ -308,7 +308,7 @@ As the content you're displaying changes, be sure to update the [`delay` timeout
|
||||
|
||||
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
{{< example >}}
|
||||
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
|
||||
<div class="toast-header">
|
||||
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
|
||||
|
||||
Reference in New Issue
Block a user