Merge branch 'main' into main-mc-width-utilities-split
This commit is contained in:
XhmikosR
GitHub
commit
9b92b3daac
32 changed files with 468 additions and 198 deletions
|
|
@ -22,7 +22,7 @@
|
|||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap-utilities.min.css",
|
||||
"maxSize": "6 kB"
|
||||
"maxSize": "6.25 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap.css",
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
},
|
||||
{
|
||||
"path": "./dist/css/bootstrap.min.css",
|
||||
"maxSize": "21.5 kB"
|
||||
"maxSize": "22 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/bootstrap.bundle.js",
|
||||
|
|
|
|||
|
|
@ -57,7 +57,6 @@ params:
|
|||
slack: "https://bootstrap-slack.herokuapp.com/"
|
||||
opencollective: "https://opencollective.com/bootstrap"
|
||||
blog: "https://blog.getbootstrap.com/"
|
||||
expo: "https://expo.getbootstrap.com/"
|
||||
themes: "https://themes.getbootstrap.com/"
|
||||
icons: "https://icons.getbootstrap.com/"
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,10 @@ const conf = {
|
|||
},
|
||||
files: [
|
||||
'node_modules/hammer-simulator/index.js',
|
||||
{ pattern: 'js/tests/unit/**/!(jquery).spec.js', watched: !browserStack }
|
||||
{
|
||||
pattern: 'js/tests/unit/**/!(jquery).spec.js',
|
||||
watched: !browserStack
|
||||
}
|
||||
],
|
||||
preprocessors: {
|
||||
'js/tests/unit/**/*.spec.js': ['rollup']
|
||||
|
|
@ -114,7 +117,10 @@ if (browserStack) {
|
|||
conf.detectBrowsers = detectBrowsers
|
||||
conf.files = [
|
||||
'node_modules/jquery/dist/jquery.slim.min.js',
|
||||
{ pattern: 'js/tests/unit/jquery.spec.js', watched: false }
|
||||
{
|
||||
pattern: 'js/tests/unit/jquery.spec.js',
|
||||
watched: false
|
||||
}
|
||||
]
|
||||
} else {
|
||||
frameworks.push('detectBrowsers')
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@
|
|||
function reportFirefoxTestResult(result) {
|
||||
if (!firefoxTestDone) {
|
||||
ffBugTestResult.classList.add(result ? 'text-success' : 'text-danger')
|
||||
ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL'
|
||||
ffBugTestResult.textContent = result ? 'PASS' : 'FAIL'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
75
package-lock.json
generated
75
package-lock.json
generated
|
|
@ -1569,17 +1569,50 @@
|
|||
"optional": true
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "10.0.1",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.0.1.tgz",
|
||||
"integrity": "sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==",
|
||||
"version": "10.0.2",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.0.2.tgz",
|
||||
"integrity": "sha512-okBmu9OMdt6DNEcZmnl0IYVv8Xl/xYWRSnc2OJ9UJEOt1u30opG1B8aLsViqKryBaYv1SKB4f85fOGZs5zYxHQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "^4.14.5",
|
||||
"caniuse-lite": "^1.0.30001137",
|
||||
"browserslist": "^4.14.7",
|
||||
"caniuse-lite": "^1.0.30001157",
|
||||
"colorette": "^1.2.1",
|
||||
"normalize-range": "^0.1.2",
|
||||
"num2fraction": "^1.2.2",
|
||||
"postcss-value-parser": "^4.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"browserslist": {
|
||||
"version": "4.14.7",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.7.tgz",
|
||||
"integrity": "sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"caniuse-lite": "^1.0.30001157",
|
||||
"colorette": "^1.2.1",
|
||||
"electron-to-chromium": "^1.3.591",
|
||||
"escalade": "^3.1.1",
|
||||
"node-releases": "^1.1.66"
|
||||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001157",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz",
|
||||
"integrity": "sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==",
|
||||
"dev": true
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.592",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.592.tgz",
|
||||
"integrity": "sha512-kGNowksvqQiPb1pUSQKpd8JFoGPLxYOwduNRCqCxGh/2Q1qE2JdmwouCW41lUzDxOb/2RIV4lR0tVIfboWlO9A==",
|
||||
"dev": true
|
||||
},
|
||||
"node-releases": {
|
||||
"version": "1.1.66",
|
||||
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.66.tgz",
|
||||
"integrity": "sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"axios": {
|
||||
|
|
@ -2257,9 +2290,9 @@
|
|||
}
|
||||
},
|
||||
"buffer": {
|
||||
"version": "5.7.0",
|
||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.0.tgz",
|
||||
"integrity": "sha512-cd+5r1VLBwUqTrmnzW+D7ABkJUM6mr7uv1dv+6jRw4Rcl7tFIFHDqHPL98LhpGFn3dbAt3gtLxtrWp4m1kFrqg==",
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
|
||||
"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"base64-js": "^1.3.1",
|
||||
|
|
@ -3798,9 +3831,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"eslint": {
|
||||
"version": "7.12.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.12.1.tgz",
|
||||
"integrity": "sha512-HlMTEdr/LicJfN08LB3nM1rRYliDXOmfoO4vj39xN6BLpFzF00hbwBoqHk8UcJ2M/3nlARZWy/mslvGEuZFvsg==",
|
||||
"version": "7.13.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-7.13.0.tgz",
|
||||
"integrity": "sha512-uCORMuOO8tUzJmsdRtrvcGq5qposf7Rw0LwkTJkoDbOycVQtQjmnhZSuLQnozLE4TmAzlMVV45eCHmQ1OpDKUQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
|
|
@ -5445,9 +5478,9 @@
|
|||
}
|
||||
},
|
||||
"hugo-bin": {
|
||||
"version": "0.65.0",
|
||||
"resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.65.0.tgz",
|
||||
"integrity": "sha512-r4rz9mvOMUscSuE9eBjQMUouuMWi5qvM70geRsWhgt6+9K0300NJ3Fid7YIQVnEzwmhix+NV3nb+OZWsDYkgwA==",
|
||||
"version": "0.66.1",
|
||||
"resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.66.1.tgz",
|
||||
"integrity": "sha512-enMlGVAS2qVQZiX1CYPMD8Dihh+zLVgqPAsip8Hques1U1M1mPNf01cGoAZXuMscyo8B5/qBWhDqRimNMFLuKg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bin-wrapper": "^4.1.0",
|
||||
|
|
@ -8277,14 +8310,14 @@
|
|||
"optional": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.1.4",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.4.tgz",
|
||||
"integrity": "sha512-LfqcwgMq9LOd8pX7K2+r2HPitlIGC5p6PoZhVELlqhh2YGDVcXKpkCseqan73Hrdik6nBd2OvoDPUaP/oMj9hQ==",
|
||||
"version": "8.1.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.1.6.tgz",
|
||||
"integrity": "sha512-JuifSl4h8dJ70SiMXKjzCxhalE6p2TnMHuq9G8ftyXj2jg6SXzqCsEuxMj9RkmJoO5D+Z9YrWunNkxqpRT02qg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"colorette": "^1.2.1",
|
||||
"line-column": "^1.0.2",
|
||||
"nanoid": "^3.1.15",
|
||||
"nanoid": "^3.1.16",
|
||||
"source-map": "^0.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -9339,9 +9372,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.28.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.28.0.tgz",
|
||||
"integrity": "sha512-9FWX/0wuE1KxwfiP02chZhHaPzu6adpx9+wGch7WMOuHy5npOo0UapRI3FNSHva2CczaYJu2yNUBN8cCSqHz/A==",
|
||||
"version": "1.29.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.29.0.tgz",
|
||||
"integrity": "sha512-ZpwAUFgnvAUCdkjwPREny+17BpUj8nh5Yr6zKPGtLNTLrmtoRYIjm7njP24COhjJldjwW1dcv52Lpf4tNZVVRA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": ">=2.0.0 <4.0.0"
|
||||
|
|
|
|||
14
package.json
14
package.json
|
|
@ -23,9 +23,9 @@
|
|||
"css": "npm-run-all css-compile css-prefix css-minify",
|
||||
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css scss/:dist/css/",
|
||||
"css-lint": "npm-run-all --continue-on-error --parallel css-lint-*",
|
||||
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache",
|
||||
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
|
||||
"css-lint-vars": "fusv scss/ site/assets/scss/",
|
||||
"css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-utilities.min.css dist/css/bootstrap-utilities.css && cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css",
|
||||
"css-minify": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap.min.css dist/css/bootstrap.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-grid.min.css dist/css/bootstrap-grid.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-utilities.min.css dist/css/bootstrap-utilities.css && cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/bootstrap-reboot.min.css dist/css/bootstrap-reboot.css",
|
||||
"css-prefix": "npm-run-all --parallel css-prefix-*",
|
||||
"css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
|
||||
"css-prefix-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"",
|
||||
|
|
@ -98,18 +98,18 @@
|
|||
"@rollup/plugin-babel": "^5.2.1",
|
||||
"@rollup/plugin-commonjs": "^16.0.0",
|
||||
"@rollup/plugin-node-resolve": "^10.0.0",
|
||||
"autoprefixer": "^10.0.1",
|
||||
"autoprefixer": "^10.0.2",
|
||||
"bundlewatch": "^0.3.1",
|
||||
"clean-css-cli": "^4.3.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"eslint": "^7.12.1",
|
||||
"eslint": "^7.13.0",
|
||||
"eslint-config-xo": "^0.33.1",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-unicorn": "^23.0.0",
|
||||
"find-unused-sass-variables": "^3.0.0",
|
||||
"glob": "^7.1.6",
|
||||
"hammer-simulator": "0.0.1",
|
||||
"hugo-bin": "^0.65.0",
|
||||
"hugo-bin": "^0.66.1",
|
||||
"ip": "^1.1.5",
|
||||
"jquery": "^3.5.1",
|
||||
"karma": "^5.2.3",
|
||||
|
|
@ -126,11 +126,11 @@
|
|||
"nodemon": "^2.0.6",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"popper.js": "^1.16.1",
|
||||
"postcss": "^8.1.4",
|
||||
"postcss": "^8.1.6",
|
||||
"postcss-cli": "^8.2.0",
|
||||
"rollup": "^2.33.1",
|
||||
"rollup-plugin-istanbul": "^2.0.1",
|
||||
"sass": "^1.28.0",
|
||||
"sass": "^1.29.0",
|
||||
"shelljs": "^0.8.4",
|
||||
"stylelint": "^13.7.2",
|
||||
"stylelint-config-twbs-bootstrap": "^2.1.0",
|
||||
|
|
|
|||
125
scss/_accordion.scss
Normal file
125
scss/_accordion.scss
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.accordion-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: $accordion-button-padding-y $accordion-button-padding-x;
|
||||
@include font-size($font-size-base);
|
||||
color: $accordion-button-color;
|
||||
background-color: $accordion-button-bg;
|
||||
border: $accordion-border-width solid $accordion-border-color;
|
||||
@include border-radius(0);
|
||||
overflow-anchor: none;
|
||||
@include transition($accordion-transition);
|
||||
|
||||
&.collapsed {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
color: $accordion-button-active-color;
|
||||
background-color: $accordion-button-active-bg;
|
||||
|
||||
&::after {
|
||||
background-image: escape-svg($accordion-button-active-icon);
|
||||
transform: $accordion-icon-transform;
|
||||
}
|
||||
}
|
||||
|
||||
// Accordion icon
|
||||
&::after {
|
||||
flex-shrink: 0;
|
||||
width: $accordion-icon-width;
|
||||
height: $accordion-icon-width;
|
||||
margin-left: auto;
|
||||
content: "";
|
||||
background-image: escape-svg($accordion-button-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-size: $accordion-icon-width;
|
||||
@include transition($accordion-icon-transition);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
border-color: $accordion-button-focus-border-color;
|
||||
outline: 0;
|
||||
box-shadow: $accordion-button-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
&:first-of-type {
|
||||
.accordion-button {
|
||||
@include border-top-radius($accordion-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.accordion-button {
|
||||
// Only set a border-radius on the last item if the accordion is collapsed
|
||||
&.collapsed {
|
||||
border-bottom-width: $accordion-border-width;
|
||||
@include border-bottom-radius($accordion-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-collapse {
|
||||
border-bottom-width: $accordion-border-width;
|
||||
@include border-bottom-radius($accordion-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-collapse {
|
||||
border: solid $accordion-border-color;
|
||||
border-width: 0 $accordion-border-width;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
padding: $accordion-body-padding-y $accordion-body-padding-x;
|
||||
}
|
||||
|
||||
|
||||
// Flush accordion items
|
||||
//
|
||||
// Remove borders and border-radius to keep accordion items edge-to-edge.
|
||||
|
||||
.accordion-flush {
|
||||
.accordion-button {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.accordion-collapse {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
&:first-of-type {
|
||||
.accordion-button {
|
||||
border-top-width: 0;
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
.accordion-button.collapsed {
|
||||
border-bottom-width: 0;
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -43,9 +43,15 @@
|
|||
// scss-docs-start alert-modifiers
|
||||
// Generate contextual modifier classes for colorizing the alert.
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(scale-color($value, $alert-bg-scale), scale-color($value, $alert-border-scale), scale-color($value, $alert-color-scale));
|
||||
@each $state, $value in $theme-colors {
|
||||
$background: scale-color($value, $alert-bg-scale);
|
||||
$border: scale-color($value, $alert-border-scale);
|
||||
$color: scale-color($value, $alert-color-scale);
|
||||
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
|
||||
$color: mix($value, color-contrast($background), abs($alert-color-scale));
|
||||
}
|
||||
.alert-#{$state} {
|
||||
@include alert-variant($background, $border, $color);
|
||||
}
|
||||
}
|
||||
// scss-docs-end alert-modifiers
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
|
|
|
|||
|
|
@ -107,18 +107,3 @@
|
|||
.btn-sm {
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Block button
|
||||
//
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
+ .btn-block {
|
||||
margin-top: $btn-block-spacing-y;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -213,30 +213,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Accordion
|
||||
//
|
||||
|
||||
.accordion {
|
||||
overflow-anchor: none;
|
||||
|
||||
> .card {
|
||||
overflow: hidden;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 0;
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
&:not(:first-of-type) {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
> .card-header {
|
||||
@include border-radius(0);
|
||||
margin-bottom: -$card-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -151,7 +151,13 @@
|
|||
// Add modifier classes to change text and background color on individual items.
|
||||
// Organizationally, this must come after the `:hover` states.
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, scale-color($value, $list-group-item-bg-scale), scale-color($value, $list-group-item-color-scale));
|
||||
@each $state, $value in $theme-colors {
|
||||
$background: scale-color($value, $list-group-item-bg-scale);
|
||||
$color: scale-color($value, $list-group-item-color-scale);
|
||||
@if (contrast-ratio($background, $color) < $min-contrast-ratio) {
|
||||
$color: mix($value, color-contrast($background), abs($alert-color-scale));
|
||||
}
|
||||
|
||||
@include list-group-item-variant($state, $background, $color);
|
||||
}
|
||||
// scss-docs-end list-group-modifiers
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ $utilities: map-merge(
|
|||
print: true,
|
||||
property: display,
|
||||
class: d,
|
||||
values: inline inline-block block table table-row table-cell flex inline-flex none
|
||||
values: inline inline-block block grid table table-row table-cell flex inline-flex none
|
||||
),
|
||||
"shadow": (
|
||||
property: box-shadow,
|
||||
|
|
@ -199,6 +199,12 @@ $utilities: map-merge(
|
|||
class: flex,
|
||||
values: wrap nowrap wrap-reverse
|
||||
),
|
||||
"gap": (
|
||||
responsive: true,
|
||||
property: gap,
|
||||
class: gap,
|
||||
values: $spacers
|
||||
),
|
||||
"justify-content": (
|
||||
responsive: true,
|
||||
property: justify-content,
|
||||
|
|
|
|||
|
|
@ -605,8 +605,6 @@ $btn-link-color: $link-color !default;
|
|||
$btn-link-hover-color: $link-hover-color !default;
|
||||
$btn-link-disabled-color: $gray-600 !default;
|
||||
|
||||
$btn-block-spacing-y: .5rem !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius: $border-radius !default;
|
||||
$btn-border-radius-sm: $border-radius-sm !default;
|
||||
|
|
@ -814,7 +812,7 @@ $form-feedback-invalid-color: $danger !default;
|
|||
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
|
||||
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
|
||||
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
|
||||
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
|
||||
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
|
||||
|
||||
// scss-docs-start form-validation-states
|
||||
$form-validation-states: (
|
||||
|
|
@ -1014,6 +1012,37 @@ $card-img-overlay-padding: $spacer !default;
|
|||
|
||||
$card-group-margin: $grid-gutter-width / 2 !default;
|
||||
|
||||
// Accordion
|
||||
$accordion-padding-y: 1rem !default;
|
||||
$accordion-padding-x: 1.25rem !default;
|
||||
$accordion-color: $body-color !default;
|
||||
$accordion-bg: transparent !default;
|
||||
$accordion-border-width: $border-width !default;
|
||||
$accordion-border-color: rgba($black, .125) !default;
|
||||
$accordion-border-radius: $border-radius !default;
|
||||
|
||||
$accordion-body-padding-y: $accordion-padding-y !default;
|
||||
$accordion-body-padding-x: $accordion-padding-x !default;
|
||||
|
||||
$accordion-button-padding-y: $accordion-padding-y !default;
|
||||
$accordion-button-padding-x: $accordion-padding-x !default;
|
||||
$accordion-button-color: $accordion-color !default;
|
||||
$accordion-button-bg: $accordion-bg !default;
|
||||
$accordion-transition: $btn-transition, border-radius .15s ease !default;
|
||||
$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
|
||||
$accordion-button-active-color: shade-color($primary, 10%) !default;
|
||||
|
||||
$accordion-button-focus-border-color: $input-focus-border-color !default;
|
||||
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
|
||||
|
||||
$accordion-icon-width: 1.25rem !default;
|
||||
$accordion-icon-color: $accordion-color !default;
|
||||
$accordion-icon-active-color: $accordion-button-active-color !default;
|
||||
$accordion-icon-transition: transform .2s ease-in-out !default;
|
||||
$accordion-icon-transform: rotate(180deg) !default;
|
||||
|
||||
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
|
|
@ -1151,7 +1180,7 @@ $alert-border-width: $border-width !default;
|
|||
|
||||
$alert-bg-scale: -80% !default;
|
||||
$alert-border-scale: -70% !default;
|
||||
$alert-color-scale: 50% !default;
|
||||
$alert-color-scale: 40% !default;
|
||||
|
||||
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
|
||||
|
||||
|
|
@ -1180,7 +1209,7 @@ $list-group-border-radius: $border-radius !default;
|
|||
$list-group-item-padding-y: $spacer / 2 !default;
|
||||
$list-group-item-padding-x: $spacer !default;
|
||||
$list-group-item-bg-scale: -80% !default;
|
||||
$list-group-item-color-scale: 50% !default;
|
||||
$list-group-item-color-scale: 40% !default;
|
||||
|
||||
$list-group-hover-bg: $gray-100 !default;
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
|
|
@ -1250,8 +1279,8 @@ $carousel-caption-spacer: 1.25rem !default;
|
|||
|
||||
$carousel-control-icon-width: 2rem !default;
|
||||
|
||||
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
|
||||
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
|
||||
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
|
||||
|
||||
$carousel-transition-duration: .6s !default;
|
||||
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
||||
|
|
@ -1280,7 +1309,7 @@ $btn-close-height: $btn-close-width !default;
|
|||
$btn-close-padding-x: .25em !default;
|
||||
$btn-close-padding-y: $btn-close-padding-x !default;
|
||||
$btn-close-color: $black !default;
|
||||
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$btn-close-color}' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
|
||||
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
|
||||
$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
|
||||
$btn-close-opacity: .5 !default;
|
||||
$btn-close-hover-opacity: .75 !default;
|
||||
|
|
|
|||
1
scss/bootstrap.scss
vendored
1
scss/bootstrap.scss
vendored
|
|
@ -28,6 +28,7 @@
|
|||
@import "nav";
|
||||
@import "navbar";
|
||||
@import "card";
|
||||
@import "accordion";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "badge";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
// stylelint-disable selector-no-vendor-prefix
|
||||
|
||||
.form-floating {
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,6 @@
|
|||
padding: $input-padding-y $input-padding-x;
|
||||
margin: (-$input-padding-y) (-$input-padding-x);
|
||||
margin-inline-end: $input-padding-x;
|
||||
-moz-margin-end: subtract($input-padding-x, 5px); // stylelint-disable-line property-no-vendor-prefix
|
||||
color: $form-file-button-color;
|
||||
@include gradient-bg($form-file-button-bg);
|
||||
pointer-events: none;
|
||||
|
|
@ -156,7 +155,6 @@
|
|||
padding: $input-padding-y-sm $input-padding-x-sm;
|
||||
margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
|
||||
margin-inline-end: $input-padding-x-sm;
|
||||
-moz-margin-end: subtract($input-padding-x-sm, 5px); // stylelint-disable-line property-no-vendor-prefix
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
|
|
@ -177,7 +175,6 @@
|
|||
padding: $input-padding-y-lg $input-padding-x-lg;
|
||||
margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
|
||||
margin-inline-end: $input-padding-x-lg;
|
||||
-moz-margin-end: subtract($input-padding-x-lg, 5px); // stylelint-disable-line property-no-vendor-prefix
|
||||
}
|
||||
|
||||
&::-webkit-file-upload-button {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,12 @@
|
|||
(function () {
|
||||
'use strict'
|
||||
|
||||
if (!window.docsearch) {
|
||||
var inputElement = document.getElementById('search-input')
|
||||
|
||||
if (!window.docsearch || !inputElement) {
|
||||
return
|
||||
}
|
||||
|
||||
var inputElement = document.getElementById('search-input')
|
||||
var siteDocsVersion = inputElement.getAttribute('data-docs-version')
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
|
|
@ -42,7 +43,7 @@
|
|||
transformData: function (hits) {
|
||||
return hits.map(function (hit) {
|
||||
var currentUrl = getOrigin()
|
||||
var liveUrl = 'https://getbootstrap.com/'
|
||||
var liveUrl = 'https://v5.getbootstrap.com/'
|
||||
|
||||
hit.url = currentUrl.lastIndexOf(liveUrl, 0) === 0 ?
|
||||
// On production, return the result as is
|
||||
|
|
|
|||
106
site/content/docs/5.0/components/accordion.md
Normal file
106
site/content/docs/5.0/components/accordion.md
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Accordion
|
||||
description: Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.
|
||||
group: components
|
||||
aliases:
|
||||
- "/components/"
|
||||
- "/docs/5.0/components/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
||||
The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`.
|
||||
|
||||
{{< callout info >}}
|
||||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
## Example
|
||||
|
||||
Click the accordions below to expand/collapse the accordion content.
|
||||
|
||||
{{< example >}}
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button class="accordion-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div class="accordion-body">
|
||||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Flush
|
||||
|
||||
Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
|
||||
|
||||
{{< example class="bg-light" >}}
|
||||
<div class="accordion accordion-flush" id="accordionFlushExample">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingOne">
|
||||
<button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
|
||||
Accordion Item #1
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingTwo">
|
||||
<button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
|
||||
Accordion Item #2
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="flush-headingThree">
|
||||
<button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
|
||||
Accordion Item #3
|
||||
</button>
|
||||
</h2>
|
||||
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-parent="#accordionFlushExample">
|
||||
<div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Accessibility
|
||||
|
||||
Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information.
|
||||
|
|
@ -3,9 +3,6 @@ layout: docs
|
|||
title: Alerts
|
||||
description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
|
||||
group: components
|
||||
aliases:
|
||||
- "/components/"
|
||||
- "/docs/5.0/components/"
|
||||
toc: true
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -72,13 +72,6 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes
|
|||
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
||||
{{< /example >}}
|
||||
|
||||
Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
|
||||
|
||||
{{< example >}}
|
||||
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
|
||||
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
|
||||
{{< /example >}}
|
||||
|
||||
## Disabled state
|
||||
|
||||
Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
|
||||
|
|
@ -105,6 +98,44 @@ Disabled buttons using the `<a>` element behave a bit different:
|
|||
The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
|
||||
{{< /callout >}}
|
||||
|
||||
## Block buttons
|
||||
|
||||
Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoing, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-grid gap-2 d-md-block">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use `.col-6`. Center it horizontally with `.mx-auto`, too.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-grid gap-2 col-6 mx-auto">
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
|
||||
|
||||
{{< example >}}
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
<button class="btn btn-primary mr-md-2" type="button">Button</button>
|
||||
<button class="btn btn-primary" type="button">Button</button>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Button plugin
|
||||
|
||||
The button plugin allows you to create simple on/off toggle buttons.
|
||||
|
|
|
|||
|
|
@ -69,58 +69,6 @@ Multiple `<button>` or `<a>` can show and hide an element if they each reference
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Accordion example
|
||||
|
||||
Using the [card]({{< docsref "/components/card" >}}) component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use `.accordion` as a wrapper.
|
||||
|
||||
{{< example >}}
|
||||
<div class="accordion" id="accordionExample">
|
||||
<div class="card">
|
||||
<div class="card-header p-0" id="headingOne">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-light btn-block text-left p-3 rounded-0" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header p-0" id="headingTwo">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-light btn-block text-left collapsed p-3 rounded-0" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header p-0" id="headingThree">
|
||||
<h2 class="mb-0">
|
||||
<button class="btn btn-light btn-block text-left collapsed p-3 rounded-0" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</button>
|
||||
</h2>
|
||||
</div>
|
||||
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
|
||||
<div class="card-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Accessibility
|
||||
|
||||
Be sure to add `aria-expanded` to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed (via JavaScript, or because the user triggered another control element also tied to the same collapsible element). If the control element's HTML element is not a button (e.g., an `<a>` or `<div>`), the attribute `role="button"` should be added to the element.
|
||||
|
|
|
|||
|
|
@ -21,8 +21,6 @@ Here's what you need to know before getting started with the navbar:
|
|||
{{< partial "callout-info-prefersreducedmotion.md" >}}
|
||||
{{< /callout >}}
|
||||
|
||||
Read on for an example and list of supported sub-components.
|
||||
|
||||
## Supported content
|
||||
|
||||
Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
|
||||
|
|
@ -79,7 +77,7 @@ This example uses [color]({{< docsref "/utilities/colors" >}}) (`bg-light`) and
|
|||
|
||||
### Brand
|
||||
|
||||
The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
|
||||
The `.navbar-brand` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
|
||||
|
||||
{{< example >}}
|
||||
<!-- As a link -->
|
||||
|
|
@ -178,7 +176,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
|
|||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
|
||||
You can also use dropdowns in your navbar. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
|
|
@ -229,7 +227,7 @@ Place various form controls and components within a navbar:
|
|||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
Immediate children elements in `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
|
||||
Immediate child elements of `.navbar` use flex layout and will default to `justify-content: space-between`. Use additional [flex utilities]({{< docsref "/utilities/flex" >}}) as needed to adjust this behavior.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
|
|
@ -243,7 +241,7 @@ Immediate children elements in `.navbar` use flex layout and will default to `ju
|
|||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
Input groups work, too. If your navbar is an entire form, or mostly form, you can use the `<form>` element as the container and save some HTML. Applies to the option above and below this copy.
|
||||
Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-light bg-light">
|
||||
|
|
@ -419,7 +417,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
|
|||
|
||||
## Containers
|
||||
|
||||
Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement). Note that an inner container is still required.
|
||||
Although it's not required, you can wrap a navbar in a `.container` to center it on a page–though note that an inner container is still required. Or you can add a container inside the `.navbar` to only center the contents of a [fixed or static top navbar](#placement).
|
||||
|
||||
{{< example >}}
|
||||
<div class="container">
|
||||
|
|
@ -431,7 +429,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Use any of the responsive containers to change how wide the content in your navbar.
|
||||
Use any of the responsive containers to change how wide the content in your navbar is presented.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
|
|
@ -481,7 +479,7 @@ Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully suppo
|
|||
|
||||
## Responsive behaviors
|
||||
|
||||
Navbars can utilize `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
|
||||
Navbars can use `.navbar-toggler`, `.navbar-collapse`, and `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` classes to determine when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
|
||||
|
||||
For navbars that never collapse, add the `.navbar-expand` class on the navbar. For navbars that always collapse, don't add any `.navbar-expand` class.
|
||||
|
||||
|
|
@ -489,7 +487,7 @@ For navbars that never collapse, add the `.navbar-expand` class on the navbar. F
|
|||
|
||||
Navbar togglers are left-aligned by default, but should they follow a sibling element like a `.navbar-brand`, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.
|
||||
|
||||
With no `.navbar-brand` shown in lowest breakpoint:
|
||||
With no `.navbar-brand` shown at the smallest breakpoint:
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
|
|
@ -581,7 +579,7 @@ With a toggler on the left and brand name on the right:
|
|||
|
||||
### External content
|
||||
|
||||
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done!
|
||||
Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `.navbar` . Because our plugin works on the `id` and `data-target` matching, that's easily done!
|
||||
|
||||
{{< example >}}
|
||||
<div class="collapse" id="navbarToggleExternalContent">
|
||||
|
|
@ -598,3 +596,5 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
|
|||
</div>
|
||||
</nav>
|
||||
{{< /example >}}
|
||||
|
||||
When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ $font-family-sans-serif:
|
|||
"Helvetica Neue", Arial,
|
||||
// Linux
|
||||
"Noto Sans",
|
||||
"Liberation Sans",
|
||||
// Sans serif fallback
|
||||
sans-serif,
|
||||
// Emoji fonts
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ toc: true
|
|||
Download ready-to-use compiled code for **Bootstrap v{{< param current_version >}}** to easily drop into your project, which includes:
|
||||
|
||||
- Compiled and minified CSS bundles (see [CSS files comparison]({{< docsref "/getting-started/contents#css-files" >}}))
|
||||
- Compiled and minified JavaScript plugins
|
||||
- Compiled and minified JavaScript plugins (see [JS files comparison]({{< docsref "/getting-started/contents#js-files" >}}))
|
||||
|
||||
This doesn't include documentation, source files, or any optional JavaScript dependencies like Popper.js.
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ Many of our components require the use of JavaScript to function. Specifically,
|
|||
|
||||
#### Bundle
|
||||
|
||||
Include everything you need in one script with our bundle. Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.
|
||||
Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. Both `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/) for our tooltips and popovers. For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.
|
||||
|
||||
```html
|
||||
<script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
|
||||
|
|
@ -36,7 +36,7 @@ Include everything you need in one script with our bundle. Our `bootstrap.bundle
|
|||
|
||||
#### Separate
|
||||
|
||||
If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins.
|
||||
If you decide to go with the separate scripts solution, Popper.js must come first (if you're using tooltips or popovers), and then our JavaScript plugins.
|
||||
|
||||
```html
|
||||
<script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
|
||||
|
|
@ -51,7 +51,21 @@ If you use `<script type="module">`, please refer to our [using Bootstrap as a m
|
|||
|
||||
Curious which components explicitly require our JavaScript and Popper.js? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
|
||||
|
||||
{{< partial "getting-started/components-requiring-javascript" >}}
|
||||
<details>
|
||||
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
|
||||
{{< markdown >}}
|
||||
- Alerts for dismissing
|
||||
- Buttons for toggling states and checkbox/radio functionality
|
||||
- Carousel for all slide behaviors, controls, and indicators
|
||||
- Collapse for toggling visibility of content
|
||||
- Dropdowns for displaying and positioning (also requires [Popper.js](https://popper.js.org/))
|
||||
- Modals for displaying, positioning, and scroll behavior
|
||||
- Navbar for extending our Collapse plugin to implement responsive behavior
|
||||
- Toasts for displaying and dismissing
|
||||
- Tooltips and popovers for displaying and positioning (also requires [Popper.js](https://popper.js.org/))
|
||||
- Scrollspy for scroll behavior and navigation updates
|
||||
{{< /markdown >}}
|
||||
</details>
|
||||
|
||||
## Starter template
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@ toc: true
|
|||
|
||||
- Introduce `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
|
||||
|
||||
### Buttons
|
||||
|
||||
- [**Dropped `.btn-block` in favor of CSS grid utility classes.**]({{< docsref "/components/buttons#block-buttons" >}}) Instead of applying `.btn-block` to individual buttons, a group of buttons now get wrapped in a parent `.d-grid` class and can use `.gap-*` utilities for spacing.
|
||||
|
||||
### Forms
|
||||
|
||||
- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
|
||||
|
|
@ -38,6 +42,8 @@ toc: true
|
|||
- Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map.
|
||||
- Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency.
|
||||
- Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency.
|
||||
- Added `.d-grid` to display utilities
|
||||
- Added new `gap` utilities (`.gap`) for CSS Grid layouts
|
||||
|
||||
## v5.0.0-alpha2
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ Where *value* is one of:
|
|||
- `inline`
|
||||
- `inline-block`
|
||||
- `block`
|
||||
- `grid`
|
||||
- `table`
|
||||
- `table-cell`
|
||||
- `table-row`
|
||||
|
|
@ -135,6 +136,7 @@ Change the `display` value of elements when printing with our print display util
|
|||
- `.d-print-inline`
|
||||
- `.d-print-inline-block`
|
||||
- `.d-print-block`
|
||||
- `.d-print-grid`
|
||||
- `.d-print-table`
|
||||
- `.d-print-table-row`
|
||||
- `.d-print-table-cell`
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
---
|
||||
layout: docs
|
||||
title: Spacing
|
||||
description: Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
|
||||
description: Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.
|
||||
group: utilities
|
||||
toc: true
|
||||
---
|
||||
|
||||
## How it works
|
||||
## Margin and padding
|
||||
|
||||
Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `.25rem` to `3rem`.
|
||||
|
||||
## Notation
|
||||
Using the CSS Grid layout module? Consider using [the gap utility](#gap).
|
||||
|
||||
### Notation
|
||||
|
||||
Spacing utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
|
||||
|
||||
|
|
@ -43,7 +45,7 @@ Where *size* is one of:
|
|||
|
||||
(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
|
||||
|
||||
## Examples
|
||||
### Examples
|
||||
|
||||
Here are some representative examples of these classes:
|
||||
|
||||
|
|
@ -82,7 +84,7 @@ Additionally, Bootstrap also includes an `.mx-auto` class for horizontally cente
|
|||
</div>
|
||||
```
|
||||
|
||||
### Negative margin
|
||||
## Negative margin
|
||||
|
||||
In CSS, `margin` properties can utilize negative values (`padding` cannot). These negative margins are **disabled by default**, but can be enabled in Sass by setting `$enable-negative-margins: true`.
|
||||
|
||||
|
|
@ -93,3 +95,17 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
|
|||
margin-top: -0.25rem !important;
|
||||
}
|
||||
```
|
||||
|
||||
## Gap
|
||||
|
||||
When using `display: grid`, you can make use of `gap` utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a `display: grid` container). Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
|
||||
|
||||
{{< example html >}}
|
||||
<div class="d-grid gap-3">
|
||||
<div class="p-2 bg-light border">Grid item 1</div>
|
||||
<div class="p-2 bg-light border">Grid item 2</div>
|
||||
<div class="p-2 bg-light border">Grid item 3</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
Support includes responsive options for all of Bootstrap's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@
|
|||
|
||||
- title: Components
|
||||
pages:
|
||||
- title: Accordion
|
||||
- title: Alerts
|
||||
- title: Badge
|
||||
- title: Breadcrumb
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<main class="bd-main order-1">
|
||||
<div class="bd-intro pl-lg-4">
|
||||
<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
|
||||
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
|
||||
<h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
|
||||
</div>
|
||||
<p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
<details>
|
||||
<summary class="text-primary mb-3">Show components requiring JavaScript</summary>
|
||||
<ul>
|
||||
<li>Alerts for dismissing</li>
|
||||
<li>Buttons for toggling states and checkbox/radio functionality</li>
|
||||
<li>Carousel for all slide behaviors, controls, and indicators</li>
|
||||
<li>Collapse for toggling visibility of content</li>
|
||||
<li>Dropdowns for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
|
||||
<li>Modals for displaying, positioning, and scroll behavior</li>
|
||||
<li>Navbar for extending our Collapse plugin to implement responsive behavior</li>
|
||||
<li>Toasts for displaying and dismissing</li>
|
||||
<li>Tooltips and popovers for displaying and positioning (also requires <a href="https://popper.js.org/">Popper.js</a>)</li>
|
||||
<li>Scrollspy for scroll behavior and navigation updates</li>
|
||||
</ul>
|
||||
</details>
|
||||
Loading…
Add table
Add a link
Reference in a new issue