1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 14:54:27 +02:00

Merge branch 'main' into main-lmp-dark-mode-example-context

This commit is contained in:
louismaxime.piton
2023-10-05 14:48:50 +02:00
100 changed files with 1193 additions and 1064 deletions

View File

@@ -144,7 +144,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`.
{{< callout warning >}}
Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
{{< /callout >}}
{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}

View File

@@ -305,7 +305,7 @@ Visually, these checkbox toggle buttons are identical to the [button plugin togg
### Outlined styles
Different variants of `.btn`, such at the various outlined styles, are supported.
Different variants of `.btn`, such as the various outlined styles, are supported.
{{< example >}}
<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">

View File

@@ -54,9 +54,19 @@ If you're using our compiled JavaScript and prefer to include Popper separately,
We recommend [jsDelivr](https://www.jsdelivr.com/) and use it ourselves in our documentation. However, in some cases—like in some specific countries or environments—you may need to use other CDN providers like [cdnjs](https://cdnjs.com/) or [unpkg](https://unpkg.com/).
You'll find the same files on these CDN providers, albeit with different URLs. When changing the URLs, you'll also need to update the `integrity` attribute. Tools like [SRI Hash Generator](https://www.srihash.org/) can help you generate the correct values.
You'll find the same files on these CDN providers, albeit with different URLs. With cdnjs, you can [use this direct Bootstrap package link](https://cdnjs.com/libraries/bootstrap) to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap.
With cdnjs, you can [use this direct Bootstrap package link](https://cdnjs.com/libraries/bootstrap) to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap.
{{< callout warning>}}
**If the SRI hashes differ for a given file, you shouldn't use the files from that CDN, because it means that the file was modified by someone else.**
{{< /callout >}}
Note that you should compare same length hashes, e.g. `sha384` with `sha384`, otherwise it's expected for them to be different.
As such, you can use an online tool like [SRI Hash Generator](https://www.srihash.org/) to make sure that the hashes are the same for a given file.
Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example:
```sh
openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A
```
## Package managers

View File

@@ -10,7 +10,7 @@ added: "5.1"
Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
{{< callout warning >}}
Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
**Heads up!** Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
{{< /callout >}}
## Vertical