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:
parent
3d84e60d69
commit
01364cb49c
@ -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.
|
||||
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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`.
|
||||
|
||||
|
@ -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`.
|
||||
|
||||
|
@ -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" >}}
|
||||
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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.
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
@ -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" >}}).
|
||||
|
@ -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).
|
||||
|
||||
|
@ -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
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
@ -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" >}})
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user