0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

Docs: consistent usage of CSS sections (#38219)

Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Julien Déramond 2023-04-10 17:53:28 +02:00 committed by GitHub
parent 3d84e60d69
commit 01364cb49c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 68 additions and 60 deletions

View File

@ -11,7 +11,7 @@ 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).
**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
{{< /callout >}}
{{< example >}}
@ -158,7 +158,7 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS
{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}}
### Sass mixin
### Sass mixins
{{< deprecated-in "5.3.0" >}}
@ -166,7 +166,7 @@ Used in combination with `$theme-colors` to create contextual modifier classes f
{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}}
### Sass loop
### Sass loops
Loop that generates the modifier classes with the `alert-variant()` mixin.

View File

@ -157,7 +157,7 @@ Add `.list-group-horizontal` to change the layout of list group items from verti
## 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).
**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 [a Sass loop](#sass-loops).
{{< /callout >}}
Use contextual classes to style list items with a stateful background and color.
@ -325,7 +325,7 @@ Used in combination with `$theme-colors` to generate the [contextual variant cla
{{< scss-docs name="list-group-mixin" file="scss/mixins/_list-group.scss" >}}
### Sass loop
### Sass loops
Loop that generates the modifier classes with an overriding of CSS variables.

View File

@ -769,7 +769,7 @@ As part of Bootstrap's evolving CSS variables approach, modals now use local CSS
{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}}
### Sass loop
### Sass loops
[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.

View File

@ -810,7 +810,7 @@ Variables for the [dark navbar](#color-schemes):
{{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}
### Sass loop
### Sass loops
[Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.

View File

@ -829,7 +829,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
{{< scss-docs name="table-variables" file="scss/_variables.scss" >}}
### Sass loop
### Sass loops
{{< scss-docs name="table-loop" file="scss/_variables.scss" >}}

View File

@ -203,7 +203,7 @@ CSS variables for our dark color mode are partially generated from dark mode spe
{{< scss-docs name="sass-dark-mode-vars" file="scss/_variables-dark.scss" >}}
### Sass mixin
### Sass mixins
Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the `data-bs-theme` attribute selector or media query with the customizable `color-mode()` mixin. See the [Sass usage section](#building-with-sass) for more details.

View File

@ -34,7 +34,7 @@ Should you modify your `$grid-breakpoints`, your changes will apply to all the l
{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
## Creating your own

View File

@ -371,11 +371,11 @@ These variables are also color mode adaptive, meaning they change color while in
### Sass mixins
Two mixins are combined, through our [loop](#loop), to generate our form validation feedback styles.
Two mixins are combined, through our [loop](#sass-loops), to generate our form validation feedback styles.
{{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
### Sass map
### Sass maps
This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
@ -383,7 +383,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this
Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
### Sass loop
### Sass loops
Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.

View File

@ -45,13 +45,13 @@ By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus
</a>
{{< /example >}}
### Sass
### Sass variables
Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project.
{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
### Utilities
### Sass utilities API
In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support.

View File

@ -70,13 +70,13 @@ Customize the color by overriding the `--bs-link-*` CSS variable:
</a>
{{< /example >}}
### Sass
### Sass variables
Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}}
### Utilities
### Sass utilities API
Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.

View File

@ -74,7 +74,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T
{{< /example >}}
## Sass map
## Sass maps
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.

View File

@ -37,7 +37,7 @@ These breakpoints are customizable via Sass—you'll find them in a Sass map in
{{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
For more information and examples on how to modify our Sass maps and variables, please refer to [the CSS section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
## Media queries

View File

@ -64,12 +64,18 @@ Use `.container-fluid` for a full width container, spanning the entire width of
</div>
```
## Sass
## CSS
### Sass variables
As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in `_variables.scss`) that powers them:
{{< scss-docs name="container-max-widths" file="scss/_variables.scss" >}}
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#css" >}}).
### Sass mixins
In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
```scss
@ -87,5 +93,3 @@ In addition to customizing the Sass, you can also create your own containers wit
@include make-container();
}
```
For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).

View File

@ -46,7 +46,7 @@ Breaking it down, here's how the grid system comes together:
- **Gutters are also responsive and customizable.** [Gutter classes are available]({{< docsref "/layout/gutters" >}}) across all breakpoints, with all the same sizes as our [margin and padding spacing]({{< docsref "/utilities/spacing" >}}). Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
- **Sass variables, maps, and mixins power the grid.** If you don't want to use the predefined grid classes in Bootstrap, you can use our [grid's source Sass](#sass-variables) to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#flexbug-9).

View File

@ -148,13 +148,13 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
- Alert variants are now styled via CSS variables.
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/alerts#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant.
#### List group
- List group item variants are now styled via CSS variables.
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use the Sass loop]({{< docsref "/components/list-group#sass-loop" >}}) directly to modify the component's default CSS variables for each variant.
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> The `.list-group-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/list-group#sass-loops" >}}) directly to modify the component's default CSS variables for each variant.
#### Dropdowns

View File

@ -143,7 +143,7 @@ Color mode background colors are also available as a Sass map:
{{< scss-docs name="gradient-mixins" file="scss/mixins/_gradients.scss" >}}
## Utilities API
### Sass utilities API
Background utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -185,7 +185,7 @@ Color mode adaptive border colors are also available as a Sass map:
{{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
### Utilities API
### Sass utilities API
Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -134,7 +134,7 @@ Color mode adaptive text colors are also available as a Sass map:
{{< scss-docs name="theme-text-dark-map" file="scss/_maps.scss" >}}
### Utilities API
### Sass utilities API
Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -105,9 +105,9 @@ The print and display classes can be combined.
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
{{< /example >}}
## Sass
## CSS
### Utilities API
### Sass utilities API
Display utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -655,9 +655,9 @@ And say you want to vertically center the content next to the image:
</div>
{{< /example >}}
## Sass
## CSS
### Utilities API
### Sass utilities API
Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -39,9 +39,9 @@ Here are all the support classes:
{{< /float.inline >}}
{{< /markdown >}}
## Sass
## CSS
### Utilities API
### Sass utilities API
Float utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -33,9 +33,9 @@ If possible, the simpler solution is:
- For form controls, add the `disabled` HTML attribute.
- For links, remove the `href` attribute, making it a non-interactive anchor or placeholder link.
## Sass
## CSS
### Utilities API
### Sass utilities API
Interaction utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -94,11 +94,11 @@ Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-under
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
{{< /callout >}}
## Sass
## CSS
In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
### Utilities API
### Sass utilities API
Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -54,7 +54,9 @@ The `.object-fit-{value}` and responsive `.object-fit-{breakpoint}-{value}` util
<video src="..." class="object-fit-none" autoplay></video>
```
## Utilities API
## CSS
### Sass utilities API
Object fit utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -24,7 +24,9 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
<div class="opacity-25">...</div>
```
### Utilities API
## CSS
### Sass utilities API
Opacity utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -90,9 +90,9 @@ Adjust the `overflow-y` property to affect the overflow of content vertically.
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.
## Sass
## CSS
### Utilities API
### Sass utilities API
Overflow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -115,15 +115,15 @@ You can use these classes with existing components to create new ones. Remember
</div>
{{< /example >}}
## Sass
## CSS
### Maps
### Sass maps
Default position utility values are declared in a Sass map, then used to generate our utilities.
{{< scss-docs name="position-map" file="scss/_variables.scss" >}}
### Utilities API
### Sass utilities API
Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -17,13 +17,13 @@ While shadows on components are disabled by default in Bootstrap and can be enab
<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>
{{< /example >}}
## Sass
## CSS
### Variables
### Sass variables
{{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}
### Utilities API
### Sass utilities API
Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -53,9 +53,9 @@ You can also use utilities to set the width and height relative to the viewport.
<div class="vh-100">Height 100vh</div>
```
## Sass
## CSS
### Utilities API
### Sass utilities API
Sizing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -139,15 +139,15 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
</div>
{{< /example >}}
## Sass
## CSS
### Maps
### Sass maps
Spacing utilities are declared via Sass map and then generated with our utilities API.
{{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}}
### Utilities API
### Sass utilities API
Spacing utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -153,7 +153,7 @@ Font-size utilities are generated from this map, in combination with our utiliti
{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}
## Utilities API
### Sass utilities API
Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -39,9 +39,9 @@ With table cells:
</table>
{{< /example >}}
## Sass
## CSS
### Utilities API
### Sass utilities API
Vertical align utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -28,9 +28,9 @@ Apply `.visible` or `.invisible` as needed.
}
```
## Sass
## CSS
### Utilities API
### Sass utilities API
Visibility utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

View File

@ -37,13 +37,13 @@ Learn about our [`z-index` approach]({{< docsref "/extend/approach#z-index-scale
## CSS
### Sass map
### Sass maps
Customize this Sass map to change the available values and generated utilities.
{{< scss-docs name="zindex-levels-map" file="scss/_variables.scss" >}}
### Utilities API
### Sass utilities API
Position utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})