root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge branch 'main' into main-lmp-table-fix-unwanted-changes

This commit is contained in:
Julien Déramond 2024-10-10 13:13:09 +02:00 committed by GitHub
parent b13bb27cf7 1862645095
commit e6dd65fd25
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 686 additions and 784 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1404
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@ -103,9 +103,9 @@
"@popperjs/core": "^2.11.8"
},
"devDependencies": {
"@babel/cli": "^7.25.6",
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.4",
"@babel/cli": "^7.25.7",
"@babel/core": "^7.25.7",
"@babel/preset-env": "^7.25.7",
"@docsearch/js": "^3.6.2",
"@popperjs/core": "^2.11.8",
"@rollup/plugin-babel": "^6.0.4",
@ -121,7 +121,7 @@
"eslint": "^8.57.1",
"eslint-config-xo": "^0.45.0",
"eslint-plugin-html": "^8.1.2",
"eslint-plugin-import": "^2.30.0",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-markdown": "^5.1.0",
"eslint-plugin-unicorn": "^55.0.0",
"find-unused-sass-variables": "^6.0.0",
@ -145,11 +145,11 @@
"npm-run-all2": "^6.2.3",
"postcss": "^8.4.47",
"postcss-cli": "^11.0.0",
"rollup": "^4.23.0",
"rollup": "^4.24.0",
"rollup-plugin-istanbul": "^5.0.0",
"rtlcss": "^4.3.0",
"sass": "1.78.0",
"sass-true": "^8.0.0",
"sass-true": "^8.1.0",
"shelljs": "^0.8.5",
"stylelint": "^16.9.0",
"stylelint-config-twbs-bootstrap": "^15.1.0",

24
site/content/docs/5.3/layout/columns.md
View File

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

30
site/content/docs/5.3/utilities/spacing.md
View File

@ -103,11 +103,11 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
{{< example class="bd-example-cssgrid" >}}
<div class="grid gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
<div class="p-2">Grid item 1</div>
<div class="p-2">Grid item 2</div>
<div class="p-2">Grid item 3</div>
<div class="p-2">Grid item 4</div>
</div>
{{< /example >}}
@ -118,11 +118,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
`row-gap` sets the vertical space between children items in the specified container.
{{< example class="bd-example-cssgrid" >}}
<div class="grid gap-0 row-gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
<div class="p-2">Grid item 1</div>
<div class="p-2">Grid item 2</div>
<div class="p-2">Grid item 3</div>
<div class="p-2">Grid item 4</div>
</div>
{{< /example >}}
@ -131,11 +131,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
`column-gap` sets the horizontal space between children items in the specified container.
{{< example class="bd-example-cssgrid" >}}
<div class="grid gap-0 column-gap-3">
<div class="p-2 g-col-6">Grid item 1</div>
<div class="p-2 g-col-6">Grid item 2</div>
<div class="p-2 g-col-6">Grid item 3</div>
<div class="p-2 g-col-6">Grid item 4</div>
<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
<div class="p-2">Grid item 1</div>
<div class="p-2">Grid item 2</div>
<div class="p-2">Grid item 3</div>
<div class="p-2">Grid item 4</div>
</div>
{{< /example >}}