Adding upstream version 5.3.5+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
c39481092b
commit
96570520fe
233 changed files with 6665 additions and 12847 deletions
|
@ -4,7 +4,8 @@ title: Color modes
|
|||
description: Bootstrap now supports color modes, or themes, as of v5.3.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
|
||||
group: customize
|
||||
toc: true
|
||||
added: "5.3"
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
{{< callout >}}
|
||||
|
|
|
@ -74,7 +74,7 @@ Whenever possible, be sure to compress all the code you serve to your visitors.
|
|||
|
||||
While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.
|
||||
|
||||
If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
|
||||
If you are using a [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/articles/fcp) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
|
||||
|
||||
You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don't need to be present on the first paint of your page should be marked with `async` or `defer` attributes.
|
||||
|
||||
|
@ -82,8 +82,8 @@ This ensures that the less important resources are loaded later and not blocking
|
|||
|
||||
If you want to learn more about this, there are already a lot of great articles about it:
|
||||
|
||||
- <https://web.dev/render-blocking-resources/>
|
||||
- <https://web.dev/defer-non-critical-css/>
|
||||
- <https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/>
|
||||
- <https://web.dev/articles/defer-non-critical-css>
|
||||
|
||||
## Always use HTTPS
|
||||
|
||||
|
|
|
@ -20,6 +20,7 @@ You can find and customize these variables for key global options in Bootstrap's
|
|||
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
|
||||
| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
|
||||
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
|
||||
| `$enable-cssgrid` | `true` or `false` (default) | Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.). |
|
||||
| `$enable-container-classes` | `true` (default) or `false` | Enables the generation of CSS classes for layout containers. (New in v5.2.0) |
|
||||
| `$enable-caret` | `true` (default) or `false` | Enables pseudo element caret on `.dropdown-toggle`. |
|
||||
| `$enable-button-pointers` | `true` (default) or `false` | Add "hand" cursor to non-disabled button elements. |
|
||||
|
|
|
@ -89,7 +89,7 @@ With that setup in place, you can begin to modify any of the Sass variables and
|
|||
|
||||
## Compiling
|
||||
|
||||
In order to use your custom Sass code as CSS in the browser, you need a Sass compiler. Sass ships as a CLI package, but you can also compile it with other build tools like [Gulp](https://gulpjs.com/) or [Webpack](https://webpack.js.org/), or with a GUI applications. Some IDEs also have Sass compilers built in or as downloadable extensions.
|
||||
In order to use your custom Sass code as CSS in the browser, you need a Sass compiler. Sass ships as a CLI package, but you can also compile it with other build tools like [Gulp](https://gulpjs.com/) or [Webpack](https://webpack.js.org/), or with GUI applications. Some IDEs also have Sass compilers built in or as downloadable extensions.
|
||||
|
||||
We like to use the CLI to compile our Sass, but you can use whichever method you prefer. From the command line, run the following:
|
||||
|
||||
|
@ -101,7 +101,7 @@ npm install -g sass
|
|||
sass --watch ./scss/custom.scss ./css/custom.css
|
||||
```
|
||||
|
||||
Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
|
||||
Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install/) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
|
||||
|
||||
{{< callout info >}}
|
||||
**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue