Adding upstream version 5.3.1+dfsg.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
e1f69a237f
commit
7a45358554
GPG key ID:
FBB4F0E80A80222F
92 changed files with 3961 additions and 3355 deletions
|
|
@ -38,7 +38,7 @@
|
|||
},
|
||||
{
|
||||
"path": "./dist/js/bootstrap.bundle.min.js",
|
||||
"maxSize": "23.0 kB"
|
||||
"maxSize": "23.25 kB"
|
||||
},
|
||||
{
|
||||
"path": "./dist/js/bootstrap.esm.js",
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
},
|
||||
{
|
||||
"path": "./dist/js/bootstrap.min.js",
|
||||
"maxSize": "16.0 kB"
|
||||
"maxSize": "16.25 kB"
|
||||
}
|
||||
],
|
||||
"ci": {
|
||||
|
|
|
|||
7
.github/CONTRIBUTING.md
vendored
7
.github/CONTRIBUTING.md
vendored
|
|
@ -31,6 +31,13 @@ restrictions:
|
|||
Instead, please email any questions or feedback regarding those themes to `themes AT getbootstrap DOT com`.
|
||||
|
||||
|
||||
## Issues assignment
|
||||
|
||||
The core team will be looking at the open issues, analyze them, and provide guidance on how to proceed. **Issues won't be assigned to anyone outside the core team.** However, contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to. Please wait that the issue is ready to be worked on before submitting a PR, we don't want to waste your time.
|
||||
|
||||
Please keep in mind that the core team is small, has limited resources and that we are not always able to respond immediately. We will try to provide feedback as soon as possible, but please be patient. If you don't get a response immediately, it doesn't mean that we are ignoring you or that we don't care about your issue or PR. We will get back to you as soon as we can.
|
||||
|
||||
|
||||
## Issues and labels
|
||||
|
||||
Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them:
|
||||
|
|
|
|||
|
|
@ -46,11 +46,11 @@ Our default branch is for development of our Bootstrap 5 release. Head to the [`
|
|||
|
||||
Several quick start options are available:
|
||||
|
||||
- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.0.zip)
|
||||
- [Download the latest release](https://github.com/twbs/bootstrap/archive/v5.3.1.zip)
|
||||
- Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
|
||||
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.0`
|
||||
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.0`
|
||||
- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.0`
|
||||
- Install with [npm](https://www.npmjs.com/): `npm install bootstrap@v5.3.1`
|
||||
- Install with [yarn](https://yarnpkg.com/): `yarn add bootstrap@v5.3.1`
|
||||
- Install with [Composer](https://getcomposer.org/): `composer require twbs/bootstrap:5.3.1`
|
||||
- Install with [NuGet](https://www.nuget.org/): CSS: `Install-Package bootstrap` Sass: `Install-Package bootstrap.sass`
|
||||
|
||||
Read the [Getting started page](https://getbootstrap.com/docs/5.3/getting-started/introduction/) for information on the framework contents, templates, examples, and more.
|
||||
|
|
|
|||
|
|
@ -34,6 +34,9 @@ const imgFiles = [
|
|||
'bootstrap-logo.svg',
|
||||
'bootstrap-logo-white.svg'
|
||||
]
|
||||
const staticJsFiles = [
|
||||
'color-modes.js'
|
||||
]
|
||||
|
||||
sh.config.fatal = true
|
||||
|
||||
|
|
@ -52,7 +55,8 @@ sh.mkdir('-p', [
|
|||
distFolder,
|
||||
`${distFolder}/assets/brand/`,
|
||||
`${distFolder}/assets/dist/css/`,
|
||||
`${distFolder}/assets/dist/js/`
|
||||
`${distFolder}/assets/dist/js/`,
|
||||
`${distFolder}/assets/js/`
|
||||
])
|
||||
|
||||
sh.cp('-Rf', `${docsDir}/examples/*`, distFolder)
|
||||
|
|
@ -69,6 +73,10 @@ for (const file of imgFiles) {
|
|||
sh.cp('-f', `${docsDir}/assets/brand/${file}`, `${distFolder}/assets/brand/`)
|
||||
}
|
||||
|
||||
for (const file of staticJsFiles) {
|
||||
sh.cp('-f', `${docsDir}/assets/js/${file}`, `${distFolder}/assets/js/`)
|
||||
}
|
||||
|
||||
sh.rm(`${distFolder}/index.html`)
|
||||
|
||||
// get all examples' HTML files
|
||||
|
|
|
|||
28
hugo.yml
28
hugo.yml
|
|
@ -8,6 +8,8 @@ security:
|
|||
getenv:
|
||||
- ^HUGO_
|
||||
- NETLIFY
|
||||
gotemplates:
|
||||
allowActionJSTmpl: true
|
||||
|
||||
markup:
|
||||
goldmark:
|
||||
|
|
@ -52,8 +54,8 @@ params:
|
|||
description: "Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins."
|
||||
authors: "Mark Otto, Jacob Thornton, and Bootstrap contributors"
|
||||
|
||||
current_version: "5.3.0"
|
||||
current_ruby_version: "5.3.0"
|
||||
current_version: "5.3.1"
|
||||
current_ruby_version: "5.3.1"
|
||||
docs_version: "5.3"
|
||||
rfs_version: "v10.0.0"
|
||||
github_org: "https://github.com/twbs"
|
||||
|
|
@ -66,20 +68,20 @@ params:
|
|||
swag: "https://cottonbureau.com/people/bootstrap"
|
||||
|
||||
download:
|
||||
source: "https://github.com/twbs/bootstrap/archive/v5.3.0.zip"
|
||||
dist: "https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-dist.zip"
|
||||
dist_examples: "https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-examples.zip"
|
||||
source: "https://github.com/twbs/bootstrap/archive/v5.3.1.zip"
|
||||
dist: "https://github.com/twbs/bootstrap/releases/download/v5.3.1/bootstrap-5.3.1-dist.zip"
|
||||
dist_examples: "https://github.com/twbs/bootstrap/releases/download/v5.3.1/bootstrap-5.3.1-examples.zip"
|
||||
|
||||
cdn:
|
||||
# See https://www.srihash.org for info on how to generate the hashes
|
||||
css: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||
css_hash: "sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
|
||||
css_rtl: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css"
|
||||
css_rtl_hash: "sha384-PJsj/BTMqILvmcej7ulplguok8ag4xFTPryRq8xevL7eBYSmpXKcbNVuy+P0RMgq"
|
||||
js: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
|
||||
js_hash: "sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
|
||||
js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
|
||||
js_bundle_hash: "sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
|
||||
css: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
|
||||
css_hash: "sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
|
||||
css_rtl: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.rtl.min.css"
|
||||
css_rtl_hash: "sha384-PRrgQVJ8NNHGieOA1grGdCTIt4h21CzJs6SnWH4YMQ6G5F5+IEzOHz67L4SQaF0o"
|
||||
js: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"
|
||||
js_hash: "sha384-Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
|
||||
js_bundle: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
|
||||
js_bundle_hash: "sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
|
||||
popper: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
|
||||
popper_hash: "sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
|
||||
popper_esm: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/esm/popper.min.js"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { executeAfterTransition, getElement } from './util/index.js'
|
|||
* Constants
|
||||
*/
|
||||
|
||||
const VERSION = '5.3.0'
|
||||
const VERSION = '5.3.1'
|
||||
|
||||
/**
|
||||
* Class definition
|
||||
|
|
|
|||
|
|
@ -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 })
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
6492
package-lock.json
generated
6492
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -5,7 +5,7 @@
|
|||
Package.describe({
|
||||
name: 'twbs:bootstrap', // https://atmospherejs.com/twbs/bootstrap
|
||||
summary: 'The most popular front-end framework for developing responsive, mobile first projects on the web.',
|
||||
version: '5.3.0',
|
||||
version: '5.3.1',
|
||||
git: 'https://github.com/twbs/bootstrap.git'
|
||||
})
|
||||
|
||||
|
|
|
|||
44
package.json
44
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "bootstrap",
|
||||
"description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
|
||||
"version": "5.3.0",
|
||||
"version": "5.3.1",
|
||||
"config": {
|
||||
"version_short": "5.3"
|
||||
},
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
"docs-serve": "hugo server --port 9001 --disableFastRender --printUnusedTemplates",
|
||||
"docs-serve-only": "npx sirv-cli _site --port 9001",
|
||||
"lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
|
||||
"update-deps": "ncu -u -x globby,jasmine,karma-browserstack-launcher,karma-rollup-preprocessor,terser && echo Manually update site/assets/js/vendor",
|
||||
"update-deps": "ncu -u -x globby,jasmine,karma-browserstack-launcher,karma-rollup-preprocessor && echo Manually update site/assets/js/vendor",
|
||||
"release": "npm-run-all dist release-sri docs-build release-zip*",
|
||||
"release-sri": "node build/generate-sri.js",
|
||||
"release-version": "node build/change-version.js",
|
||||
|
|
@ -100,31 +100,31 @@
|
|||
"watch-js-docs": "nodemon --watch site/assets/js/ --ext js --exec \"npm run js-lint\""
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.7"
|
||||
"@popperjs/core": "^2.11.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.21.5",
|
||||
"@babel/core": "^7.22.1",
|
||||
"@babel/preset-env": "^7.22.4",
|
||||
"@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.0",
|
||||
"@rollup/plugin-node-resolve": "^15.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.41.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.103.5",
|
||||
"hugo-bin": "^0.111.4",
|
||||
"ip": "^2.0.0",
|
||||
"jasmine": "^4.6.0",
|
||||
"jquery": "^3.7.0",
|
||||
|
|
@ -135,22 +135,22 @@
|
|||
"karma-detect-browsers": "^2.3.3",
|
||||
"karma-firefox-launcher": "^2.1.2",
|
||||
"karma-jasmine": "^5.1.0",
|
||||
"karma-jasmine-html-reporter": "^2.0.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.23.0",
|
||||
"rollup": "^3.26.3",
|
||||
"rollup-plugin-istanbul": "^4.0.0",
|
||||
"rtlcss": "^4.1.0",
|
||||
"sass": "^1.62.1",
|
||||
"sass": "^1.64.1",
|
||||
"sass-true": "^7.0.0",
|
||||
"shelljs": "^0.8.5",
|
||||
"stylelint": "^15.6.2",
|
||||
"stylelint-config-twbs-bootstrap": "^10.0.0",
|
||||
"terser": "5.16.0",
|
||||
"stylelint": "^15.10.2",
|
||||
"stylelint-config-twbs-bootstrap": "^11.0.1",
|
||||
"terser": "^5.19.2",
|
||||
"vnu-jar": "23.4.11"
|
||||
},
|
||||
"files": [
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.7"
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,8 @@
|
|||
}
|
||||
|
||||
// Disabled state lightens text
|
||||
&.disabled {
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}nav-link-disabled-color);
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
|
|
@ -79,13 +80,6 @@
|
|||
isolation: isolate;
|
||||
border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}nav-link-disabled-color);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
|
|
@ -117,12 +111,6 @@
|
|||
|
||||
.nav-link {
|
||||
@include border-radius(var(--#{$prefix}nav-pills-border-radius));
|
||||
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}nav-link-disabled-color);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ $light-border-subtle-dark: $gray-700 !default;
|
|||
$dark-border-subtle-dark: $gray-800 !default;
|
||||
// scss-docs-end theme-border-subtle-dark-variables
|
||||
|
||||
$body-color-dark: $gray-500 !default;
|
||||
$body-color-dark: $gray-300 !default;
|
||||
$body-bg-dark: $gray-900 !default;
|
||||
$body-secondary-color-dark: rgba($body-color-dark, .75) !default;
|
||||
$body-secondary-bg-dark: $gray-800 !default;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1216,7 +1220,8 @@ $navbar-dark-color: rgba($white, .55) !default;
|
|||
$navbar-dark-hover-color: rgba($white, .75) !default;
|
||||
$navbar-dark-active-color: $white !default;
|
||||
$navbar-dark-disabled-color: rgba($white, .25) !default;
|
||||
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-dark-icon-color: $navbar-dark-color !default;
|
||||
$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-dark-toggler-border-color: rgba($white, .1) !default;
|
||||
$navbar-dark-brand-color: $navbar-dark-active-color !default;
|
||||
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
||||
|
|
@ -1543,9 +1548,6 @@ $alert-margin-bottom: 1rem !default;
|
|||
$alert-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-border-width: var(--#{$prefix}border-width) !default;
|
||||
$alert-bg-scale: -80% !default;
|
||||
$alert-border-scale: -70% !default;
|
||||
$alert-color-scale: 40% !default;
|
||||
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
|
||||
// scss-docs-end alert-variables
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@mixin bsBanner($file) {
|
||||
/*!
|
||||
* Bootstrap #{$file} v5.3.0 (https://getbootstrap.com/)
|
||||
* Bootstrap #{$file} v5.3.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2023 The Bootstrap Authors
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -20,18 +20,19 @@
|
|||
|
||||
const btnHtml = [
|
||||
'<div class="bd-code-snippet">',
|
||||
' <div class="bd-clipboard">',
|
||||
' <button type="button" class="btn-clipboard">',
|
||||
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
|
||||
' </button>',
|
||||
' </div>',
|
||||
' <div class="bd-clipboard">',
|
||||
' <button type="button" class="btn-clipboard">',
|
||||
' <svg class="bi" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg>',
|
||||
' </button>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
|
||||
// Wrap programmatically code blocks and add copy btn.
|
||||
document.querySelectorAll('.highlight')
|
||||
.forEach(element => {
|
||||
if (!element.closest('.bd-example-snippet')) { // Ignore examples made be shortcode
|
||||
// Ignore examples made by shortcode
|
||||
if (!element.closest('.bd-example-snippet')) {
|
||||
element.insertAdjacentHTML('beforebegin', btnHtml)
|
||||
element.previousElementSibling.append(element)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -220,15 +220,16 @@
|
|||
|
||||
// scss-docs-start custom-tooltip
|
||||
.custom-tooltip {
|
||||
--bs-tooltip-bg: var(--bs-primary);
|
||||
--bs-tooltip-bg: var(--bd-violet-bg);
|
||||
--bs-tooltip-color: var(--bs-white);
|
||||
}
|
||||
// scss-docs-end custom-tooltip
|
||||
|
||||
// scss-docs-start custom-popovers
|
||||
.custom-popover {
|
||||
--bs-popover-max-width: 200px;
|
||||
--bs-popover-border-color: var(--bs-primary);
|
||||
--bs-popover-header-bg: var(--bs-primary);
|
||||
--bs-popover-border-color: var(--bd-violet-bg);
|
||||
--bs-popover-header-bg: var(--bd-violet-bg);
|
||||
--bs-popover-header-color: var(--bs-white);
|
||||
--bs-popover-body-padding-x: 1rem;
|
||||
--bs-popover-body-padding-y: .5rem;
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) an
|
|||
Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
|
||||
|
||||
{{< example >}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check-circle-fill" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
|
||||
</symbol>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ Click the buttons below to show and hide another element via class changes:
|
|||
Generally, we recommend using a `<button>` with the `data-bs-target` attribute. While not recommended from a semantic point of view, you can also use an `<a>` link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
|
||||
|
||||
{{< example >}}
|
||||
<p>
|
||||
<p class="d-inline-flex gap-1">
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
|
|
@ -69,7 +69,7 @@ A `<button>` or `<a>` element can show and hide multiple elements by referencing
|
|||
Conversely, multiple `<button>` or `<a>` elements can show and hide the same element if they each reference it with their `data-bs-target` or `href` attribute.
|
||||
|
||||
{{< example >}}
|
||||
<p>
|
||||
<p class="d-inline-flex gap-1">
|
||||
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
|
||||
|
|
|
|||
|
|
@ -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 >}}
|
||||
|
|
|
|||
|
|
@ -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 >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -331,7 +331,7 @@ Mix and match with other components and utilities as needed.
|
|||
Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and CSS variables. The default is our "light navbar" for use with light background colors, but you can also apply `data-bs-theme="dark"` to the `.navbar` parent for dark background colors. Then, customize with `.bg-*` and additional utilities.
|
||||
|
||||
<div class="bd-example">
|
||||
<nav class="navbar navbar-expand-lg bg-dark border-bottom border-bottom-dark" data-bs-theme="dark">
|
||||
<nav class="navbar navbar-expand-lg bg-dark border-bottom border-body" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
|
|
@ -420,7 +420,7 @@ Navbar themes are easier than ever thanks to Bootstrap's combination of Sass and
|
|||
</div>
|
||||
|
||||
```html
|
||||
<nav class="navbar bg-dark border-bottom border-bottom-dark" data-bs-theme="dark">
|
||||
<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
|
||||
<!-- Navbar content -->
|
||||
</nav>
|
||||
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 >}}
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
|
|||
|
||||
### Horizontal alignment
|
||||
|
||||
Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/layout/grid#horizontal-alignment" >}}). By default, navs are left-aligned, but you can easily change them to center or right aligned.
|
||||
Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/utilities/flex#justify-content" >}}). By default, navs are left-aligned, but you can easily change them to center or right-aligned.
|
||||
|
||||
Centered with `.justify-content-center`:
|
||||
|
||||
|
|
@ -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,14 +183,14 @@ 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 >}}
|
||||
|
||||
### Fill and justify
|
||||
|
||||
Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
|
||||
Force your `.nav`'s contents to extend the full available width with one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
|
||||
|
||||
{{< example >}}
|
||||
<ul class="nav nav-pills nav-fill">
|
||||
|
|
@ -204,7 +204,7 @@ Force your `.nav`'s contents to extend the full available width one of two modif
|
|||
<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.
|
||||
|
|
|
|||
|
|
@ -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 >}}
|
||||
|
|
|
|||
|
|
@ -96,8 +96,8 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
|
|||
|
||||
{{< example >}}
|
||||
<div class="d-flex align-items-center">
|
||||
<strong>Loading...</strong>
|
||||
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
|
||||
<strong role="status">Loading...</strong>
|
||||
<div class="spinner-border ms-auto" aria-hidden="true"></div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
@ -151,23 +151,23 @@ Use spinners within buttons to indicate an action is currently processing or tak
|
|||
|
||||
{{< example >}}
|
||||
<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>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
<button class="btn btn-primary" type="button" disabled>
|
||||
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<span class="spinner-grow spinner-grow-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-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
|
||||
Loading...
|
||||
<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
|
||||
<span role="status">Loading...</span>
|
||||
</button>
|
||||
{{< /example >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ const tooltip = new bootstrap.Tooltip('#example', {
|
|||
The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
|
||||
|
||||
{{< callout warning >}}
|
||||
**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users.
|
||||
**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make them impossible to trigger for keyboard users.
|
||||
{{< /callout >}}
|
||||
|
||||
```html
|
||||
|
|
@ -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!
|
||||
|
|
@ -177,13 +177,11 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
|
|||
|
||||
Elements with the `disabled` attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you'll want to trigger the tooltip from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`.
|
||||
|
||||
<div class="tooltip-demo">
|
||||
{{< example >}}
|
||||
{{< example class="tooltip-demo" stackblitz_add_js="true" >}}
|
||||
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
|
||||
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
|
||||
</span>
|
||||
{{< /example >}}
|
||||
</div>
|
||||
|
||||
### Options
|
||||
|
||||
|
|
|
|||
|
|
@ -14,23 +14,25 @@ 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
|
||||
```
|
||||
|
||||
If you've downloaded our source files and aren't using a package manager, you'll want to manually create something similar to that structure, keeping Bootstrap's source files separate from your own.
|
||||
|
||||
```text
|
||||
your-project/
|
||||
├── scss
|
||||
├── scss/
|
||||
│ └── custom.scss
|
||||
└── bootstrap/
|
||||
├── js
|
||||
└── scss
|
||||
├── bootstrap/
|
||||
│ ├── js/
|
||||
│ └── scss/
|
||||
└── index.html
|
||||
```
|
||||
|
||||
## Importing
|
||||
|
|
@ -85,6 +87,45 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
|
|||
|
||||
With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
|
||||
|
||||
## Compiling
|
||||
|
||||
In order to use your custom Sass code as CSS in the browser, you need a Sass compiler. Sass ships as a CLI package, but you can also compile it with other build tools like [Gulp](https://gulpjs.com/) or [Webpack](https://webpack.js.org/), or with a GUI applications. Some IDEs also have Sass compilers built in or as downloadable extensions.
|
||||
|
||||
We like to use the CLI to compile our Sass, but you can use whichever method you prefer. From the command line, run the following:
|
||||
|
||||
```shell
|
||||
# Install Sass globally
|
||||
npm install -g sass
|
||||
|
||||
# Watch your custom Sass for changes and compile it to CSS
|
||||
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).
|
||||
{{< /callout >}}
|
||||
|
||||
## Including
|
||||
|
||||
Once your CSS is compiled, you can include it in your HTML files. Inside your `index.html` you'll want to include your compiled CSS file. Be sure to update the path to your compiled CSS file if you've changed it.
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Custom Bootstrap</title>
|
||||
<link href="/css/custom.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Variable defaults
|
||||
|
||||
Every Sass variable in Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ extra_css:
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="x-circle-fill" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
|
||||
</symbol>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ extra_css:
|
|||
- "../blog/blog.rtl.css"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ extra_css:
|
|||
- "blog.css"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ extra_css:
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="house-door-fill" viewBox="0 0 16 16">
|
||||
<path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
|
||||
</symbol>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Buttons
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="arrow-right-short" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
|
||||
</symbol>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ extra_js:
|
|||
- src: "dashboard.js"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
||||
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
|
||||
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ extra_js:
|
|||
- src: "dashboard.js"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="calendar3" viewBox="0 0 16 16">
|
||||
<path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
|
||||
<path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ extra_css:
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="film" viewBox="0 0 16 16">
|
||||
<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
|
||||
</symbol>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ extra_css:
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Footers
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ extra_css:
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ extra_css:
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ extra_css:
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="calendar-event" viewBox="0 0 16 16">
|
||||
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
|
||||
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ extra_css:
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bookmark-star" viewBox="0 0 16 16">
|
||||
<path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
|
||||
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ extra_css:
|
|||
- "pricing.css"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ extra_css:
|
|||
- "product.css"
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="aperture" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ extra_js:
|
|||
body_class: ""
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="bootstrap" viewBox="0 0 118 94">
|
||||
<title>Bootstrap</title>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
|
||||
|
|
@ -246,10 +246,10 @@ body_class: ""
|
|||
</button>
|
||||
<div class="collapse" id="account-collapse">
|
||||
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
|
||||
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">New...</a></li>
|
||||
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Profile</a></li>
|
||||
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Settings</a></li>
|
||||
<li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Sign out</a></li>
|
||||
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">New...</a></li>
|
||||
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Profile</a></li>
|
||||
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Settings</a></li>
|
||||
<li><a href="#" class="link-body-emphasis d-inline-flex text-decoration-none rounded">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ layout: examples
|
|||
title: Starter Template
|
||||
---
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="arrow-right-circle" viewBox="0 0 16 16">
|
||||
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
|
||||
</symbol>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -36,14 +36,14 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
|
|||
Block-level or inline-level form text can be created using `.form-text`.
|
||||
|
||||
{{< callout warning >}}
|
||||
Form text should be explicitly associated with the form control it relates to using the `aria-labelledby` (for mandatory information such as data format) or `aria-describedby` (for complementary information) attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
|
||||
Form text should be explicitly associated with the form control it relates to using the `aria-describedby` attribute. This will ensure that assistive technologies—such as screen readers—will announce this form text when the user focuses or enters the control.
|
||||
{{< /callout >}}
|
||||
|
||||
Form text below inputs can be styled with `.form-text`. If a block-level element will be used, a top margin is added for easy spacing from the inputs above.
|
||||
|
||||
{{< example >}}
|
||||
<label for="inputPassword5" class="form-label">Password</label>
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-labelledby="passwordHelpBlock">
|
||||
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
|
||||
<div id="passwordHelpBlock" class="form-text">
|
||||
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
|
||||
</div>
|
||||
|
|
@ -57,7 +57,7 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
|
|||
<label for="inputPassword6" class="col-form-label">Password</label>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<input type="password" id="inputPassword6" class="form-control" aria-labelledby="passwordHelpInline">
|
||||
<input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span id="passwordHelpInline" class="form-text">
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@ Custom `<select>` menus need only a custom class, `.form-select` to trigger the
|
|||
You may also choose from small and large custom selects to match our similarly sized text inputs.
|
||||
|
||||
{{< example >}}
|
||||
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
|
||||
<select class="form-select form-select-lg mb-3" aria-label="Large 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>
|
||||
|
||||
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
|
||||
<select class="form-select form-select-sm" aria-label="Small select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
|
|
@ -42,7 +42,7 @@ You may also choose from small and large custom selects to match our similarly s
|
|||
The `multiple` attribute is also supported:
|
||||
|
||||
{{< example >}}
|
||||
<select class="form-select" multiple aria-label="multiple select example">
|
||||
<select class="form-select" multiple aria-label="Multiple select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
|
|
@ -53,7 +53,7 @@ The `multiple` attribute is also supported:
|
|||
As is the `size` attribute:
|
||||
|
||||
{{< example >}}
|
||||
<select class="form-select" size="3" aria-label="size 3 select example">
|
||||
<select class="form-select" size="3" aria-label="Size 3 select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
|
|
|
|||
|
|
@ -118,9 +118,7 @@ All infinitive events provide [`preventDefault()`](https://developer.mozilla.org
|
|||
const myModal = document.querySelector('#myModal')
|
||||
|
||||
myModal.addEventListener('show.bs.modal', event => {
|
||||
if (!data) {
|
||||
return event.preventDefault() // stops modal from being shown
|
||||
}
|
||||
return event.preventDefault() // stops modal from being shown
|
||||
})
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
|
|||
loader: 'postcss-loader',
|
||||
options: {
|
||||
postcssOptions: {
|
||||
plugins: () => [
|
||||
plugins: [
|
||||
autoprefixer
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ Using horizontal margin utilities like `.ms-auto` as spacers:
|
|||
{{< example class="bd-example-flex" >}}
|
||||
<div class="hstack gap-3">
|
||||
<div class="p-2">First item</div>
|
||||
<div class="p-2">Second item</div>
|
||||
<div class="p-2 ms-auto">Second item</div>
|
||||
<div class="p-2">Third item</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -52,7 +52,7 @@ And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
|
|||
{{< example class="bd-example-flex" >}}
|
||||
<div class="hstack gap-3">
|
||||
<div class="p-2">First item</div>
|
||||
<div class="p-2">Second item</div>
|
||||
<div class="p-2 ms-auto">Second item</div>
|
||||
<div class="vr"></div>
|
||||
<div class="p-2">Third item</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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" >}}
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
|
||||
|
|
|
|||
|
|
@ -16,15 +16,18 @@ These utility classes float an element to the left or right, or disable floating
|
|||
<div class="float-none">Don't float on all viewport sizes</div>
|
||||
{{< /example >}}
|
||||
|
||||
Use the [clearfix helper]({{< docsref "/helpers/clearfix" >}}) on a parent element to clear floats.
|
||||
|
||||
## Responsive
|
||||
|
||||
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:
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
|
|||
<div class="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div>
|
||||
<div class="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div>
|
||||
<div class="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div>
|
||||
<div class="opacity-0 p-3 m-2 bg-primary text-light fw-bold rounded">0%</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
|
|
@ -22,6 +23,7 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
|
|||
<div class="opacity-75">...</div>
|
||||
<div class="opacity-50">...</div>
|
||||
<div class="opacity-25">...</div>
|
||||
<div class="opacity-0">...</div>
|
||||
```
|
||||
|
||||
## CSS
|
||||
|
|
|
|||
|
|
@ -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 >}}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,14 +29,14 @@
|
|||
|
||||
- group: v3.x
|
||||
baseurl: "https://getbootstrap.com/docs"
|
||||
description: "Every minor and patch release from v3 is listed below. Last update was v3.4.1."
|
||||
description: "Every minor release from v3 is listed below. Last update was v3.4.1."
|
||||
versions:
|
||||
- "3.3"
|
||||
- "3.4"
|
||||
|
||||
- group: v4.x
|
||||
baseurl: "https://getbootstrap.com/docs"
|
||||
description: "Our previous major release with its minor releases. Last update was v4.6.0."
|
||||
description: "Our previous major release with its minor releases. Last update was v4.6.2."
|
||||
versions:
|
||||
- "4.0"
|
||||
- "4.1"
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
- group: v5.x
|
||||
baseurl: "https://getbootstrap.com/docs"
|
||||
description: "Current major release. Last update was v5.3.0."
|
||||
description: "Current major release. Last update was v5.3.1."
|
||||
versions:
|
||||
- "5.0"
|
||||
- "5.1"
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@
|
|||
{{- end }}
|
||||
</head>
|
||||
<body{{ with .Page.Params.body_class }} class="{{ . }}"{{ end }}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
|
||||
**Accessibility tip:** Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a [*sufficient* color contrast](/docs/{{ .Site.Params.docs_version }}/getting-started/accessibility#color-contrast)) or is included through alternative means, such as additional text hidden with the `.visually-hidden` class.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="{{ . }}">
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@
|
|||
<span class="px-1">·</span>
|
||||
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
|
||||
<span class="px-1">·</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">·</span>
|
||||
<a href="/docs/versions/" class="link-secondary text-nowrap">All releases</a>
|
||||
</p>
|
||||
{{ partial "ads" . }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
|
||||
<symbol id="arrow-right" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
||||
</symbol>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
|
@ -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 }}
|
||||
|
||||
|
|
|
|||
|
|
@ -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" -}}
|
||||
|
|
|
|||
|
|
@ -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 `\\` "/" }}">
|
||||
|
|
|
|||
|
|
@ -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 -}}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue