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
|
@ -41,7 +41,7 @@ For more information and examples on how to modify our Sass maps and variables,
|
|||
|
||||
## Media queries
|
||||
|
||||
Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
|
||||
Since Bootstrap is developed to be mobile first, we use a handful of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
|
||||
|
||||
### Min-width
|
||||
|
||||
|
|
|
@ -203,7 +203,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
|
|||
|
||||
### Order classes
|
||||
|
||||
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
|
||||
Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
|
||||
|
||||
{{< example class="bd-example-row" >}}
|
||||
<div class="container text-center">
|
||||
|
@ -239,6 +239,28 @@ There are also responsive `.order-first` and `.order-last` classes that change t
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our Modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details.
|
||||
|
||||
```scss
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"order": map-merge(
|
||||
map-get($utilities, "order"),
|
||||
(
|
||||
values: map-merge(
|
||||
map-get(map-get($utilities, "order"), "values"),
|
||||
(
|
||||
6: 6, // Add a new `.order-{breakpoint}-6` utility
|
||||
last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
### Offsetting columns
|
||||
|
||||
You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
|
||||
|
|
|
@ -4,7 +4,8 @@ title: CSS Grid
|
|||
description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
|
||||
group: layout
|
||||
toc: true
|
||||
added: "5.1"
|
||||
added:
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.
|
||||
|
@ -148,7 +149,7 @@ Similar to our default grid system, our CSS Grid allows for easy nesting of `.gr
|
|||
In practice this allows for more complex and custom layouts when compared to our default grid system.
|
||||
|
||||
{{< example class="bd-example-cssgrid" >}}
|
||||
<div class="grid text-center" style="--bs-columns: 3;">
|
||||
<div class="grid text-center overflow-x-auto" style="--bs-columns: 3;">
|
||||
<div>
|
||||
First auto-column
|
||||
<div class="grid">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue