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

Merge branch 'main' into main-lmp-examples-focus-order

This commit is contained in:
Patrick H. Lauke 2024-12-10 11:54:17 +00:00 committed by GitHub
parent aa5ef21619 1d92d0b68f
commit b0816d665c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
34 changed files with 2160 additions and 2192 deletions
Show Stats 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."> <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> <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> </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>
<div class="container-fluid bg-body" data-bs-theme="dark"> <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."> <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> <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> </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>
</div> </div>

3864
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@ -103,13 +103,13 @@
"@popperjs/core": "^2.11.8" "@popperjs/core": "^2.11.8"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.25.7", "@babel/cli": "^7.26.4",
"@babel/core": "^7.25.7", "@babel/core": "^7.26.0",
"@babel/preset-env": "^7.25.7", "@babel/preset-env": "^7.26.0",
"@docsearch/js": "^3.6.2", "@docsearch/js": "^3.8.0",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@rollup/plugin-babel": "^6.0.4", "@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^28.0.0", "@rollup/plugin-commonjs": "^28.0.1",
"@rollup/plugin-node-resolve": "^15.3.0", "@rollup/plugin-node-resolve": "^15.3.0",
"@rollup/plugin-replace": "^6.0.1", "@rollup/plugin-replace": "^6.0.1",
"@stackblitz/sdk": "^1.11.0", "@stackblitz/sdk": "^1.11.0",
@ -127,9 +127,9 @@
"find-unused-sass-variables": "^6.0.0", "find-unused-sass-variables": "^6.0.0",
"globby": "^14.0.2", "globby": "^14.0.2",
"hammer-simulator": "0.0.1", "hammer-simulator": "0.0.1",
"hugo-bin": "^0.132.0", "hugo-bin": "^0.136.3",
"ip": "^2.0.1", "ip": "^2.0.1",
"jasmine": "^5.3.0", "jasmine": "^5.5.0",
"jquery": "^3.7.1", "jquery": "^3.7.1",
"karma": "^6.4.4", "karma": "^6.4.4",
"karma-browserstack-launcher": "1.4.0", "karma-browserstack-launcher": "1.4.0",
@ -142,19 +142,19 @@
"karma-rollup-preprocessor": "7.0.7", "karma-rollup-preprocessor": "7.0.7",
"lockfile-lint": "^4.14.0", "lockfile-lint": "^4.14.0",
"nodemon": "^3.1.7", "nodemon": "^3.1.7",
"npm-run-all2": "^6.2.3", "npm-run-all2": "^7.0.1",
"postcss": "^8.4.47", "postcss": "^8.4.49",
"postcss-cli": "^11.0.0", "postcss-cli": "^11.0.0",
"rollup": "^4.24.0", "rollup": "^4.28.1",
"rollup-plugin-istanbul": "^5.0.0", "rollup-plugin-istanbul": "^5.0.0",
"rtlcss": "^4.3.0", "rtlcss": "^4.3.0",
"sass": "1.78.0", "sass": "1.78.0",
"sass-true": "^8.1.0", "sass-true": "^8.1.0",
"shelljs": "^0.8.5", "shelljs": "^0.8.5",
"stylelint": "^16.9.0", "stylelint": "^16.11.0",
"stylelint-config-twbs-bootstrap": "^15.1.0", "stylelint-config-twbs-bootstrap": "^15.1.0",
"terser": "^5.34.1", "terser": "^5.37.0",
"vnu-jar": "23.4.11" "vnu-jar": "24.10.17"
}, },
"files": [ "files": [
"dist/{css,js}/*.{css,js,map}", "dist/{css,js}/*.{css,js,map}",

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

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

4
site/assets/scss/_navbar.scss
View File

@ -3,6 +3,10 @@
background-color: transparent; background-color: transparent;
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15); box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
@media (forced-colors) {
background-color: Canvas;
}
&::after { &::after {
position: absolute; position: absolute;
inset: 0; inset: 0;

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

@ -8,7 +8,7 @@ toc: true
## Overview ## 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. 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.

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

@ -112,7 +112,7 @@ With an SVG:
<div class="bd-example tooltip-demo"> <div class="bd-example tooltip-demo">
<a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip"> <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Hover or focus to see default tooltip">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
<rect width="100%" height="100%" fill="#563d7c"/> <rect width="100%" height="100%" fill="#563d7c"/>
<circle cx="50" cy="50" r="30" fill="#007bff"/> <circle cx="50" cy="50" r="30" fill="#007bff"/>
</svg> </svg>

28
site/content/docs/5.3/examples/badges/index.html
View File

@ -82,16 +82,16 @@ body_class: ""
<div class="d-flex gap-2 justify-content-center py-5"> <div class="d-flex gap-2 justify-content-center py-5">
<span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill"> <span class="badge d-flex p-2 align-items-center text-bg-primary rounded-pill">
<span class="px-1">Primary</span> <span class="px-1">Primary 1</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary 1"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill"> <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle rounded-pill">
<span class="px-1">Primary</span> <span class="px-1">Primary 2</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary 2"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill"> <span class="badge d-flex p-2 align-items-center text-primary-emphasis bg-primary-subtle border border-primary-subtle rounded-pill">
<span class="px-1">Primary</span> <span class="px-1">Primary 3</span>
<a href="#"><svg class="bi ms-1" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary 3"><svg class="bi ms-1" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
</div> </div>
@ -102,48 +102,48 @@ body_class: ""
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Primary Primary
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete primary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-secondary-emphasis bg-secondary-subtle border border-secondary-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Secondary Secondary
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete secondary"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-success-emphasis bg-success-subtle border border-success-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Success Success
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete success"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-danger-emphasis bg-danger-subtle border border-danger-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Danger Danger
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete danger"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Warning Warning
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete warning"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-info-emphasis bg-info-subtle border border-info-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Info Info
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete info"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-light-emphasis bg-light-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Light Light
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete light"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
<span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill"> <span class="badge d-flex align-items-center p-1 pe-2 text-dark-emphasis bg-dark-subtle border border-dark-subtle rounded-pill">
<img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt=""> <img class="rounded-circle me-1" width="24" height="24" src="https://github.com/mdo.png" alt="">
Dark Dark
<span class="vr mx-2"></span> <span class="vr mx-2"></span>
<a href="#"><svg class="bi" width="16" height="16"><use xlink:href="#x-circle-fill"/></svg></a> <a href="#" aria-label="Delete dark"><svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-circle-fill"/></svg></a>
</span> </span>
</div> </div>

4
site/content/docs/5.3/examples/blog-rtl/index.html
View File

@ -75,7 +75,7 @@ extra_css:
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
@ -92,7 +92,7 @@ extra_css:
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
أكمل القراءة أكمل القراءة
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">

4
site/content/docs/5.3/examples/blog/index.html
View File

@ -74,7 +74,7 @@ extra_css:
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">
@ -91,7 +91,7 @@ extra_css:
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p> <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="icon-link gap-1 icon-link-hover stretched-link"> <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
Continue reading Continue reading
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="col-auto d-none d-lg-block"> <div class="col-auto d-none d-lg-block">

6
site/content/docs/5.3/examples/breadcrumbs/index.html
View File

@ -29,7 +29,7 @@ body_class: ""
<ol class="breadcrumb p-3 bg-body-tertiary rounded-3"> <ol class="breadcrumb p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a class="link-body-emphasis" href="#"> <a class="link-body-emphasis" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span> <span class="visually-hidden">Home</span>
</a> </a>
</li> </li>
@ -50,7 +50,7 @@ body_class: ""
<ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3"> <ol class="breadcrumb breadcrumb-chevron p-3 bg-body-tertiary rounded-3">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a class="link-body-emphasis" href="#"> <a class="link-body-emphasis" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
<span class="visually-hidden">Home</span> <span class="visually-hidden">Home</span>
</a> </a>
</li> </li>
@ -71,7 +71,7 @@ body_class: ""
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3"> <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
<li class="breadcrumb-item"> <li class="breadcrumb-item">
<a class="link-body-emphasis fw-semibold text-decoration-none" href="#"> <a class="link-body-emphasis fw-semibold text-decoration-none" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#house-door-fill"></use></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#house-door-fill"></use></svg>
Home Home
</a> </a>
</li> </li>

8
site/content/docs/5.3/examples/buttons/index.html
View File

@ -65,22 +65,22 @@ body_class: ""
<div class="d-flex gap-2 justify-content-center pt-5 pb-4"> <div class="d-flex gap-2 justify-content-center pt-5 pb-4">
<button class="btn btn-primary rounded-circle p-2 lh-1" type="button"> <button class="btn btn-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
<button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button"> <button class="btn btn-outline-primary rounded-circle p-2 lh-1" type="button">
<svg class="bi" width="16" height="16"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
</div> </div>
<div class="d-flex gap-2 justify-content-center pb-5"> <div class="d-flex gap-2 justify-content-center pb-5">
<button class="btn btn-primary rounded-circle p-3 lh-1" type="button"> <button class="btn btn-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
<button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button"> <button class="btn btn-outline-primary rounded-circle p-3 lh-1" type="button">
<svg class="bi" width="24" height="24"><use xlink:href="#x-lg"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#x-lg"/></svg>
<span class="visually-hidden">Dismiss</span> <span class="visually-hidden">Dismiss</span>
</button> </button>
</div> </div>

32
site/content/docs/5.3/examples/dashboard-rtl/index.html
View File

@ -68,12 +68,12 @@ extra_js:
<ul class="navbar-nav flex-row d-md-none"> <ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="تبديل البحث">
<svg class="bi"><use xlink:href="#search"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
</button> </button>
</li> </li>
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
<svg class="bi"><use xlink:href="#list"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
</button> </button>
</li> </li>
</ul> </ul>
@ -95,37 +95,37 @@ extra_js:
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#"> <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<svg class="bi"><use xlink:href="#house-fill"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
لوحة القيادة لوحة القيادة
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
الطلبات الطلبات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#cart"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
المنتجات المنتجات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#people"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
الزبائن الزبائن
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#graph-up"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
التقارير التقارير
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#puzzle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
التكاملات التكاملات
</a> </a>
</li> </li>
@ -134,31 +134,31 @@ extra_js:
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>التقارير المحفوظة</span> <span>التقارير المحفوظة</span>
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد"> <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
<svg class="bi"><use xlink:href="#plus-circle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
الشهر الحالي الشهر الحالي
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
الربع الأخير الربع الأخير
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
التفاعل الإجتماعي التفاعل الإجتماعي
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
مبيعات نهاية العام مبيعات نهاية العام
</a> </a>
</li> </li>
@ -169,13 +169,13 @@ extra_js:
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
إعدادات إعدادات
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
خروج خروج
</a> </a>
</li> </li>
@ -193,7 +193,7 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button> <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<svg class="bi"><use xlink:href="#calendar3"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
هذا الأسبوع هذا الأسبوع
</button> </button>
</div> </div>

32
site/content/docs/5.3/examples/dashboard/index.html
View File

@ -67,12 +67,12 @@ extra_js:
<ul class="navbar-nav flex-row d-md-none"> <ul class="navbar-nav flex-row d-md-none">
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false" aria-label="Toggle search">
<svg class="bi"><use xlink:href="#search"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#search"/></svg>
</button> </button>
</li> </li>
<li class="nav-item text-nowrap"> <li class="nav-item text-nowrap">
<button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"> <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<svg class="bi"><use xlink:href="#list"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#list"/></svg>
</button> </button>
</li> </li>
</ul> </ul>
@ -94,37 +94,37 @@ extra_js:
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#"> <a class="nav-link d-flex align-items-center gap-2 active" aria-current="page" href="#">
<svg class="bi"><use xlink:href="#house-fill"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#house-fill"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#cart"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#cart"/></svg>
Products Products
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#people"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#people"/></svg>
Customers Customers
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#graph-up"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#graph-up"/></svg>
Reports Reports
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#puzzle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#puzzle"/></svg>
Integrations Integrations
</a> </a>
</li> </li>
@ -133,31 +133,31 @@ extra_js:
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>Saved reports</span> <span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report"> <a class="link-secondary" href="#" aria-label="Add a new report">
<svg class="bi"><use xlink:href="#plus-circle"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#plus-circle"/></svg>
</a> </a>
</h6> </h6>
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Current month Current month
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Last quarter Last quarter
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Social engagement Social engagement
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#file-earmark-text"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#file-earmark-text"/></svg>
Year-end sale Year-end sale
</a> </a>
</li> </li>
@ -168,13 +168,13 @@ extra_js:
<ul class="nav flex-column mb-auto"> <ul class="nav flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#gear-wide-connected"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#gear-wide-connected"/></svg>
Settings Settings
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link d-flex align-items-center gap-2" href="#"> <a class="nav-link d-flex align-items-center gap-2" href="#">
<svg class="bi"><use xlink:href="#door-closed"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#door-closed"/></svg>
Sign out Sign out
</a> </a>
</li> </li>
@ -192,7 +192,7 @@ extra_js:
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button> <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div> </div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1"> <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1">
<svg class="bi"><use xlink:href="#calendar3"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
This week This week
</button> </button>
</div> </div>

40
site/content/docs/5.3/examples/dropdowns/index.html
View File

@ -124,38 +124,38 @@ body_class: ""
<ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light"> <ul class="dropdown-menu d-block position-static mx-0 shadow w-220px" data-bs-theme="light">
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
Documents Documents
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
Photos Photos
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
Movies Movies
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
Music Music
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
Games Games
</a> </a>
</li> </li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li> <li>
<a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
Trash Trash
</a> </a>
</li> </li>
@ -163,38 +163,38 @@ body_class: ""
<ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark"> <ul class="dropdown-menu d-block position-static mx-0 border-0 shadow w-220px" data-bs-theme="dark">
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#files"/></svg>
Documents Documents
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
Photos Photos
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#film"/></svg>
Movies Movies
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
Music Music
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#joystick"/></svg>
Games Games
</a> </a>
</li> </li>
<li><hr class="dropdown-divider"></li> <li><hr class="dropdown-divider"></li>
<li> <li>
<a class="dropdown-item d-flex gap-2 align-items-center" href="#"> <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
<svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#trash"/></svg>
Trash Trash
</a> </a>
</li> </li>
@ -209,7 +209,7 @@ body_class: ""
<div class="cal"> <div class="cal">
<div class="cal-month"> <div class="cal-month">
<button class="btn cal-btn" type="button" aria-label="previous month"> <button class="btn cal-btn" type="button" aria-label="previous month">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
</button> </button>
<strong class="cal-month-name">June</strong> <strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none"> <select class="form-select cal-month-name d-none">
@ -288,7 +288,7 @@ body_class: ""
<div class="cal"> <div class="cal">
<div class="cal-month"> <div class="cal-month">
<button class="btn cal-btn" type="button" aria-label="previous month"> <button class="btn cal-btn" type="button" aria-label="previous month">
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg> <svg class="bi" width="16" height="16" aria-hidden="true"><use xlink:href="#arrow-left-short"/></svg>
</button> </button>
<strong class="cal-month-name">June</strong> <strong class="cal-month-name">June</strong>
<select class="form-select cal-month-name d-none"> <select class="form-select cal-month-name d-none">
@ -371,7 +371,7 @@ body_class: ""
<ul class="list-unstyled d-flex flex-column gap-2"> <ul class="list-unstyled d-flex flex-column gap-2">
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
<div> <div>
<strong class="d-block">Main product</strong> <strong class="d-block">Main product</strong>
<small>Take a tour through the product</small> <small>Take a tour through the product</small>
@ -380,7 +380,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
<div> <div>
<strong class="d-block">Another product</strong> <strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small> <small>Explore this other product we offer</small>
@ -389,7 +389,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
<div> <div>
<strong class="d-block">Support</strong> <strong class="d-block">Support</strong>
<small>Get help from our support crew</small> <small>Get help from our support crew</small>
@ -418,7 +418,7 @@ body_class: ""
<ul class="list-unstyled d-flex flex-column gap-2"> <ul class="list-unstyled d-flex flex-column gap-2">
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#image-fill"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#image-fill"/></svg>
<div> <div>
<strong class="d-block">Main product</strong> <strong class="d-block">Main product</strong>
<small>Take a tour through the product</small> <small>Take a tour through the product</small>
@ -427,7 +427,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#music-note-beamed"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#music-note-beamed"/></svg>
<div> <div>
<strong class="d-block">Another product</strong> <strong class="d-block">Another product</strong>
<small>Explore this other product we offer</small> <small>Explore this other product we offer</small>
@ -436,7 +436,7 @@ body_class: ""
</li> </li>
<li> <li>
<a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start"> <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-start gap-2 py-2 px-3 lh-sm text-start">
<svg class="bi" width="24" height="24"><use xlink:href="#question-circle"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#question-circle"/></svg>
<div> <div>
<strong class="d-block">Support</strong> <strong class="d-block">Support</strong>
<small>Get help from our support crew</small> <small>Get help from our support crew</small>

54
site/content/docs/5.3/examples/features/index.html
View File

@ -66,35 +66,35 @@ body_class: ""
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="feature col"> <div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#collection"/></svg>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="feature col"> <div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
<div class="feature col"> <div class="feature col">
<div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
</div> </div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
<a href="#" class="icon-link"> <a href="#" class="icon-link">
Call to action Call to action
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
</div> </div>
@ -107,7 +107,7 @@ body_class: ""
<div class="row g-4 py-5 row-cols-1 row-cols-lg-3"> <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@ -119,7 +119,7 @@ body_class: ""
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@ -131,7 +131,7 @@ body_class: ""
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"> <div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3">
<svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> <svg class="bi" width="1em" height="1em" aria-hidden="true"><use xlink:href="#tools"/></svg>
</div> </div>
<div> <div>
<h3 class="fs-2 text-body-emphasis">Featured title</h3> <h3 class="fs-2 text-body-emphasis">Featured title</h3>
@ -159,11 +159,11 @@ body_class: ""
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li> </li>
<li class="d-flex align-items-center me-3"> <li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>Earth</small> <small>Earth</small>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>3d</small> <small>3d</small>
</li> </li>
</ul> </ul>
@ -180,11 +180,11 @@ body_class: ""
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li> </li>
<li class="d-flex align-items-center me-3"> <li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>Pakistan</small> <small>Pakistan</small>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>4d</small> <small>4d</small>
</li> </li>
</ul> </ul>
@ -201,11 +201,11 @@ body_class: ""
<img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
</li> </li>
<li class="d-flex align-items-center me-3"> <li class="d-flex align-items-center me-3">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Location"><use xlink:href="#geo-fill"/></svg>
<small>California</small> <small>California</small>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg> <svg class="bi me-2" width="1em" height="1em" role="img" aria-label="Duration"><use xlink:href="#calendar3"/></svg>
<small>5d</small> <small>5d</small>
</li> </li>
</ul> </ul>
@ -222,56 +222,56 @@ body_class: ""
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#cpu-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#calendar3"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#home"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#toggles2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#geo-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use xlink:href="#tools"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3> <h3 class="fw-bold mb-0 fs-4 text-body-emphasis">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
@ -296,7 +296,7 @@ body_class: ""
<div class="row row-cols-1 row-cols-sm-2 g-4"> <div class="row row-cols-1 row-cols-sm-2 g-4">
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#collection" /> <use xlink:href="#collection" />
</svg> </svg>
</div> </div>
@ -306,7 +306,7 @@ body_class: ""
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#gear-fill" /> <use xlink:href="#gear-fill" />
</svg> </svg>
</div> </div>
@ -316,7 +316,7 @@ body_class: ""
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#speedometer" /> <use xlink:href="#speedometer" />
</svg> </svg>
</div> </div>
@ -326,7 +326,7 @@ body_class: ""
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
<div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> <div class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3">
<svg class="bi" width="1em" height="1em"> <svg class="bi" width="1em" height="1em" aria-hidden="true">
<use xlink:href="#table" /> <use xlink:href="#table" />
</svg> </svg>
</div> </div>

24
site/content/docs/5.3/examples/footers/index.html
View File

@ -24,8 +24,8 @@ body_class: ""
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p> <p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p>
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="nav col-md-4 justify-content-end"> <ul class="nav col-md-4 justify-content-end">
@ -43,16 +43,16 @@ body_class: ""
<div class="container"> <div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center"> <div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1"> <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1" aria-label="Bootstrap">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span> <span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span>
</div> </div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex"> <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul> </ul>
</footer> </footer>
</div> </div>
@ -77,8 +77,8 @@ body_class: ""
<div class="container"> <div class="container">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top"> <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3"> <div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none" aria-label="Bootstrap">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<p class="text-body-secondary">&copy; {{< year >}}</p> <p class="text-body-secondary">&copy; {{< year >}}</p>
</div> </div>
@ -177,9 +177,9 @@ body_class: ""
<div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top"> <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
<p>&copy; {{< year >}} Company, Inc. All rights reserved.</p> <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
<ul class="list-unstyled d-flex"> <ul class="list-unstyled d-flex">
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Twitter"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Instagram"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="link-body-emphasis" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> <li class="ms-3"><a class="link-body-emphasis" href="#" aria-label="Facebook"><svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#facebook"/></svg></a></li>
</ul> </ul>
</div> </div>
</footer> </footer>

18
site/content/docs/5.3/examples/headers/index.html
View File

@ -36,7 +36,7 @@ body_class: ""
<div class="container"> <div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"> <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Simple header</span> <span class="fs-4">Simple header</span>
</a> </a>
@ -159,8 +159,8 @@ body_class: ""
<header class="py-3 mb-3 border-bottom"> <header class="py-3 mb-3 border-bottom">
<div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;"> <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
<div class="dropdown"> <div class="dropdown">
<a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-body-emphasis text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Bootstrap menu">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="dropdown-menu text-small shadow"> <ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li> <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
@ -225,7 +225,7 @@ body_class: ""
<header class="py-3 mb-4 border-bottom"> <header class="py-3 mb-4 border-bottom">
<div class="container d-flex flex-wrap justify-content-center"> <div class="container d-flex flex-wrap justify-content-center">
<a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Double header</span> <span class="fs-4">Double header</span>
</a> </a>
<form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search"> <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
@ -247,31 +247,31 @@ body_class: ""
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small"> <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li> <li>
<a href="#" class="nav-link text-secondary"> <a href="#" class="nav-link text-secondary">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products Products
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg> <svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers Customers
</a> </a>
</li> </li>

4
site/content/docs/5.3/examples/jumbotrons/index.html
View File

@ -22,7 +22,7 @@ body_class: ""
<div class="container my-5"> <div class="container my-5">
<div class="p-5 text-center bg-body-tertiary rounded-3"> <div class="p-5 text-center bg-body-tertiary rounded-3">
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100"><use xlink:href="#bootstrap"/></svg> <svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<h1 class="text-body-emphasis">Jumbotron with icon</h1> <h1 class="text-body-emphasis">Jumbotron with icon</h1>
<p class="col-lg-8 mx-auto fs-5 text-muted"> <p class="col-lg-8 mx-auto fs-5 text-muted">
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action. This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
@ -44,7 +44,7 @@ body_class: ""
<div class="container my-5"> <div class="container my-5">
<div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5"> <div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
<button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button> <button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
<svg class="bi mt-5 mb-3" width="48" height="48"><use xlink:href="#check2-circle"/></svg> <svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
<h1 class="text-body-emphasis">Placeholder jumbotron</h1> <h1 class="text-body-emphasis">Placeholder jumbotron</h1>
<p class="col-lg-6 mx-auto mb-4"> <p class="col-lg-6 mx-auto mb-4">
This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action. This faded back jumbotron is useful for placeholder content. It's also a great way to add a bit of context to a page or section when no content is available and to encourage visitors to take a specific action.

14
site/content/docs/5.3/examples/list-groups/index.html
View File

@ -25,7 +25,7 @@ body_class: ""
<div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center"> <div class="d-flex flex-column flex-md-row p-4 gap-4 py-md-5 align-items-center justify-content-center">
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between"> <div class="d-flex gap-2 w-100 justify-content-between">
<div> <div>
<h6 class="mb-0">List group item heading</h6> <h6 class="mb-0">List group item heading</h6>
@ -35,7 +35,7 @@ body_class: ""
</div> </div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between"> <div class="d-flex gap-2 w-100 justify-content-between">
<div> <div>
<h6 class="mb-0">Another title here</h6> <h6 class="mb-0">Another title here</h6>
@ -45,7 +45,7 @@ body_class: ""
</div> </div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true"> <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
<img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0"> <img src="https://github.com/twbs.png" alt="" width="32" height="32" class="rounded-circle flex-shrink-0">
<div class="d-flex gap-2 w-100 justify-content-between"> <div class="d-flex gap-2 w-100 justify-content-between">
<div> <div>
<h6 class="mb-0">Third heading</h6> <h6 class="mb-0">Third heading</h6>
@ -118,7 +118,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Finish sales report</strong> <strong>Finish sales report</strong>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
1:00–2:00pm 1:00–2:00pm
</small> </small>
</span> </span>
@ -128,7 +128,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Weekly All Hands</strong> <strong>Weekly All Hands</strong>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Schedule"><use xlink:href="#calendar-event"/></svg>
2:00–2:30pm 2:00–2:30pm
</small> </small>
</span> </span>
@ -138,7 +138,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Out of office</strong> <strong>Out of office</strong>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg> <svg class="bi me-1" width="1em" height="1em" role="img" aria-label="Reminder"><use xlink:href="#alarm"/></svg>
Tomorrow Tomorrow
</small> </small>
</span> </span>
@ -148,7 +148,7 @@ body_class: ""
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span> <span contenteditable="true" class="w-100">Add new task...</span>
<small class="d-block text-body-secondary"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg> <svg class="bi me-1" width="1em" height="1em" aria-hidden="true"><use xlink:href="#list-check"/></svg>
Choose list... Choose list...
</small> </small>
</span> </span>

12
site/content/docs/5.3/examples/modals/index.html
View File

@ -78,21 +78,21 @@ body_class: ""
<ul class="d-grid gap-4 my-5 list-unstyled small"> <ul class="d-grid gap-4 my-5 list-unstyled small">
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#grid-fill"/></svg>
<div> <div>
<h5 class="mb-0">Grid view</h5> <h5 class="mb-0">Grid view</h5>
Not into lists? Try the new grid view. Not into lists? Try the new grid view.
</div> </div>
</li> </li>
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg> <svg class="bi text-warning flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#bookmark-star"/></svg>
<div> <div>
<h5 class="mb-0">Bookmarks</h5> <h5 class="mb-0">Bookmarks</h5>
Save items you love for easy access later. Save items you love for easy access later.
</div> </div>
</li> </li>
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg> <svg class="bi text-primary flex-shrink-0" width="48" height="48" aria-hidden="true"><use xlink:href="#film"/></svg>
<div> <div>
<h5 class="mb-0">Video embeds</h5> <h5 class="mb-0">Video embeds</h5>
Share videos wherever you go. Share videos wherever you go.
@ -130,15 +130,15 @@ body_class: ""
<hr class="my-4"> <hr class="my-4">
<h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2> <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg> <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#twitter"/></svg>
Sign up with Twitter Sign up with Twitter
</button> </button>
<button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg> <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#facebook"/></svg>
Sign up with Facebook Sign up with Facebook
</button> </button>
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">
<svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg> <svg class="bi me-1" width="16" height="16" aria-hidden="true"><use xlink:href="#github"/></svg>
Sign up with GitHub Sign up with GitHub
</button> </button>
</form> </form>

26
site/content/docs/5.3/examples/pricing/index.html
View File

@ -104,42 +104,42 @@ extra_css:
<tbody> <tbody>
<tr> <tr>
<th scope="row" class="text-start">Public</th> <th scope="row" class="text-start">Public</th>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Private</th> <th scope="row" class="text-start">Private</th>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
</tbody> </tbody>
<tbody> <tbody>
<tr> <tr>
<th scope="row" class="text-start">Permissions</th> <th scope="row" class="text-start">Permissions</th>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Sharing</th> <th scope="row" class="text-start">Sharing</th>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Unlimited members</th> <th scope="row" class="text-start">Unlimited members</th>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
<tr> <tr>
<th scope="row" class="text-start">Extra security</th> <th scope="row" class="text-start">Extra security</th>
<td></td> <td></td>
<td></td> <td></td>
<td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td> <td><svg class="bi" width="24" height="24" role="img" aria-label="Included"><use xlink:href="#check"/></svg></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

14
site/content/docs/5.3/examples/product/index.html
View File

@ -21,7 +21,7 @@ extra_css:
<nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark"> <nav class="navbar navbar-expand-md bg-dark sticky-top border-bottom" data-bs-theme="dark">
<div class="container"> <div class="container">
<a class="navbar-brand d-md-none" href="#"> <a class="navbar-brand d-md-none" href="#">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
Aperture Aperture
</a> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
@ -34,8 +34,8 @@ extra_css:
</div> </div>
<div class="offcanvas-body"> <div class="offcanvas-body">
<ul class="navbar-nav flex-grow-1 justify-content-between"> <ul class="navbar-nav flex-grow-1 justify-content-between">
<li class="nav-item"><a class="nav-link" href="#"> <li class="nav-item"><a class="nav-link" href="#" aria-label="Aperture">
<svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#aperture"/></svg>
</a></li> </a></li>
<li class="nav-item"><a class="nav-link" href="#">Tour</a></li> <li class="nav-item"><a class="nav-link" href="#">Tour</a></li>
<li class="nav-item"><a class="nav-link" href="#">Product</a></li> <li class="nav-item"><a class="nav-link" href="#">Product</a></li>
@ -43,8 +43,8 @@ extra_css:
<li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li> <li class="nav-item"><a class="nav-link" href="#">Enterprise</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li> <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li> <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#"> <li class="nav-item"><a class="nav-link" href="#" aria-label="Cart">
<svg class="bi" width="24" height="24"><use xlink:href="#cart"/></svg> <svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#cart"/></svg>
</a></li> </a></li>
</ul> </ul>
</div> </div>
@ -60,11 +60,11 @@ extra_css:
<div class="d-flex gap-3 justify-content-center lead fw-normal"> <div class="d-flex gap-3 justify-content-center lead fw-normal">
<a class="icon-link" href="#"> <a class="icon-link" href="#">
Learn more Learn more
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
<a class="icon-link" href="#"> <a class="icon-link" href="#">
Buy Buy
<svg class="bi"><use xlink:href="#chevron-right"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#chevron-right"/></svg>
</a> </a>
</div> </div>
</div> </div>

30
site/content/docs/5.3/examples/sidebars/index.html
View File

@ -38,38 +38,38 @@ body_class: ""
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;"> <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
</a> </a>
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active" aria-current="page"> <a href="#" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products Products
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link text-white"> <a href="#" class="nav-link text-white">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers Customers
</a> </a>
</li> </li>
@ -94,38 +94,38 @@ body_class: ""
<div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;"> <div class="d-flex flex-column flex-shrink-0 p-3 bg-body-tertiary" style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Sidebar</span> <span class="fs-4">Sidebar</span>
</a> </a>
<hr> <hr>
<ul class="nav nav-pills flex-column mb-auto"> <ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#" class="nav-link active" aria-current="page"> <a href="#" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#home"/></svg>
Home Home
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#speedometer2"/></svg>
Dashboard Dashboard
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#table"/></svg>
Orders Orders
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#grid"/></svg>
Products Products
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="nav-link link-body-emphasis"> <a href="#" class="nav-link link-body-emphasis">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg> <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use xlink:href="#people-circle"/></svg>
Customers Customers
</a> </a>
</li> </li>
@ -150,7 +150,7 @@ body_class: ""
<div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;"> <div class="d-flex flex-column flex-shrink-0 bg-body-tertiary" style="width: 4.5rem;">
<a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right"> <a href="/" class="d-block p-3 link-body-emphasis text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
<svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none" width="40" height="32" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="visually-hidden">Icon-only</span> <span class="visually-hidden">Icon-only</span>
</a> </a>
<ul class="nav nav-pills nav-flush flex-column mb-auto text-center"> <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
@ -198,7 +198,7 @@ body_class: ""
<div class="flex-shrink-0 p-3" style="width: 280px;"> <div class="flex-shrink-0 p-3" style="width: 280px;">
<a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center pb-3 mb-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">Collapsible</span> <span class="fs-5 fw-semibold">Collapsible</span>
</a> </a>
<ul class="list-unstyled ps-0"> <ul class="list-unstyled ps-0">
@ -261,7 +261,7 @@ body_class: ""
<div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;"> <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-body-tertiary" style="width: 380px;">
<a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom"> <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
<svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi pe-none me-2" width="30" height="24" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<span class="fs-5 fw-semibold">List group</span> <span class="fs-5 fw-semibold">List group</span>
</a> </a>
<div class="list-group list-group-flush border-bottom scrollarea"> <div class="list-group list-group-flush border-bottom scrollarea">

2
site/content/docs/5.3/examples/starter-template/index.html
View File

@ -16,7 +16,7 @@ title: Starter Template
<div class="col-lg-8 mx-auto p-4 py-md-5"> <div class="col-lg-8 mx-auto p-4 py-md-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom"> <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
<span class="fs-4">Starter template</span> <span class="fs-4">Starter template</span>
</a> </a>
</header> </header>

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" >}} 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 ### 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): 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/getting-started/javascript.md
View File

@ -24,7 +24,7 @@ A better alternative for those using this type of frameworks is to use a framewo
{{< /callout >}} {{< /callout >}}
- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4) - Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4)
- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha) - Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha)
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) - Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) or [ngx-bootstrap](https://valor-software.com/ngx-bootstrap)
## Using Bootstrap as a module ## Using Bootstrap as a module

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. - 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" >}}). - <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"; @import "bootstrap/scss/utilities";
$utilities: map-merge( $utilities: map-merge(
$utilities, ( $utilities,
(
"border": map-merge( "border": map-merge(
map-get($utilities, "border"), map-get($utilities, "border"),
( responsive: true ), ( responsive: true ),
@ -508,7 +509,8 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca
@import "bootstrap/scss/utilities"; @import "bootstrap/scss/utilities";
$utilities: map-merge( $utilities: map-merge(
$utilities, ( $utilities,
(
"margin-start": map-merge( "margin-start": map-merge(
map-get($utilities, "margin-start"), map-get($utilities, "margin-start"),
( class: ml ), ( class: ml ),
@ -574,13 +576,11 @@ $utilities: map-merge(
( (
// Remove the `width` utility // Remove the `width` utility
"width": null, "width": null,
// Make an existing utility responsive // Make an existing utility responsive
"border": map-merge( "border": map-merge(
map-get($utilities, "border"), map-get($utilities, "border"),
( responsive: true ), ( responsive: true ),
), ),
// Add new utilities // Add new utilities
"cursor": ( "cursor": (
property: cursor, property: cursor,

2
site/content/docs/5.3/utilities/display.md
View File

@ -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 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 >}} {{< bs-table >}}
| Screen size | Class | | Screen size | Class |

2
site/content/docs/5.3/utilities/position.md
View File

@ -94,7 +94,7 @@ Here are some real life examples of these classes:
</button> </button>
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill"> <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> </div>
<button type="button" class="btn btn-primary position-relative"> <button type="button" class="btn btn-primary position-relative">

2
site/layouts/partials/docs-versions.html
View File

@ -23,7 +23,7 @@
<li> <li>
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}"> <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
Latest ({{ .Site.Params.docs_version }}.x) Latest ({{ .Site.Params.docs_version }}.x)
<svg class="bi"><use xlink:href="#check2"></use></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#check2"></use></svg>
</a> </a>
</li> </li>
<li> <li>

2
site/layouts/partials/icons/hamburger.svg
View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 428 B

After

Width:  |  Height:  |  Size: 447 B

14
site/layouts/partials/theme-toggler.html
View File

@ -6,29 +6,29 @@
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
{{ if not $isExamples }}data-bs-display="static"{{ end }} {{ if not $isExamples }}data-bs-display="static"{{ end }}
aria-label="Toggle theme (auto)"> aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active"><use href="#circle-half"></use></svg> <svg class="bi my-1 theme-icon-active" aria-hidden="true"><use href="#circle-half"></use></svg>
<span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span> <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle theme</span>
</button> </button>
<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text"> <ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ end }}" aria-labelledby="bd-theme-text">
<li> <li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50"><use href="#sun-fill"></use></svg> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#sun-fill"></use></svg>
Light Light
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
<li> <li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50"><use href="#moon-stars-fill"></use></svg> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#moon-stars-fill"></use></svg>
Dark Dark
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
<li> <li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50"><use href="#circle-half"></use></svg> <svg class="bi me-2 opacity-50" aria-hidden="true"><use href="#circle-half"></use></svg>
Auto Auto
<svg class="bi ms-auto d-none"><use href="#check2"></use></svg> <svg class="bi ms-auto d-none" aria-hidden="true"><use href="#check2"></use></svg>
</button> </button>
</li> </li>
</ul> </ul>