Merge branch 'main' into rohit/main/dropdown-events
This commit is contained in:
XhmikosR
GitHub
commit
4f57b51363
58 changed files with 430 additions and 851 deletions
|
|
@ -44,14 +44,14 @@
|
|||
"unicorn/consistent-function-scoping": "off",
|
||||
"unicorn/explicit-length-check": "off",
|
||||
"unicorn/import-index": "off",
|
||||
"unicorn/no-fn-reference-in-iterator": "off",
|
||||
"unicorn/no-array-callback-reference": "off",
|
||||
"unicorn/no-for-loop": "off",
|
||||
"unicorn/no-null": "off",
|
||||
"unicorn/no-unused-properties": "error",
|
||||
"unicorn/no-useless-undefined": "off",
|
||||
"unicorn/prefer-dataset": "off",
|
||||
"unicorn/prefer-node-append": "off",
|
||||
"unicorn/prefer-node-remove": "off",
|
||||
"unicorn/prefer-dom-node-append": "off",
|
||||
"unicorn/prefer-dom-node-dataset": "off",
|
||||
"unicorn/prefer-dom-node-remove": "off",
|
||||
"unicorn/prefer-optional-catch-binding": "off",
|
||||
"unicorn/prefer-query-selector": "off",
|
||||
"unicorn/prevent-abbreviations": "off"
|
||||
|
|
|
|||
7
.github/dependabot.yml
vendored
7
.github/dependabot.yml
vendored
|
|
@ -15,3 +15,10 @@ updates:
|
|||
- v5
|
||||
versioning-strategy: increase
|
||||
rebase-strategy: disabled
|
||||
- package-ecosystem: "github-actions"
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: weekly
|
||||
day: tuesday
|
||||
time: "12:00"
|
||||
timezone: Europe/Athens
|
||||
|
|
|
|||
2
.github/workflows/browserstack.yml
vendored
2
.github/workflows/browserstack.yml
vendored
|
|
@ -19,7 +19,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/bundlewatch.yml
vendored
2
.github/workflows/bundlewatch.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/css.yml
vendored
2
.github/workflows/css.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/docs.yml
vendored
2
.github/workflows/docs.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/js.yml
vendored
2
.github/workflows/js.yml
vendored
|
|
@ -25,7 +25,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: ${{ matrix.node }}
|
||||
|
||||
|
|
|
|||
2
.github/workflows/lint.yml
vendored
2
.github/workflows/lint.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
2
.github/workflows/node-sass.yml
vendored
2
.github/workflows/node-sass.yml
vendored
|
|
@ -20,7 +20,7 @@ jobs:
|
|||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v1
|
||||
uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
|
||||
|
|
|
|||
4
LICENSE
4
LICENSE
|
|
@ -1,7 +1,7 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2011-2020 Twitter, Inc.
|
||||
Copyright (c) 2011-2020 The Bootstrap Authors
|
||||
Copyright (c) 2011-2021 Twitter, Inc.
|
||||
Copyright (c) 2011-2021 The Bootstrap Authors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
|
|
@ -236,4 +236,4 @@ Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com
|
|||
|
||||
## Copyright and license
|
||||
|
||||
Code and documentation copyright 2011–2020 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
|
||||
Code and documentation copyright 2011–2021 the [Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter, Inc.](https://twitter.com) Code released under the [MIT License](https://github.com/twbs/bootstrap/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
/*!
|
||||
* Script to build our plugins to use them separately.
|
||||
* Copyright 2020 The Bootstrap Authors
|
||||
* Copyright 2020 Twitter, Inc.
|
||||
* Copyright 2020-2021 The Bootstrap Authors
|
||||
* Copyright 2020-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
/*!
|
||||
* Script to update version number references in the project.
|
||||
* Copyright 2017-2020 The Bootstrap Authors
|
||||
* Copyright 2017-2020 Twitter, Inc.
|
||||
* Copyright 2017-2021 The Bootstrap Authors
|
||||
* Copyright 2017-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
* Remember to use the same vendor files as the CDN ones,
|
||||
* otherwise the hashes won't match!
|
||||
*
|
||||
* Copyright 2017-2020 The Bootstrap Authors
|
||||
* Copyright 2017-2020 Twitter, Inc.
|
||||
* Copyright 2017-2021 The Bootstrap Authors
|
||||
* Copyright 2017-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
/*!
|
||||
* Script to run vnu-jar if Java is available.
|
||||
* Copyright 2017-2020 The Bootstrap Authors
|
||||
* Copyright 2017-2020 Twitter, Inc.
|
||||
* Copyright 2017-2021 The Bootstrap Authors
|
||||
* Copyright 2017-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
/*!
|
||||
* Script to create the built examples zip archive;
|
||||
* requires the `zip` command to be present!
|
||||
* Copyright 2020 The Bootstrap Authors
|
||||
* Copyright 2020-2021 The Bootstrap Authors
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ class ScrollSpy extends BaseComponent {
|
|||
this._activeTarget = null
|
||||
this._scrollHeight = 0
|
||||
|
||||
EventHandler.on(this._scrollElement, EVENT_SCROLL, event => this._process(event))
|
||||
EventHandler.on(this._scrollElement, EVENT_SCROLL, () => this._process())
|
||||
|
||||
this.refresh()
|
||||
this._process()
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ describe('ScrollSpy', () => {
|
|||
fixtureEl.innerHTML = [
|
||||
'<nav id="navigation" class="navbar">',
|
||||
' <ul class="navbar-nav">',
|
||||
' <li class="nav-item active"><a class="nav-link" id="one-link" href="#">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link active" id="one-link" href="#">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
|
||||
' </ul>',
|
||||
|
|
@ -177,7 +177,7 @@ describe('ScrollSpy', () => {
|
|||
'<div id="header" style="height: 500px;"></div>',
|
||||
'<nav id="navigation" class="navbar">',
|
||||
' <ul class="navbar-nav">',
|
||||
' <li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link active" id="one-link" href="#one">One</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>',
|
||||
' <li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>',
|
||||
' </ul>',
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#" aria-current="page">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
<div class="collapse navbar-expand-md" id="navbarResponsive">
|
||||
<a class="navbar-brand" href="#">This shouldn't jump!</a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#" aria-current="page">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#" aria-current="page">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<projectUrl>https://getbootstrap.com/</projectUrl>
|
||||
<icon>bootstrap.png</icon>
|
||||
<license type="file">LICENSE.txt</license>
|
||||
<copyright>Copyright 2017-2020</copyright>
|
||||
<copyright>Copyright 2017-2021</copyright>
|
||||
<requireLicenseAcceptance>false</requireLicenseAcceptance>
|
||||
<tags>css mobile-first responsive front-end framework web</tags>
|
||||
<contentFiles>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<projectUrl>https://getbootstrap.com/</projectUrl>
|
||||
<icon>bootstrap.png</icon>
|
||||
<license type="file">LICENSE.txt</license>
|
||||
<copyright>Copyright 2017-2020</copyright>
|
||||
<copyright>Copyright 2017-2021</copyright>
|
||||
<requireLicenseAcceptance>false</requireLicenseAcceptance>
|
||||
<tags>css sass mobile-first responsive front-end framework web</tags>
|
||||
<contentFiles>
|
||||
|
|
|
|||
924
package-lock.json
generated
924
package-lock.json
generated
File diff suppressed because it is too large
Load diff
24
package.json
24
package.json
|
|
@ -106,18 +106,18 @@
|
|||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.1",
|
||||
"@rollup/plugin-replace": "^2.3.4",
|
||||
"autoprefixer": "^10.1.0",
|
||||
"autoprefixer": "^10.2.0",
|
||||
"bundlewatch": "^0.3.1",
|
||||
"clean-css-cli": "^4.3.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^7.16.0",
|
||||
"eslint-config-xo": "^0.33.1",
|
||||
"eslint": "^7.17.0",
|
||||
"eslint-config-xo": "^0.34.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-unicorn": "^24.0.0",
|
||||
"find-unused-sass-variables": "^3.0.0",
|
||||
"eslint-plugin-unicorn": "^25.0.1",
|
||||
"find-unused-sass-variables": "^3.1.0",
|
||||
"glob": "^7.1.6",
|
||||
"hammer-simulator": "0.0.1",
|
||||
"hugo-bin": "^0.67.1",
|
||||
"hugo-bin": "^0.68.0",
|
||||
"ip": "^1.1.5",
|
||||
"jquery": "^3.5.1",
|
||||
"karma": "^5.2.3",
|
||||
|
|
@ -129,16 +129,16 @@
|
|||
"karma-jasmine": "^4.0.1",
|
||||
"karma-jasmine-html-reporter": "^1.5.4",
|
||||
"karma-rollup-preprocessor": "^7.0.5",
|
||||
"linkinator": "^2.8.2",
|
||||
"linkinator": "^2.11.2",
|
||||
"lockfile-lint": "^4.3.7",
|
||||
"nodemon": "^2.0.6",
|
||||
"nodemon": "^2.0.7",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.2.1",
|
||||
"postcss": "^8.2.2",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"rollup": "^2.35.1",
|
||||
"rollup-plugin-istanbul": "^2.0.1",
|
||||
"rollup": "^2.36.1",
|
||||
"rollup-plugin-istanbul": "^3.0.0",
|
||||
"rtlcss": "^3.0.0",
|
||||
"sass": "^1.30.0",
|
||||
"sass": "^1.32.2",
|
||||
"shelljs": "^0.8.4",
|
||||
"stylelint": "^13.8.0",
|
||||
"stylelint-config-twbs-bootstrap": "^2.1.0",
|
||||
|
|
|
|||
|
|
@ -411,15 +411,6 @@ button {
|
|||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Work around a Firefox bug where the transparent `button` background
|
||||
// results in a loss of the default `button` focus styles.
|
||||
// Credit https://github.com/suitcss/base/
|
||||
|
||||
button:focus {
|
||||
outline: dotted 1px;
|
||||
outline: -webkit-focus-ring-color auto 5px;
|
||||
}
|
||||
|
||||
// 1. Remove the margin in Firefox and Safari
|
||||
|
||||
input,
|
||||
|
|
|
|||
|
|
@ -744,7 +744,7 @@ $form-select-padding-y: $input-padding-y !default;
|
|||
$form-select-padding-x: $input-padding-x !default;
|
||||
$form-select-font-family: $input-font-family !default;
|
||||
$form-select-font-size: $input-font-size !default;
|
||||
$form-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
|
||||
$form-select-indicator-padding: $form-select-padding-x * 3 !default; // Extra padding for background-image
|
||||
$form-select-font-weight: $input-font-weight !default;
|
||||
$form-select-line-height: $input-line-height !default;
|
||||
$form-select-color: $input-color !default;
|
||||
|
|
@ -757,8 +757,8 @@ $form-select-bg-size: 16px 12px !default; // In pixels because ima
|
|||
$form-select-indicator-color: $gray-800 !default;
|
||||
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
|
||||
|
||||
$form-select-feedback-icon-padding-end: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
|
||||
$form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding) !default;
|
||||
$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
|
||||
$form-select-feedback-icon-position: center right $form-select-indicator-padding !default;
|
||||
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;
|
||||
|
||||
$form-select-border-width: $input-border-width !default;
|
||||
|
|
|
|||
4
scss/bootstrap-grid.scss
vendored
4
scss/bootstrap-grid.scss
vendored
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap Grid v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
4
scss/bootstrap-reboot.scss
vendored
4
scss/bootstrap-reboot.scss
vendored
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap Reboot v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
|
|
|
|||
4
scss/bootstrap-utilities.scss
vendored
4
scss/bootstrap-utilities.scss
vendored
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap Utilities v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
4
scss/bootstrap.scss
vendored
4
scss/bootstrap.scss
vendored
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap v5.0.0-beta1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.form-select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
|
||||
padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
|
||||
font-family: $form-select-font-family;
|
||||
@include font-size($form-select-font-size);
|
||||
font-weight: $form-select-font-weight;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
&::before {
|
||||
display: block;
|
||||
padding-top: var(--aspect-ratio);
|
||||
padding-top: var(--#{$variable-prefix}aspect-ratio);
|
||||
content: "";
|
||||
}
|
||||
|
||||
|
|
@ -21,6 +21,6 @@
|
|||
|
||||
@each $key, $ratio in $aspect-ratios {
|
||||
.ratio-#{$key} {
|
||||
--aspect-ratio: #{$ratio};
|
||||
--#{$variable-prefix}aspect-ratio: #{$ratio};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,8 +35,8 @@
|
|||
"strict": "error",
|
||||
"unicorn/no-for-loop": "off",
|
||||
"unicorn/no-null": "off",
|
||||
"unicorn/prefer-dataset": "off",
|
||||
"unicorn/prefer-node-append": "off",
|
||||
"unicorn/prefer-dom-node-append": "off",
|
||||
"unicorn/prefer-dom-node-dataset": "off",
|
||||
"unicorn/prefer-query-selector": "off",
|
||||
"unicorn/prevent-abbreviations": "off"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
/*!
|
||||
* JavaScript for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@
|
|||
width: 16rem;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
--aspect-ratio: 50%; // 2x1
|
||||
--bs-aspect-ratio: 50%; // 2x1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* Bootstrap Docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2020 The Bootstrap Authors
|
||||
* Copyright 2011-2020 Twitter, Inc.
|
||||
* Copyright 2011-2021 The Bootstrap Authors
|
||||
* Copyright 2011-2021 Twitter, Inc.
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
* For details, see https://creativecommons.org/licenses/by/3.0/.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -206,6 +206,34 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to
|
|||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Disable touch swiping
|
||||
|
||||
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute and has `data-bs-interval="false"` so it doesn't autoplay.
|
||||
|
||||
{{< example >}}
|
||||
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="Second slide" >}}
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carouselExampleControlsNoTouching" role="button" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carouselExampleControlsNoTouching" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Dark variant
|
||||
|
||||
Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`.
|
||||
|
|
@ -286,7 +314,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<td><code>interval</code></td>
|
||||
<td>number</td>
|
||||
<td><code>5000</code></td>
|
||||
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
|
||||
<td>The amount of time to delay between automatically cycling an item. If <code>false</code>, carousel will not automatically cycle.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>keyboard</code></td>
|
||||
|
|
@ -297,15 +325,15 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
|||
<tr>
|
||||
<td><code>pause</code></td>
|
||||
<td>string | boolean</td>
|
||||
<td><code>"hover"</code></td>
|
||||
<td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
|
||||
<p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
|
||||
<td><code>'hover'</code></td>
|
||||
<td><p>If set to <code>'hover'</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
|
||||
<p>On touch-enabled devices, when set to <code>'hover'</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>slide</code></td>
|
||||
<td><code>ride</code></td>
|
||||
<td>string | boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
|
||||
<td>Autoplays the carousel after the user manually cycles the first item. If set to <code>'carousel'</code>, autoplays the carousel on load.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>wrap</code></td>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ Click the buttons below to show and hide another element via class changes:
|
|||
- `.collapsing` is applied during transitions
|
||||
- `.collapse.show` shows content
|
||||
|
||||
You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="collapse"` is required.
|
||||
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 a link with the `href` attribute (and a `role="button"`). In both cases, the `data-bs-toggle="collapse"` is required.
|
||||
|
||||
{{< example >}}
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -124,9 +124,9 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
|
|||
|
||||
Navbar navigation links build on our `.nav` options with their own modifier class and require the use of [toggler classes](#toggler) for proper responsive styling. **Navigation in navbars will also grow to occupy as much horizontal space as possible** to keep your navbar contents securely aligned.
|
||||
|
||||
Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
|
||||
Add the `.active` class on `.nav-link` to indicate the current page.
|
||||
|
||||
Please note that you should also add the `aria-current` attribute on the `.nav-link` itself.
|
||||
Please note that you should also add the `aria-current` attribute on the active `.nav-link`.
|
||||
|
||||
{{< example >}}
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
|
|
|
|||
|
|
@ -306,7 +306,7 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
|||
|
||||
## JavaScript behavior
|
||||
|
||||
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
|
||||
Use the tab JavaScript plugin—include it individually or through the compiled `bootstrap.js` file—to extend our navigational tabs and pills to create tabbable panes of local content.
|
||||
|
||||
Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#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).
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ You can find and customize these variables for key global options in Bootstrap's
|
|||
| ------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- |
|
||||
| `$spacer` | `1rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
|
||||
| `$enable-rounded` | `true` (default) or `false` | Enables predefined `border-radius` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined `box-shadow` styles on various components. |
|
||||
| `$enable-shadows` | `true` or `false` (default) | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
|
||||
| `$enable-gradients` | `true` or `false` (default) | Enables predefined gradients via `background-image` styles on various components. |
|
||||
| `$enable-transitions` | `true` (default) or `false` | Enables predefined `transition`s on various components. |
|
||||
| `$enable-reduced-motion` | `true` (default) or `false` | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ extra_css:
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">الصفحة الرئيسية</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">حلقة الوصل</a>
|
||||
|
|
@ -162,6 +162,6 @@ extra_css:
|
|||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<p class="float-end"><a href="#">عد إلى الأعلى</a></p>
|
||||
<p>© 2017-{{< year >}} Company, Inc. · <a href="#">خصوصية</a> · <a href="#">شروط</a></p>
|
||||
<p>© 2017–{{< year >}} Company, Inc. · <a href="#">خصوصية</a> · <a href="#">شروط</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ extra_css:
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -161,6 +161,6 @@ extra_css:
|
|||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<p class="float-end"><a href="#">Back to top</a></p>
|
||||
<p>© 2017-{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
<p>© 2017–{{< year >}} Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ title: Bottom navbar example
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ extra_css:
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ extra_css:
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample01">
|
||||
<ul class="navbar-nav me-auto mb-2">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -49,8 +49,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample02">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -72,8 +72,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample03">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -106,8 +106,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample04">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -140,8 +140,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -174,8 +174,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample06">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -208,8 +208,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleXxl">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-xl-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -242,8 +242,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -276,8 +276,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07XL">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -313,8 +313,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Centered nav only</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Centered nav only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -345,8 +345,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample09">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
@ -378,8 +378,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Centered nav only</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Centered nav only</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ body_class: "bg-light"
|
|||
|
||||
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Dashboard</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Dashboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Notifications</a>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ include_js: false
|
|||
<div class="row">
|
||||
<div class="col-12 col-md">
|
||||
<img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
|
||||
<small class="d-block mb-3 text-muted">© 2017-{{< year >}}</small>
|
||||
<small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Features</h5>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ extra_css:
|
|||
<div class="row">
|
||||
<div class="col-12 col-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><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"/></svg>
|
||||
<small class="d-block mb-3 text-muted">© 2017-{{< year >}}</small>
|
||||
<small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Features</h5>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,6 @@ include_js: false
|
|||
</label>
|
||||
</div>
|
||||
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
|
||||
<p class="mt-5 mb-3 text-muted">© 2017-{{< year >}}</p>
|
||||
<p class="mt-5 mb-3 text-muted">© 2017–{{< year >}}</p>
|
||||
</form>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ extra_css:
|
|||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@ body_class: "d-flex flex-column h-100"
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
|
|
|
|||
|
|
@ -49,10 +49,10 @@ Aspect ratios can be customized with modifier classes. By default the following
|
|||
|
||||
Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.
|
||||
|
||||
For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`.
|
||||
For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`.
|
||||
|
||||
{{< example class="bd-example-ratios" >}}
|
||||
<div class="ratio" style="--aspect-ratio: 50%;">
|
||||
<div class="ratio" style="--bs-aspect-ratio: 50%;">
|
||||
<div>2x1</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
|
@ -62,7 +62,7 @@ This CSS variable makes it easy to modify the aspect ratio across breakpoints. T
|
|||
```scss
|
||||
.ratio-4x3 {
|
||||
@include media-breakpoint-up(md) {
|
||||
--aspect-ratio: 50%; // 2x1
|
||||
--bs-aspect-ratio: 50%; // 2x1
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ toc: true
|
|||
|
||||
#### Utilities
|
||||
|
||||
- Renamed `--aspect-ratio` to `--bs-aspect-ratio` to be consistent with other custom properties.
|
||||
- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
|
||||
- `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore.
|
||||
- Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757).
|
||||
|
|
|
|||
|
|
@ -244,9 +244,11 @@ Now that you're familiar with how the utilities API works, learn how to add your
|
|||
|
||||
### Add utilities
|
||||
|
||||
New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our `_utilities.scss` is imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values.
|
||||
New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our required Sass files and `_utilities.scss` are imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
|
|
@ -267,6 +269,8 @@ $utilities: map-merge(
|
|||
Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
|
|
@ -290,6 +294,8 @@ $utilities: map-merge(
|
|||
Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within.
|
||||
|
||||
```scss
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
$utilities: map-merge(
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
# This file holds all sidebar menu's entries.
|
||||
# The logic for the sidebar generation is in "site/layouts/partials/docs-sidebar.html".
|
||||
|
||||
- title: Getting started
|
||||
pages:
|
||||
- title: Introduction
|
||||
|
|
@ -26,7 +29,6 @@
|
|||
- title: Breakpoints
|
||||
- title: Containers
|
||||
- title: Grid
|
||||
# - title: Rows
|
||||
- title: Columns
|
||||
- title: Gutters
|
||||
- title: Utilities
|
||||
|
|
@ -117,3 +119,5 @@
|
|||
- title: Brand
|
||||
- title: License
|
||||
- title: Translations
|
||||
|
||||
- title: Migration
|
||||
|
|
|
|||
|
|
@ -13,33 +13,33 @@
|
|||
{{- end -}}
|
||||
|
||||
{{- $group_slug := $group.title | urlize -}}
|
||||
{{- $is_active_group := eq $.Page.Params.group $group_slug }}
|
||||
{{- $is_active_group := eq $.Page.Params.group $group_slug -}}
|
||||
|
||||
<li class="mb-1{{ if $is_active_group }} active{{ end }}">
|
||||
<button class="btn d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#{{ $group_slug }}-collapse" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
|
||||
{{ $group.title }}
|
||||
</button>
|
||||
{{- if $group.pages }}
|
||||
<li class="mb-1">
|
||||
<button class="btn d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#{{ $group_slug }}-collapse" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
|
||||
{{ $group.title }}
|
||||
</button>
|
||||
|
||||
{{- if $group.pages }}
|
||||
<div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
{{- range $doc := $group.pages -}}
|
||||
{{- $doc_slug := $doc.title | urlize -}}
|
||||
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
|
||||
{{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
|
||||
<li><a href="{{ $href }}" class="d-inline-flex align-items-center rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{- end }}
|
||||
</li>
|
||||
<div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
|
||||
<ul class="list-unstyled fw-normal pb-1 small">
|
||||
{{- range $doc := $group.pages -}}
|
||||
{{- $doc_slug := $doc.title | urlize -}}
|
||||
{{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
|
||||
{{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
|
||||
<li><a href="{{ $href }}" class="d-inline-flex align-items-center rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{{- else }}
|
||||
<li class="my-3 mx-4 border-top"></li>
|
||||
<li>
|
||||
<a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="d-inline-flex align-items-center rounded{{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
|
||||
{{ $group.title }}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
||||
<li class="my-3 mx-4 border-top"></li>
|
||||
<li{{ if eq $page_slug "migration" }} class="active"{{ end }}>
|
||||
<a href="/docs/{{ $.Site.Params.docs_version }}/migration/" class="d-inline-flex align-items-center rounded">
|
||||
Migration
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue