Mirrors/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-12-28 05:33:57 +00:00
Code Issues Actions 23 Packages Projects Releases Wiki Activity

Merge branch 'main' into tobiasnitsche-table-hover-focus

Browse Source
This commit is contained in:
tobiasnitsche 2023-07-25 15:59:44 +02:00 committed by GitHub
commit cbb533b8fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
56 changed files with 2044 additions and 1212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.bundlewatch.config.json
View File

@ -38,7 +38,7 @@
},
{
"path": "./dist/js/bootstrap.bundle.min.js",
"maxSize": "23.15 kB"
"maxSize": "23.25 kB"
},
{
"path": "./dist/js/bootstrap.esm.js",
@ -54,7 +54,7 @@
},
{
"path": "./dist/js/bootstrap.min.js",
"maxSize": "16.1 kB"
"maxSize": "16.25 kB"
}
],
"ci": {

16
js/src/tab.js
View File

@ -30,6 +30,8 @@ const ARROW_LEFT_KEY = 'ArrowLeft'
const ARROW_RIGHT_KEY = 'ArrowRight'
const ARROW_UP_KEY = 'ArrowUp'
const ARROW_DOWN_KEY = 'ArrowDown'
const HOME_KEY = 'Home'
const END_KEY = 'End'
const CLASS_NAME_ACTIVE = 'active'
const CLASS_NAME_FADE = 'fade'
@ -151,14 +153,22 @@ class Tab extends BaseComponent {
}
_keydown(event) {
if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key))) {
if (!([ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key))) {
return
}
event.stopPropagation()// stopPropagation/preventDefault both added to support up/down keys without scrolling the page
event.preventDefault()
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
const nextActiveElement = getNextActiveElement(this._getChildren().filter(element => !isDisabled(element)), event.target, isNext, true)
const children = this._getChildren().filter(element => !isDisabled(element))
let nextActiveElement
if ([HOME_KEY, END_KEY].includes(event.key)) {
nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1]
} else {
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
nextActiveElement = getNextActiveElement(children, event.target, isNext, true)
}
if (nextActiveElement) {
nextActiveElement.focus({ preventScroll: true })

112
js/tests/unit/tab.spec.js
View File

@ -630,6 +630,58 @@ describe('Tab', () => {
expect(spyPrevent).toHaveBeenCalledTimes(2)
})
it('if keydown event is Home, handle it', () => {
fixtureEl.innerHTML = [
'<div class="nav">',
' <span id="tab1" class="nav-link" data-bs-toggle="tab"></span>',
' <span id="tab2" class="nav-link" data-bs-toggle="tab"></span>',
' <span id="tab3" class="nav-link" data-bs-toggle="tab"></span>',
'</div>'
].join('')
const tabEl1 = fixtureEl.querySelector('#tab1')
const tabEl3 = fixtureEl.querySelector('#tab3')
const tab3 = new Tab(tabEl3)
tab3.show()
const spyShown = jasmine.createSpy()
tabEl1.addEventListener('shown.bs.tab', spyShown)
const keydown = createEvent('keydown')
keydown.key = 'Home'
tabEl3.dispatchEvent(keydown)
expect(spyShown).toHaveBeenCalled()
})
it('if keydown event is End, handle it', () => {
fixtureEl.innerHTML = [
'<div class="nav">',
' <span id="tab1" class="nav-link" data-bs-toggle="tab"></span>',
' <span id="tab2" class="nav-link" data-bs-toggle="tab"></span>',
' <span id="tab3" class="nav-link" data-bs-toggle="tab"></span>',
'</div>'
].join('')
const tabEl1 = fixtureEl.querySelector('#tab1')
const tabEl3 = fixtureEl.querySelector('#tab3')
const tab1 = new Tab(tabEl1)
tab1.show()
const spyShown = jasmine.createSpy()
tabEl3.addEventListener('shown.bs.tab', spyShown)
const keydown = createEvent('keydown')
keydown.key = 'End'
tabEl1.dispatchEvent(keydown)
expect(spyShown).toHaveBeenCalled()
})
it('if keydown event is right arrow and next element is disabled', () => {
fixtureEl.innerHTML = [
'<div class="nav">',
@ -711,6 +763,66 @@ describe('Tab', () => {
expect(spyFocus2).not.toHaveBeenCalled()
expect(spyFocus1).toHaveBeenCalledTimes(1)
})
it('if keydown event is Home and first element is disabled', () => {
fixtureEl.innerHTML = [
'<div class="nav">',
' <span id="tab1" class="nav-link disabled" data-bs-toggle="tab" disabled></span>',
' <span id="tab2" class="nav-link" data-bs-toggle="tab"></span>',
' <span id="tab3" class="nav-link" data-bs-toggle="tab"></span>',
'</div>'
].join('')
const tabEl1 = fixtureEl.querySelector('#tab1')
const tabEl2 = fixtureEl.querySelector('#tab2')
const tabEl3 = fixtureEl.querySelector('#tab3')
const tab3 = new Tab(tabEl3)
tab3.show()
const spyShown1 = jasmine.createSpy()
const spyShown2 = jasmine.createSpy()
tabEl1.addEventListener('shown.bs.tab', spyShown1)
tabEl2.addEventListener('shown.bs.tab', spyShown2)
const keydown = createEvent('keydown')
keydown.key = 'Home'
tabEl3.dispatchEvent(keydown)
expect(spyShown1).not.toHaveBeenCalled()
expect(spyShown2).toHaveBeenCalled()
})
it('if keydown event is End and last element is disabled', () => {
fixtureEl.innerHTML = [
'<div class="nav">',
' <span id="tab1" class="nav-link" data-bs-toggle="tab"></span>',
' <span id="tab2" class="nav-link" data-bs-toggle="tab"></span>',
' <span id="tab3" class="nav-link" data-bs-toggle="tab" disabled></span>',
'</div>'
].join('')
const tabEl1 = fixtureEl.querySelector('#tab1')
const tabEl2 = fixtureEl.querySelector('#tab2')
const tabEl3 = fixtureEl.querySelector('#tab3')
const tab1 = new Tab(tabEl1)
tab1.show()
const spyShown2 = jasmine.createSpy()
const spyShown3 = jasmine.createSpy()
tabEl2.addEventListener('shown.bs.tab', spyShown2)
tabEl3.addEventListener('shown.bs.tab', spyShown3)
const keydown = createEvent('keydown')
keydown.key = 'End'
tabEl1.dispatchEvent(keydown)
expect(spyShown3).not.toHaveBeenCalled()
expect(spyShown2).toHaveBeenCalled()
})
})
describe('jQueryInterface', () => {

4
js/tests/visual/tab.html
View File

@ -161,12 +161,12 @@
<h4>Tabs with nav and using links (with fade)</h4>
<nav>
<div class="nav nav-pills" id="nav-tab" role="tablist">
<div class="nav nav-pills" id="nav-tab" role="tablist">
<a class="nav-link nav-item active" role="tab" data-bs-toggle="tab" href="#home5">Home</a>
<a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#profile5">Profile</a>
<a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#fat5">@fat</a>
<a class="nav-link nav-item" role="tab" data-bs-toggle="tab" href="#mdo5">@mdo</a>
<a class="nav-link nav-item disabled" role="tab" href="#">Disabled</a>
<a class="nav-link nav-item disabled" role="tab" href="#" aria-disabled="true">Disabled</a>
</div>
</nav>

2710
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

32
package.json
View File

@ -103,28 +103,28 @@
"@popperjs/core": "^2.11.8"
},
"devDependencies": {
"@babel/cli": "^7.22.5",
"@babel/core": "^7.22.5",
"@babel/preset-env": "^7.22.5",
"@babel/cli": "^7.22.9",
"@babel/core": "^7.22.9",
"@babel/preset-env": "^7.22.9",
"@popperjs/core": "^2.11.8",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^25.0.2",
"@rollup/plugin-commonjs": "^25.0.3",
"@rollup/plugin-node-resolve": "^15.1.0",
"@rollup/plugin-replace": "^5.0.2",
"autoprefixer": "^10.4.14",
"bundlewatch": "^0.3.3",
"clean-css-cli": "^5.6.2",
"cross-env": "^7.0.3",
"eslint": "^8.43.0",
"eslint": "^8.45.0",
"eslint-config-xo": "^0.43.1",
"eslint-plugin-html": "^7.1.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-markdown": "^3.0.0",
"eslint-plugin-unicorn": "^47.0.0",
"eslint-plugin-unicorn": "^48.0.0",
"find-unused-sass-variables": "^5.0.0",
"globby": "^11.1.0",
"hammer-simulator": "0.0.1",
"hugo-bin": "^0.110.1",
"hugo-bin": "^0.111.4",
"ip": "^2.0.0",
"jasmine": "^4.6.0",
"jquery": "^3.7.0",
@ -137,20 +137,20 @@
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"karma-rollup-preprocessor": "7.0.7",
"lockfile-lint": "^4.10.5",
"nodemon": "^2.0.22",
"npm-run-all2": "^6.0.5",
"postcss": "^8.4.24",
"lockfile-lint": "^4.10.6",
"nodemon": "^3.0.1",
"npm-run-all2": "^6.0.6",
"postcss": "^8.4.27",
"postcss-cli": "^10.1.0",
"rollup": "^3.25.3",
"rollup": "^3.26.3",
"rollup-plugin-istanbul": "^4.0.0",
"rtlcss": "^4.1.0",
"sass": "^1.63.6",
"sass": "^1.64.1",
"sass-true": "^7.0.0",
"shelljs": "^0.8.5",
"stylelint": "^15.9.0",
"stylelint-config-twbs-bootstrap": "^10.0.0",
"terser": "^5.18.1",
"stylelint": "^15.10.2",
"stylelint-config-twbs-bootstrap": "^11.0.1",
"terser": "^5.19.2",
"vnu-jar": "23.4.11"
},
"files": [

8
scss/_reboot.scss
View File

@ -524,15 +524,15 @@ legend {
height: auto;
}
// 1. Correct the outline style in Safari.
// 2. This overrides the extra rounded corners on search inputs in iOS so that our
// 1. This overrides the extra rounded corners on search inputs in iOS so that our
// `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
// 2. Correct the outline style in Safari.
[type="search"] {
outline-offset: -2px; // 1
-webkit-appearance: textfield; // 2
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
}
// 1. A few input types should stay LTR

4
scss/_variables.scss
View File

@ -705,6 +705,10 @@ $hr-border-color: null !default; // Allows for inherited colors
$hr-border-width: var(--#{$prefix}border-width) !default;
$hr-opacity: .25 !default;
// scss-docs-start vr-variables
$vr-border-width: var(--#{$prefix}border-width) !default;
// scss-docs-end vr-variables
$legend-margin-bottom: .5rem !default;
$legend-font-size: 1.5rem !default;
$legend-font-weight: null !default;

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

@ -84,7 +84,8 @@
}
}
> :disabled ~ label {
> :disabled ~ label,
> .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
color: $form-floating-label-disabled-color;
&::after {

2
scss/forms/_form-check.scss
View File

@ -33,13 +33,13 @@
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
vertical-align: top;
appearance: none;
background-color: var(--#{$prefix}form-check-bg);
background-image: var(--#{$prefix}form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: $form-check-input-border;
appearance: none;
print-color-adjust: exact; // Keep themed appearance for print
@include transition($form-check-transition);

2
scss/forms/_form-control.scss
View File

@ -11,10 +11,10 @@
font-weight: $input-font-weight;
line-height: $input-line-height;
color: $input-color;
appearance: none; // Fix appearance for date inputs in Safari
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
appearance: none; // Fix appearance for date inputs in Safari
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius, 0);

6
scss/forms/_form-range.scss
View File

@ -8,8 +8,8 @@
width: 100%;
height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
padding: 0; // Need to reset padding
background-color: transparent;
appearance: none;
background-color: transparent;
&:focus {
outline: 0;
@ -28,12 +28,12 @@
width: $form-range-thumb-width;
height: $form-range-thumb-height;
margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
appearance: none;
@include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow);
@include transition($form-range-thumb-transition);
appearance: none;
&:active {
@include gradient-bg($form-range-thumb-active-bg);
@ -54,12 +54,12 @@
&::-moz-range-thumb {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
appearance: none;
@include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border;
@include border-radius($form-range-thumb-border-radius);
@include box-shadow($form-range-thumb-box-shadow);
@include transition($form-range-thumb-transition);
appearance: none;
&:active {
@include gradient-bg($form-range-thumb-active-bg);

2
scss/forms/_form-select.scss
View File

@ -14,6 +14,7 @@
font-weight: $form-select-font-weight;
line-height: $form-select-line-height;
color: $form-select-color;
appearance: none;
background-color: $form-select-bg;
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
background-repeat: no-repeat;
@ -23,7 +24,6 @@
@include border-radius($form-select-border-radius, 0);
@include box-shadow($form-select-box-shadow);
@include transition($form-select-transition);
appearance: none;
&:focus {
border-color: $form-select-focus-border-color;

3
scss/helpers/_color-bg.scss
View File

@ -1,8 +1,7 @@
// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
@each $color, $value in $theme-colors {
$color-rgb: to-rgb($value);
.text-bg-#{$color} {
color: color-contrast($value) if($enable-important-utilities, !important, null);
background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
background-color: RGBA(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity, 1)) if($enable-important-utilities, !important, null);
}
}

2
scss/helpers/_vr.scss
View File

@ -1,7 +1,7 @@
.vr {
display: inline-block;
align-self: stretch;
width: 1px;
width: $vr-border-width;
min-height: 1em;
background-color: currentcolor;
opacity: $hr-opacity;

10
site/content/docs/5.3/components/button-group.md
View File

@ -190,8 +190,6 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
{{< /example >}}
@ -208,9 +206,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<div class="btn-group dropstart" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
@ -219,7 +215,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<div class="btn-group dropend" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
@ -228,7 +224,7 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<div class="btn-group dropup" role="group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>

36
site/content/docs/5.3/components/buttons.md
View File

@ -129,7 +129,7 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t
## Block buttons
Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
{{< example >}}
<div class="d-grid gap-2">
@ -156,7 +156,7 @@ You can adjust the width of your block buttons with grid column width classes. F
</div>
{{< /example >}}
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they're no longer stacked.
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the button to right-align the buttons when they're no longer stacked.
{{< example >}}
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
@ -178,15 +178,29 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{
Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.
{{< example >}}
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
<p class="d-inline-flex gap-1">
<button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
<p class="d-inline-flex gap-1">
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
</p>
{{< /example >}}
{{< example >}}
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
<p class="d-inline-flex gap-1">
<a href="#" class="btn" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
<p class="d-inline-flex gap-1">
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
</p>
{{< /example >}}
### Methods
@ -201,8 +215,8 @@ const bsButton = new bootstrap.Button('#myButton')
| Method | Description |
| --- | --- |
| `dispose` | Destroys an element's button. (Removes stored data on the DOM element) |
| `getInstance` | Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. |
| `getOrCreateInstance` | Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. |
| `getInstance` | Static method which allows you to get the button instance associated with a DOM element, you can use it like this: `bootstrap.Button.getInstance(element)`. |
| `getOrCreateInstance` | Static method which returns a button instance associated with a DOM element or creates a new one in case it wasn't initialized. You can use it like this: `bootstrap.Button.getOrCreateInstance(element)`. |
| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
{{< /bs-table >}}
@ -227,7 +241,7 @@ As part of Bootstrap's evolving CSS variables approach, buttons now use local CS
Each `.btn-*` modifier class updates the appropriate CSS variables to minimize additional CSS rules with our `button-variant()`, `button-outline-variant()`, and `button-size()` mixins.
Here's an example of building a custom `.btn-*` modifier class like we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables.
Here's an example of building a custom `.btn-*` modifier class as we do for the buttons unique to our docs by reassigning Bootstrap's CSS variables with a mixture of our own CSS and Sass variables.
<div class="bd-example">
<button type="button" class="btn btn-bd-primary">Custom button</button>

4
site/content/docs/5.3/components/card.md
View File

@ -309,7 +309,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
@ -332,7 +332,7 @@ Add some navigation to a card's header (or block) with Bootstrap's [nav componen
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>

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

@ -661,7 +661,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
{{< example >}}
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
<li><a class="dropdown-item disabled">Disabled link</a></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
{{< /example >}}

2
site/content/docs/5.3/components/list-group.md
View File

@ -62,7 +62,7 @@ Be sure to **not use the standard `.btn` classes here**.
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
<a class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>
{{< /example >}}

14
site/content/docs/5.3/components/navbar.md
View File

@ -63,7 +63,7 @@ Here's an example of all the sub-components included in a responsive light-theme
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@ -157,7 +157,7 @@ Please note that you should also add the `aria-current` attribute on the active
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
@ -179,7 +179,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
@ -538,7 +538,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Link</a>
<a class="nav-link disabled" aria-disabled="true">Link</a>
</li>
</ul>
<form class="d-flex" role="search">
@ -578,7 +578,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@ -608,7 +608,7 @@ With a brand name shown on the left and toggler on the right:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@ -638,7 +638,7 @@ With a toggler on the left and brand name on the right:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">

34
site/content/docs/5.3/components/navs-tabs.md
View File

@ -31,7 +31,7 @@ To convey the active state to assistive technologies, use the `aria-current` att
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -43,7 +43,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@ -69,7 +69,7 @@ Centered with `.justify-content-center`:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -88,7 +88,7 @@ Right-aligned with `.justify-content-end`:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -109,7 +109,7 @@ Stack your navigation by changing the flex item direction with the `.flex-column
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -121,7 +121,7 @@ As always, vertical navigation is possible without `<ul>`s, too.
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@ -141,7 +141,7 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -162,7 +162,7 @@ Take that same HTML, but use `.nav-pills` instead:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -183,7 +183,7 @@ Take that same HTML, but use `.nav-underline` instead:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -204,7 +204,7 @@ Force your `.nav`'s contents to extend the full available width with one of two
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -216,7 +216,7 @@ When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@ -234,7 +234,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -246,7 +246,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation.
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Much longer nav link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@ -259,7 +259,7 @@ If you need responsive nav variations, consider using a series of [flexbox utili
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@ -294,7 +294,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -320,7 +320,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -567,7 +567,7 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
Dynamic tabbed interfaces, as described in the [ARIA Authoring Practices Guide tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality, and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab, with the plugin changing the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
In line with the ARIA Authoring Practices pattern, only the currently active tab receives keyboard focus. When the JavaScript plugin is initialized, it will set `tabindex="-1"` on all inactive tab controls. Once the currently active tab has focus, the cursor keys activate the previous/next tab. The <kbd>Home</kbd> and <kbd>End</kbd> keys activate the first and last tabs, respectively. The plugin will change the [roving `tabindex`](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) accordingly. However, note that the JavaScript plugin does not distinguish between horizontal and vertical tab lists when it comes to cursor key interactions: regardless of the tab list's orientation, both the up *and* left cursor go to the previous tab, and down *and* right cursor go to the next tab.
{{< callout warning >}}
In general, to facilitate keyboard navigation, it's recommended to make the tab panels themselves focusable as well, unless the first element containing meaningful content inside the tab panel is already focusable. The JavaScript plugin does not try to handle this aspect—where appropriate, you'll need to explicitly make your tab panels focusable by adding `tabindex="0"` in your markup.

6
site/content/docs/5.3/components/placeholders.md
View File

@ -38,7 +38,7 @@ In the example below, we take a typical card component and recreate it with plac
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a class="btn btn-primary disabled placeholder col-6"></a>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
</div>
@ -67,7 +67,7 @@ In the example below, we take a typical card component and recreate it with plac
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a class="btn btn-primary disabled placeholder col-6"></a>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
```
@ -83,7 +83,7 @@ We apply additional styling to `.btn`s via `::before` to ensure the `height` is
<span class="placeholder col-6"></span>
</p>
<a class="btn btn-primary disabled placeholder col-4"></a>
<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
{{< /example >}}
{{< callout info >}}

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

@ -165,7 +165,7 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="tooltip bs-tooltip-auto" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!

16
site/content/docs/5.3/customize/sass.md
View File

@ -14,12 +14,12 @@ Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means
```text
your-project/
├── scss
├── scss/
│ └── custom.scss
└── node_modules/
│ └── bootstrap
│ ├── js
│ └── scss
│ └── bootstrap/
│ ├── js/
│ └── scss/
└── index.html
```
@ -27,11 +27,11 @@ If you've downloaded our source files and aren't using a package manager, you'll
```text
your-project/
├── scss
├── scss/
│ └── custom.scss
├── bootstrap/
│ ├── js
│ └── scss
│ ├── js/
│ └── scss/
└── index.html
```
@ -104,7 +104,7 @@ sass --watch ./scss/custom.scss ./css/custom.css
Learn more about your options at [sass-lang.com/install](https://sass-lang.com/install) and [compiling with VS Code](https://code.visualstudio.com/docs/languages/css#_transpiling-sass-and-less-into-css).
{{< callout info >}}
**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [WebPack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
**Using Bootstrap with another build tool?** Consider reading our guides for compiling with [Webpack]({{< docsref "/getting-started/webpack" >}}), [Parcel]({{< docsref "/getting-started/parcel" >}}), or [Vite]({{< docsref "/getting-started/vite" >}}). We also have production-ready demos in [our examples repository on GitHub](https://github.com/twbs/examples).
{{< /callout >}}
## Including

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

@ -172,7 +172,7 @@ extra_css:
<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">تدوينات أقدم</a>
<a class="btn btn-outline-secondary rounded-pill disabled">تدوينات أحدث</a>
<a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">تدوينات أحدث</a>
</nav>
</div>

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

@ -224,7 +224,7 @@ extra_css:
<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
<a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
<a class="btn btn-outline-secondary rounded-pill disabled" aria-disabled="true">Newer</a>
</nav>
</div>

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

@ -52,12 +52,12 @@ body_class: ""
<div class="d-flex gap-2 justify-content-center py-5">
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
<span role="status">Loading...</span>
</button>
</div>

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

@ -22,7 +22,7 @@ extra_css:
<a class="nav-link" href="#">حلقة الوصل</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">رابط غير مفعل</a>
<a class="nav-link disabled" aria-disabled="true">رابط غير مفعل</a>
</li>
</ul>
<form class="d-flex" role="search">
@ -36,7 +36,7 @@ extra_css:
<main>
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light">
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>

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

@ -21,7 +21,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@ -35,7 +35,7 @@ extra_css:
<main>
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel" data-bs-theme="light">
<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>

8
site/content/docs/5.3/examples/cheatsheet-rtl/index.html
View File

@ -1170,7 +1170,7 @@ direction: rtl
<a class="nav-link active" aria-current="page" href="#">نشط</a>
<a class="nav-link" href="#">رابط</a>
<a class="nav-link" href="#">رابط</a>
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</nav>
{{< /example >}}
@ -1207,7 +1207,7 @@ direction: rtl
<a class="nav-link" href="#">رابط</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
{{< /example >}}
@ -1250,7 +1250,7 @@ direction: rtl
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
<form class="d-flex" role="search">
@ -1289,7 +1289,7 @@ direction: rtl
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">معطل</a>
<a class="nav-link disabled" aria-disabled="true">معطل</a>
</li>
</ul>
<form class="d-flex" role="search">

15
site/content/docs/5.3/examples/cheatsheet/cheatsheet.css
View File

@ -12,7 +12,7 @@ body {
height: 1em;
margin-right: .25rem;
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
background-size: 1em;
}
@ -26,29 +26,29 @@ body {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-left: .3125rem;
color: rgba(0, 0, 0, .65);
color: var(--bs-body-color);
}
.bd-aside a:hover,
.bd-aside a:focus {
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
.bd-aside .active {
font-weight: 600;
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
}
.bd-aside .btn {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
color: var(--bs-body-color);
}
.bd-aside .btn:hover,
.bd-aside .btn:focus {
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
@ -59,7 +59,7 @@ body {
.bd-aside .btn::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
/* rtl:raw:
@ -149,7 +149,6 @@ body {
/* rtl:end:ignore */
z-index: -1;
content: "";
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
}
.bd-cheatsheet article,

15
site/content/docs/5.3/examples/cheatsheet/cheatsheet.rtl.css
View File

@ -12,7 +12,7 @@ body {
height: 1em;
margin-left: .25rem;
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%25230d6efd' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z'/%3E%3Cpath fill-rule='evenodd' d='M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z'/%3E%3C/svg%3E");
background-size: 1em;
}
@ -26,29 +26,29 @@ body {
padding: .1875rem .5rem;
margin-top: .125rem;
margin-right: .3125rem;
color: rgba(0, 0, 0, .65);
color: var(--bs-body-color);
}
.bd-aside a:hover,
.bd-aside a:focus {
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
.bd-aside .active {
font-weight: 600;
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
}
.bd-aside .btn {
padding: .25rem .5rem;
font-weight: 600;
color: rgba(0, 0, 0, .65);
color: var(--bs-body-color);
}
.bd-aside .btn:hover,
.bd-aside .btn:focus {
color: rgba(0, 0, 0, .85);
color: var(--bs-body-color);
background-color: rgba(121, 82, 179, .1);
}
@ -59,7 +59,7 @@ body {
.bd-aside .btn::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform: rotate(180deg) translateX(-2px);
transform-origin: .5em 50%;
@ -142,7 +142,6 @@ body {
left: 0;
z-index: -1;
content: "";
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) calc(100% - 3rem), rgba(255, 255, 255, .01));
}
.bd-cheatsheet article,

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

@ -1169,7 +1169,7 @@ body_class: "bg-body-tertiary"
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</nav>
{{< /example >}}
@ -1206,7 +1206,7 @@ body_class: "bg-body-tertiary"
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
{{< /example >}}
@ -1249,7 +1249,7 @@ body_class: "bg-body-tertiary"
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
@ -1288,7 +1288,7 @@ body_class: "bg-body-tertiary"
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">

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

@ -85,7 +85,7 @@ extra_js:
<div class="container-fluid">
<div class="row">
<div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="offcanvas-lg offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="يغلق"></button>

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

@ -84,7 +84,7 @@ extra_js:
<div class="container-fluid">
<div class="row">
<div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="offcanvas-lg offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#sidebarMenu" aria-label="Close"></button>

2
site/content/docs/5.3/examples/navbar-bottom/index.html
View File

@ -25,7 +25,7 @@ title: Bottom navbar example
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropup">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropup</a>

2
site/content/docs/5.3/examples/navbar-fixed/index.html
View File

@ -20,7 +20,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">

2
site/content/docs/5.3/examples/navbar-static/index.html
View File

@ -20,7 +20,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">

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

@ -22,7 +22,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -79,7 +79,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -113,7 +113,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -147,7 +147,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -181,7 +181,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -215,7 +215,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -249,7 +249,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -283,7 +283,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -320,7 +320,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -352,7 +352,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -385,7 +385,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
@ -416,7 +416,7 @@ extra_css:
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>

2
site/content/docs/5.3/examples/sticky-footer-navbar/index.html
View File

@ -24,7 +24,7 @@ body_class: "d-flex flex-column h-100"
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">

29
site/content/docs/5.3/forms/checks-radios.md
View File

@ -250,16 +250,23 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th
{{< example >}}
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
{{< /example >}}
{{< example >}}
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
{{< /example >}}
{{< example >}}
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
<input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
<label class="btn" for="btn-check-4">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-5" checked autocomplete="off">
<label class="btn" for="btn-check-5">Checked</label>
<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
<label class="btn" for="btn-check-6">Disabled</label>
{{< /example >}}
{{< callout info >}}
@ -282,6 +289,20 @@ Visually, these checkbox toggle buttons are identical to the [button plugin togg
<label class="btn btn-secondary" for="option4">Radio</label>
{{< /example >}}
{{< example >}}
<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
<label class="btn" for="option5">Checked</label>
<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
<label class="btn" for="option6">Radio</label>
<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
<label class="btn" for="option7">Disabled</label>
<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
<label class="btn" for="option8">Radio</label>
{{< /example >}}
### Outlined styles
Different variants of `.btn`, such at the various outlined styles, are supported.

2
site/content/docs/5.3/forms/floating-labels.md
View File

@ -89,7 +89,7 @@ Add the `disabled` boolean attribute on an input, a textarea or a select to give
<label for="floatingTextareaDisabled">Comments</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled></textarea>
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2Disabled" style="height: 100px" disabled>Disabled textarea with some text inside</textarea>
<label for="floatingTextarea2Disabled">Comments</label>
</div>
<div class="form-floating">

2
site/content/docs/5.3/getting-started/webpack.md
View File

@ -191,7 +191,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: () => [
plugins: [
autoprefixer
]
}

8
site/content/docs/5.3/helpers/vertical-rule.md
View File

@ -43,3 +43,11 @@ They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
<div class="p-2">Third item</div>
</div>
{{< /example >}}
## CSS
### Sass variables
Customize the vertical rule Sass variable to change its width.
{{< scss-docs name="vr-variables" file="scss/_variables.scss" >}}

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

@ -495,10 +495,10 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- <span class="badge bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
- `.custom-control.custom-checkbox` is now `.form-check`.
- `.custom-control.custom-custom-radio` is now `.form-check`.
- `.custom-control.custom-radio` is now `.form-check`.
- `.custom-control.custom-switch` is now `.form-check.form-switch`.
- `.custom-select` is now `.form-select`.
- `.custom-file` and `.form-file` have been replaced by custom styles on top of `.form-control`.
- `.custom-file` and `.form-control-file` have been replaced by custom styles on top of `.form-control`.
- `.custom-range` is now `.form-range`.
- Dropped native `.form-control-file` and `.form-control-range`.

9
site/content/docs/5.3/utilities/float.md
View File

@ -23,10 +23,11 @@ Use the [clearfix helper]({{< docsref "/helpers/clearfix" >}}) on a parent eleme
Responsive variations also exist for each `float` value.
{{< example >}}
<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>
<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>
{{< /example >}}
Here are all the support classes:

11
site/content/docs/5.3/utilities/text.md
View File

@ -15,10 +15,11 @@ Easily realign text to components with text alignment classes. For start, end, a
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p>
<p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>
{{< /example >}}
{{< callout info >}}
@ -123,7 +124,7 @@ Reset a text or link's color with `.text-reset`, so that it inherits the color f
{{< example >}}
<p class="text-body-secondary">
Muted text with a <a href="#" class="text-reset">reset link</a>.
Secondary body text with a <a href="#" class="text-reset">reset link</a>.
</p>
{{< /example >}}

6
site/layouts/partials/docs-navbar.html
View File

@ -8,7 +8,7 @@
</button>
</div>
{{- else }}
<div class="d-lg-none" style="width: 1.5rem;"></div>
<div class="d-lg-none" style="width: 4.25rem;"></div>
{{- end }}
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
@ -16,9 +16,7 @@
</a>
<div class="d-flex">
{{ if eq .Layout "docs" }}
<div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
{{ end }}
<div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>

22
site/layouts/partials/footer.html
View File

@ -21,7 +21,7 @@
<li class="mb-2"><a href="{{ .Site.Params.icons }}">Icons</a></li>
<li class="mb-2"><a href="{{ .Site.Params.themes }}">Themes</a></li>
<li class="mb-2"><a href="{{ .Site.Params.blog }}">Blog</a></li>
<li class="mb-2"><a href="{{ .Site.Params.swag }}">Swag Store</a></li>
<li class="mb-2"><a href="{{ .Site.Params.swag }}" target="_blank" rel="noopener">Swag Store</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 mb-3">
@ -37,21 +37,21 @@
<div class="col-6 col-lg-2 mb-3">
<h5>Projects</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap">Bootstrap 5</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons">Icons</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs">RFS</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples/">Examples repo</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap" target="_blank" rel="noopener">Bootstrap 5</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/tree/v4-dev" target="_blank" rel="noopener">Bootstrap 4</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/icons" target="_blank" rel="noopener">Icons</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/rfs" target="_blank" rel="noopener">RFS</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/examples/" target="_blank" rel="noopener">Examples repo</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 mb-3">
<h5>Community</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/issues">Issues</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions">Discussions</a></li>
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
<li class="mb-2"><a href="{{ .Site.Params.opencollective }}">Open Collective</a></li>
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/issues" target="_blank" rel="noopener">Issues</a></li>
<li class="mb-2"><a href="{{ .Site.Params.github_org }}/bootstrap/discussions" target="_blank" rel="noopener">Discussions</a></li>
<li class="mb-2"><a href="https://github.com/sponsors/twbs" target="_blank" rel="noopener">Corporate sponsors</a></li>
<li class="mb-2"><a href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">Open Collective</a></li>
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5" target="_blank" rel="noopener">Stack Overflow</a></li>
</ul>
</div>
</div>

2
site/layouts/partials/header.html
View File

@ -11,9 +11,7 @@
<link rel="canonical" href="{{ .Permalink }}">
{{- if eq .Page.Layout "docs" -}}
<link rel="preconnect" href="https://AK7KMZKZHQ-dsn.algolia.net" crossorigin>
{{- end }}
{{ with .Params.robots -}}
<meta name="robots" content="{{ . }}">

2
site/layouts/partials/home/masthead.html
View File

@ -24,8 +24,6 @@
<span class="px-1">&middot;</span>
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
<span class="px-1">&middot;</span>
<a href="https://getbootstrap.com/docs/4.6/getting-started/introduction/" class="link-secondary text-nowrap">v4.6.x docs</a>
<span class="px-1">&middot;</span>
<a href="/docs/versions/" class="link-secondary text-nowrap">All releases</a>
</p>
{{ partial "ads" . }}

3
site/layouts/partials/scripts.html
View File

@ -4,8 +4,9 @@
<script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
{{- end }}
{{ if eq .Page.Layout "docs" -}}
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
{{ if eq .Page.Layout "docs" -}}
<script src="https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1/bundles/sdk.umd.js"></script>
{{- end }}

2
site/layouts/partials/stylesheet.html
View File

@ -1,6 +1,4 @@
{{ if eq .Page.Layout "docs" -}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
{{- end }}
{{ if eq hugo.Environment "production" -}}
{{ if eq .Page.Params.direction "rtl" -}}

8
site/layouts/shortcodes/js-docs.html
View File

@ -13,8 +13,9 @@
{{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}}
{{- else -}}
{{- $capture_start := printf "// js-docs-start %s\n" $name -}}
{{- $capture_end := printf "// js-docs-end %s" $name -}}
{{- $capture_end := printf "// js-docs-end %s\n" $name -}}
{{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}}
{{- $regex_nested := printf `// js-docs-.*\n` -}}
{{- $match := findRE $regex (readFile $file) -}}
{{- $match = index $match 0 -}}
@ -26,6 +27,11 @@
{{- $match = replace $match $capture_start "" -}}
{{- $match = replace $match $capture_end "" -}}
{{- $match_nested := findRE $regex_nested $match -}}
{{- range $to_remove := $match_nested -}}
{{- $match = replace $match $to_remove "" -}}
{{- end -}}
<div class="bd-example-snippet bd-code-snippet bd-file-ref">
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
<a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">

8
site/layouts/shortcodes/scss-docs.html
View File

@ -17,8 +17,9 @@
{{- errorf "%s: %q: Missing required parameters! Got: name=%q file=%q!" .Position .Name $name $file -}}
{{- else -}}
{{- $capture_start := printf "// scss-docs-start %s\n" $name -}}
{{- $capture_end := printf "// scss-docs-end %s" $name -}}
{{- $capture_end := printf "// scss-docs-end %s\n" $name -}}
{{- $regex := printf `%s((?:.|\n)*)%s` $capture_start $capture_end -}}
{{- $regex_nested := printf `// scss-docs-.*\n` -}}
{{- /*
TODO: figure out why we can't do the following and get the first group (the only capturing one)...
@ -35,6 +36,11 @@
{{- $match = replace $match $capture_start "" -}}
{{- $match = replace $match $capture_end "" -}}
{{- $match_nested := findRE $regex_nested $match -}}
{{- range $to_remove := $match_nested -}}
{{- $match = replace $match $to_remove "" -}}
{{- end -}}
{{- if (ne $strip_default "false") -}}
{{- $match = replace $match " !default" "" -}}
{{- end -}}