mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 08:10:47 +02:00
Code Issues Releases Wiki Activity

Add dark mode support (#35857)

Browse Source 
* 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
2022-11-28 22:30:26 -08:00
committed by GitHub
parent a1a9895aac
commit fc3f4b67d6
91 changed files with 1974 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
site/content/docs/5.2/components/navbar.md
View File

@@ -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>