Merging upstream version 5.3.5+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
8838637a85
commit
449962af96
GPG key ID:
FBB4F0E80A80222F
233 changed files with 6665 additions and 12847 deletions
|
|
@ -7,7 +7,7 @@ aliases: "/docs/5.3/utilities/"
|
|||
toc: true
|
||||
---
|
||||
|
||||
Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started.
|
||||
Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps/) to get started.
|
||||
|
||||
The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
|
||||
|
||||
|
|
@ -452,7 +452,8 @@ You can enable responsive classes for an existing set of utilities that are not
|
|||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities, (
|
||||
$utilities,
|
||||
(
|
||||
"border": map-merge(
|
||||
map-get($utilities, "border"),
|
||||
( responsive: true ),
|
||||
|
|
@ -508,7 +509,8 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca
|
|||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities, (
|
||||
$utilities,
|
||||
(
|
||||
"margin-start": map-merge(
|
||||
map-get($utilities, "margin-start"),
|
||||
( class: ml ),
|
||||
|
|
@ -521,7 +523,7 @@ $utilities: map-merge(
|
|||
|
||||
### Remove utilities
|
||||
|
||||
Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map#remove).
|
||||
Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map/#remove).
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
|
|
@ -537,7 +539,7 @@ $utilities: map-remove($utilities, "width", "float");
|
|||
@import "bootstrap/scss/utilities/api";
|
||||
```
|
||||
|
||||
You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge) and set the group key to `null` to remove the utility.
|
||||
You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge) and set the group key to `null` to remove the utility.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
|
|
@ -559,7 +561,7 @@ $utilities: map-merge(
|
|||
|
||||
### Add, remove, modify
|
||||
|
||||
You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map#merge). Here's how you can combine the previous examples into one larger map.
|
||||
You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here's how you can combine the previous examples into one larger map.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
|
|
@ -574,13 +576,11 @@ $utilities: map-merge(
|
|||
(
|
||||
// Remove the `width` utility
|
||||
"width": null,
|
||||
|
||||
// Make an existing utility responsive
|
||||
"border": map-merge(
|
||||
map-get($utilities, "border"),
|
||||
( responsive: true ),
|
||||
),
|
||||
|
||||
// Add new utilities
|
||||
"cursor": (
|
||||
property: cursor,
|
||||
|
|
|
|||
|
|
@ -128,13 +128,11 @@ Add classes to an element to easily round its corners.
|
|||
{{< placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
|
||||
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5`, and can be configured by modifying the utilities API.
|
||||
Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API.
|
||||
|
||||
{{< example class="bd-example-rounded-utils" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" >}}
|
||||
|
|
@ -143,6 +141,8 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
|
|||
{{< placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" >}}
|
||||
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
|
||||
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
|
||||
{{< /example >}}
|
||||
|
||||
{{< example class="bd-example-rounded-utils" >}}
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ For faster mobile-friendly development, use responsive display classes for showi
|
|||
|
||||
To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
|
||||
|
||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||
To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
|
||||
|
||||
{{< bs-table >}}
|
||||
| Screen size | Class |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Link
|
|||
description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
|
||||
group: utilities
|
||||
toc: true
|
||||
added: 5.3
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
## Link opacity
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ title: Object fit
|
|||
description: Use the object fit utilities to modify how the content of a [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), such as an `<img>` or `<video>`, should be resized to fit its container.
|
||||
group: utilities
|
||||
toc: true
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ layout: docs
|
|||
title: Opacity
|
||||
description: Control the opacity of elements.
|
||||
group: utilities
|
||||
added: "5.1"
|
||||
added:
|
||||
version: "5.1"
|
||||
---
|
||||
|
||||
The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ Here are some real life examples of these classes:
|
|||
</button>
|
||||
|
||||
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary position-relative">
|
||||
|
|
|
|||
|
|
@ -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 >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts
|
|||
|
||||
## Text transform
|
||||
|
||||
Transform text in components with text capitalization classes.
|
||||
Transform text in components with our text capitalization classes: `text-lowercase`, `text-uppercase` or `text-capitalize`.
|
||||
|
||||
{{< example >}}
|
||||
<p class="text-lowercase">Lowercased text.</p>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ title: Z-index
|
|||
description: Use our low-level `z-index` utilities to quickly change the stack level of an element or component.
|
||||
group: utilities
|
||||
toc: true
|
||||
added: "5.3"
|
||||
added:
|
||||
version: "5.3"
|
||||
---
|
||||
|
||||
## Example
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue