mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 19:31:35 +02:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into main-lmp-debug-tools

Browse Source
This commit is contained in:
Louis-Maxime Piton
2024-12-03 11:06:57 +01:00
parent f7b15cdaff ec96eacd0e
commit faab259d50
8 changed files with 896 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
js/tests/visual/floating-label.html
View File

@@ -167,6 +167,34 @@
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput1" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
<label for="floatingPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
</div>
<!--Compare form-select rendering depending on the size-->
<div class="form-floating">
<select class="form-select" id="floatingSelectRegular" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectRegular">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-sm" id="floatingSelectSmall" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectSmall">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-lg" id="floatingSelectLarge" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectLarge">Works with selects</label>
</div>
</div>
<div class="container-fluid bg-body" data-bs-theme="dark">
@@ -329,6 +357,34 @@
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput3" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
<label for="floatingPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
</div>
<!--Compare form-select rendering depending on the size-->
<div class="form-floating">
<select class="form-select" id="floatingSelectRegularDark" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectRegularDark">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-sm" id="floatingSelectSmallDark" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectSmallDark">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-lg" id="floatingSelectLargeDark" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectLargeDark">Works with selects</label>
</div>
</div>
</div>

1751
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

16
package.json
View File

@@ -103,10 +103,10 @@
"@popperjs/core": "^2.11.8"
},
"devDependencies": {
"@babel/cli": "^7.25.7",
"@babel/core": "^7.25.8",
"@babel/preset-env": "^7.25.8",
"@docsearch/js": "^3.6.2",
"@babel/cli": "^7.25.9",
"@babel/core": "^7.26.0",
"@babel/preset-env": "^7.26.0",
"@docsearch/js": "^3.7.0",
"@popperjs/core": "^2.11.8",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^28.0.1",
@@ -127,7 +127,7 @@
"find-unused-sass-variables": "^6.0.0",
"globby": "^14.0.2",
"hammer-simulator": "0.0.1",
"hugo-bin": "^0.133.1",
"hugo-bin": "^0.134.1",
"ip": "^2.0.1",
"jasmine": "^5.3.0",
"jquery": "^3.7.1",
@@ -142,10 +142,10 @@
"karma-rollup-preprocessor": "7.0.7",
"lockfile-lint": "^4.14.0",
"nodemon": "^3.1.7",
"npm-run-all2": "^6.2.3",
"npm-run-all2": "^7.0.1",
"postcss": "^8.4.47",
"postcss-cli": "^11.0.0",
"rollup": "^4.24.0",
"rollup": "^4.24.4",
"rollup-plugin-istanbul": "^5.0.0",
"rtlcss": "^4.3.0",
"sass": "1.78.0",
@@ -154,7 +154,7 @@
"stylelint": "^16.10.0",
"stylelint-config-twbs-bootstrap": "^15.1.0",
"terser": "^5.36.0",
"vnu-jar": "23.4.11"
"vnu-jar": "24.10.17"
},
"files": [
"dist/{css,js}/*.{css,js,map}",

1
scss/forms/_floating-labels.scss
View File

@@ -51,6 +51,7 @@
> .form-select {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
padding-left: $form-floating-padding-x;
}
> .form-control:focus,

2
site/content/docs/5.3/components/dropdowns.md
View File

@@ -8,7 +8,7 @@ toc: true
## Overview
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/).
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is [an intentional design decision](https://markdotto.com/blog/bootstrap-explained-dropdowns/).
Dropdowns are built on a third party library, [Popper](https://popper.js.org/docs/v2/), which provides dynamic positioning and viewport detection. Be sure to include [popper.min.js]({{< param "cdn.popper" >}}) before Bootstrap's JavaScript or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper. Popper isn't used to position dropdowns in navbars though as dynamic positioning isn't required.

11
site/content/docs/5.3/getting-started/download.md
View File

@@ -100,6 +100,17 @@ Install Bootstrap in your Node.js powered apps with [the yarn package](https://y
yarn add bootstrap@{{< param "current_version" >}}
```
{{< callout warning >}}
**Yarn 2+ (aka Yarn Berry) doesn't support the `node_modules` directory by default**: using our [Sass & JS example](https://github.com/twbs/examples/tree/main/sass-js) needs some adjustments:
```sh
yarn config set nodeLinker node-modules # Use the node_modules linker
touch yarn.lock # Create an empty yarn.lock file
yarn install # Install the dependencies
yarn start # Start the project
```
{{< /callout >}}
### RubyGems
Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/guides/gemfile.html):

2
site/content/docs/5.3/migration.md
View File

@@ -445,7 +445,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior.
- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box.
- <span class="badge text-bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-0` to `.order-5` out of the box.
- <span class="badge text-bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}).

8
site/content/docs/5.3/utilities/api.md
View File

@@ -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 ),
@@ -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,