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:
@@ -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" >}}
|
||||
|
@@ -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">
|
||||
|
@@ -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
|
||||
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user