1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-29 08:10:47 +02: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
34 changed files with 68 additions and 60 deletions

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).