mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-15 11:59:39 +03:00
Merge branch 'main' into patrickhlauke-check-radio-buttons-focus-visible
This commit is contained in:
Patrick H. Lauke
Generated
+312
-482
File diff suppressed because it is too large
Load Diff
+11
-11
@@ -105,18 +105,18 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.18.10",
|
||||
"@babel/core": "^7.18.10",
|
||||
"@babel/core": "^7.18.13",
|
||||
"@babel/preset-env": "^7.18.10",
|
||||
"@popperjs/core": "^2.11.5",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
"@rollup/plugin-babel": "^5.3.1",
|
||||
"@rollup/plugin-commonjs": "^22.0.1",
|
||||
"@rollup/plugin-commonjs": "^22.0.2",
|
||||
"@rollup/plugin-node-resolve": "^13.3.0",
|
||||
"@rollup/plugin-replace": "^4.0.0",
|
||||
"autoprefixer": "^10.4.8",
|
||||
"bundlewatch": "^0.3.3",
|
||||
"clean-css-cli": "^5.6.1",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^8.21.0",
|
||||
"eslint": "^8.23.0",
|
||||
"eslint-config-xo": "^0.41.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-markdown": "^3.0.0",
|
||||
@@ -126,7 +126,7 @@
|
||||
"hammer-simulator": "0.0.1",
|
||||
"hugo-bin": "^0.89.0",
|
||||
"ip": "^2.0.0",
|
||||
"jquery": "^3.6.0",
|
||||
"jquery": "^3.6.1",
|
||||
"karma": "^6.4.0",
|
||||
"karma-browserstack-launcher": "1.4.0",
|
||||
"karma-chrome-launcher": "^3.1.1",
|
||||
@@ -136,19 +136,19 @@
|
||||
"karma-jasmine": "^5.1.0",
|
||||
"karma-jasmine-html-reporter": "^2.0.0",
|
||||
"karma-rollup-preprocessor": "7.0.7",
|
||||
"lockfile-lint": "^4.7.7",
|
||||
"lockfile-lint": "^4.8.0",
|
||||
"nodemon": "^2.0.19",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss": "^8.4.16",
|
||||
"postcss-cli": "^10.0.0",
|
||||
"rollup": "^2.77.2",
|
||||
"rollup": "^2.79.0",
|
||||
"rollup-plugin-istanbul": "^3.0.0",
|
||||
"rtlcss": "^3.5.0",
|
||||
"sass": "^1.54.2",
|
||||
"sass": "^1.54.8",
|
||||
"shelljs": "^0.8.5",
|
||||
"stylelint": "^14.9.1",
|
||||
"stylelint": "^14.11.0",
|
||||
"stylelint-config-twbs-bootstrap": "^5.0.0",
|
||||
"terser": "^5.14.2",
|
||||
"terser": "^5.15.0",
|
||||
"vnu-jar": "21.10.12"
|
||||
},
|
||||
"files": [
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
.accordion {
|
||||
// scss-docs-start accordion-css-vars
|
||||
--#{$prefix}accordion-color: #{color-contrast($accordion-bg)};
|
||||
--#{$prefix}accordion-color: #{$accordion-color};
|
||||
--#{$prefix}accordion-bg: #{$accordion-bg};
|
||||
--#{$prefix}accordion-transition: #{$accordion-transition};
|
||||
--#{$prefix}accordion-border-color: #{$accordion-border-color};
|
||||
|
||||
+1
-1
@@ -15,6 +15,7 @@
|
||||
--#{$prefix}btn-border-width: #{$btn-border-width};
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-border-radius: #{$btn-border-radius};
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
|
||||
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
|
||||
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
|
||||
@@ -51,7 +52,6 @@
|
||||
color: var(--#{$prefix}btn-hover-color);
|
||||
@include gradient-bg(var(--#{$prefix}btn-hover-bg));
|
||||
border-color: var(--#{$prefix}btn-hover-border-color);
|
||||
outline: 0;
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
||||
|
||||
+2
-1
@@ -18,6 +18,7 @@
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
// scss-docs-start dropdown-css-vars
|
||||
--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
|
||||
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
|
||||
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
|
||||
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
|
||||
@@ -46,7 +47,7 @@
|
||||
// scss-docs-end dropdown-css-vars
|
||||
|
||||
position: absolute;
|
||||
z-index: $zindex-dropdown;
|
||||
z-index: var(--#{$prefix}dropdown-zindex);
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
min-width: var(--#{$prefix}dropdown-min-width);
|
||||
padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
|
||||
|
||||
@@ -127,12 +127,12 @@
|
||||
flex-direction: row;
|
||||
|
||||
> .list-group-item {
|
||||
&:first-child {
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
|
||||
@include border-top-end-radius(0);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
|
||||
@include border-bottom-start-radius(0);
|
||||
}
|
||||
|
||||
@@ -265,6 +265,7 @@
|
||||
}
|
||||
|
||||
.navbar-dark {
|
||||
// scss-docs-start navbar-dark-css-vars
|
||||
--#{$prefix}navbar-color: #{$navbar-dark-color};
|
||||
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
|
||||
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
|
||||
@@ -273,4 +274,5 @@
|
||||
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
|
||||
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
|
||||
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
||||
// scss-docs-end navbar-dark-css-vars
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
%offcanvas-css-vars {
|
||||
// scss-docs-start offcanvas-css-vars
|
||||
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
|
||||
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
|
||||
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
|
||||
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
|
||||
@@ -31,7 +32,7 @@
|
||||
@include media-breakpoint-down($next) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: $zindex-offcanvas;
|
||||
z-index: var(--#{$prefix}offcanvas-zindex);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
|
||||
+2
-1
@@ -1,5 +1,6 @@
|
||||
.toast {
|
||||
// scss-docs-start toast-css-vars
|
||||
--#{$prefix}toast-zindex: #{$zindex-toast};
|
||||
--#{$prefix}toast-padding-x: #{$toast-padding-x};
|
||||
--#{$prefix}toast-padding-y: #{$toast-padding-y};
|
||||
--#{$prefix}toast-spacing: #{$toast-spacing};
|
||||
@@ -38,7 +39,7 @@
|
||||
|
||||
.toast-container {
|
||||
position: absolute;
|
||||
z-index: $zindex-toast;
|
||||
z-index: var(--#{$prefix}toast-zindex);
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
+16
-15
@@ -1100,15 +1100,6 @@ $navbar-toggler-font-size: $font-size-lg !default;
|
||||
$navbar-toggler-border-radius: $btn-border-radius !default;
|
||||
$navbar-toggler-focus-width: $btn-focus-width !default;
|
||||
$navbar-toggler-transition: box-shadow .15s ease-in-out !default;
|
||||
// scss-docs-end navbar-variables
|
||||
|
||||
// scss-docs-start navbar-theme-variables
|
||||
$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-toggler-border-color: rgba($white, .1) !default;
|
||||
|
||||
$navbar-light-color: rgba($black, .55) !default;
|
||||
$navbar-light-hover-color: rgba($black, .7) !default;
|
||||
@@ -1116,12 +1107,20 @@ $navbar-light-active-color: rgba($black, .9) !default;
|
||||
$navbar-light-disabled-color: rgba($black, .3) !default;
|
||||
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
||||
$navbar-light-toggler-border-color: rgba($black, .1) !default;
|
||||
$navbar-light-brand-color: $navbar-light-active-color !default;
|
||||
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
|
||||
// scss-docs-end navbar-variables
|
||||
|
||||
$navbar-light-brand-color: $navbar-light-active-color !default;
|
||||
$navbar-light-brand-hover-color: $navbar-light-active-color !default;
|
||||
$navbar-dark-brand-color: $navbar-dark-active-color !default;
|
||||
$navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
|
||||
// scss-docs-end navbar-theme-variables
|
||||
// scss-docs-start navbar-dark-variables
|
||||
$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-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;
|
||||
// scss-docs-end navbar-dark-variables
|
||||
|
||||
|
||||
// Dropdowns
|
||||
@@ -1560,11 +1559,13 @@ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://
|
||||
|
||||
$carousel-transition-duration: .6s !default;
|
||||
$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
|
||||
// scss-docs-end carousel-variables
|
||||
|
||||
// scss-docs-start carousel-dark-variables
|
||||
$carousel-dark-indicator-active-bg: $black !default;
|
||||
$carousel-dark-caption-color: $black !default;
|
||||
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default;
|
||||
// scss-docs-end carousel-variables
|
||||
// scss-docs-end carousel-dark-variables
|
||||
|
||||
|
||||
// Spinners
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
> .form-control:focus,
|
||||
> .form-select:focus,
|
||||
> .form-floating:focus-within {
|
||||
z-index: 3;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
// Ensure buttons are always above inputs for more visually pleasing borders.
|
||||
@@ -33,7 +33,7 @@
|
||||
z-index: 2;
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+10
-10
@@ -135,16 +135,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input-group .form-control,
|
||||
.input-group .form-select {
|
||||
@include form-validation-state-selector($state) {
|
||||
@if $state == "valid" {
|
||||
z-index: 1;
|
||||
} @else if $state == "invalid" {
|
||||
z-index: 2;
|
||||
}
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
.input-group {
|
||||
> .form-control:not(:focus),
|
||||
> .form-select:not(:focus),
|
||||
> .form-floating:not(:focus-within) {
|
||||
@include form-validation-state-selector($state) {
|
||||
@if $state == "valid" {
|
||||
z-index: 3;
|
||||
} @else if $state == "invalid" {
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -320,15 +320,11 @@
|
||||
pre {
|
||||
padding: 0;
|
||||
margin-top: .625rem;
|
||||
margin-right: 1.875rem;
|
||||
margin-bottom: .625rem;
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
// Undo tabindex that's automatically added by Hugo
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre code {
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
--docsearch-hit-shadow: none;
|
||||
|
||||
z-index: 2000; // Make sure to be over all components showcased in the documentation
|
||||
cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding-top: 4rem;
|
||||
|
||||
@@ -381,7 +381,7 @@ Turn an image into a card background and overlay your card's text. Depending on
|
||||
<div class="card-img-overlay">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text">Last updated 3 mins ago</p>
|
||||
<p class="card-text"><small>Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -287,8 +287,14 @@ The transition duration of `.carousel-item` can be changed with the `$carousel-t
|
||||
|
||||
### Variables
|
||||
|
||||
Variables for all carousels:
|
||||
|
||||
{{< scss-docs name="carousel-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
Variables for the [dark carousel](#dark-variant):
|
||||
|
||||
{{< scss-docs name="carousel-dark-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
## Usage
|
||||
|
||||
### Via data attributes
|
||||
|
||||
@@ -146,7 +146,7 @@ const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Co
|
||||
{{< bs-table "table" >}}
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
`parent` | selector, jQuery object, DOM element | `false` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. |
|
||||
`parent` | selector, DOM element | `null` | If parent is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the `card` class). The attribute has to be set on the target collapsible area. |
|
||||
`toggle` | boolean | `true` | Toggles the collapsible element on invocation |
|
||||
{{< /bs-table >}}
|
||||
|
||||
|
||||
@@ -1070,11 +1070,11 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown: <ul class="my-2"><li>`true` - the dropdown will be closed by clicking outside or inside the dropdown menu.</li><li>`false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li><li>`'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.</li> <li>`'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.</li></ul> Note: the dropdown can always be closed with the <kbd>ESC</kbd> key |
|
||||
| `boundary` | string, element | `'scrollParent'` | Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
|
||||
| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
|
||||
| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. |
|
||||
| `offset` | number, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `offset` | array, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
|
||||
| `reference` | string, element | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
|
||||
| `reference` | string, element, object | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
|
||||
{{< /bs-table >}}
|
||||
|
||||
#### Using function with `popperConfig`
|
||||
|
||||
@@ -792,11 +792,19 @@ Some additional CSS variables are also present on `.navbar-nav`:
|
||||
|
||||
{{< scss-docs name="navbar-nav-css-vars" file="scss/_navbar.scss" >}}
|
||||
|
||||
Customization through CSS variables can be seen on the `.navbar-dark` class where we override specific values without adding duplicate CSS selectors.
|
||||
|
||||
{{< scss-docs name="navbar-dark-css-vars" file="scss/_navbar.scss" >}}
|
||||
|
||||
### Sass variables
|
||||
|
||||
Variables for all navbars:
|
||||
|
||||
{{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
{{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}}
|
||||
Variables for the [dark navbar](#color-schemes):
|
||||
|
||||
{{< scss-docs name="navbar-dark-variables" file="scss/_variables.scss" >}}
|
||||
|
||||
### Sass loop
|
||||
|
||||
|
||||
@@ -79,24 +79,6 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Dark offcanvas
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
|
||||
|
||||
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
|
||||
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>Place offcanvas content here.</p>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
### Body scrolling
|
||||
|
||||
Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `<body>` scrolling.
|
||||
@@ -155,6 +137,24 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Dark offcanvas
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
|
||||
|
||||
{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
|
||||
<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
|
||||
<div class="offcanvas-header">
|
||||
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
<p>Place offcanvas content here.</p>
|
||||
</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Responsive
|
||||
|
||||
{{< added-in "5.2.0" >}}
|
||||
|
||||
@@ -377,9 +377,9 @@ const scrollSpy = new bootstrap.ScrollSpy(document.body, {
|
||||
{{< bs-table "table" >}}
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `rootMargin` | string | `0px 0px -40%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. |
|
||||
| `rootMargin` | string | `0px 0px -25%` | Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) valid units, when calculating scroll position. |
|
||||
| `smoothScroll` | boolean | `false` | Enables smooth scrolling when a user clicks on a link that refers to ScrollSpy observables. |
|
||||
| `target` | string \| jQuery object \| DOM element | | Specifies element to apply Scrollspy plugin. |
|
||||
| `target` | string, DOM element | `null` | Specifies element to apply Scrollspy plugin. |
|
||||
| `threshold` | array | `[0.1, 0.5, 1]` | `IntersectionObserver` [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#threshold) valid input, when calculating scroll position.|
|
||||
|
||||
{{< /bs-table >}}
|
||||
|
||||
@@ -212,9 +212,9 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
|
||||
| `container` | string, element, false | `false` | Appends the tooltip to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize. |
|
||||
| `customClass` | string, function | `''` | Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
|
||||
| `delay` | number, object | `0` | Delay showing and hiding the tooltip (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
|
||||
| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
|
||||
| `fallbackPlacements` | array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
|
||||
| `html` | boolean | `false` | Allow HTML in the tooltip. If true, HTML tags in the tooltip's `title` will be rendered in the tooltip. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
|
||||
| `offset` | number, string, function | `[0, 0]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `offset` | array, string, function | `[0, 0]` | Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
|
||||
| `placement` | string, function | `'top'` | How to position the tooltip: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the tooltip instance. |
|
||||
| `popperConfig` | null, object, function | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Bootstrap's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.|
|
||||
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
|
||||
|
||||
@@ -339,6 +339,15 @@ direction: rtl
|
||||
<label for="exampleInputPassword1" class="form-label">كلمة السر</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleSelect" class="form-label">قائمة اختيار</label>
|
||||
<select class="form-select" id="exampleSelect">
|
||||
<option selected>افتح قائمة الاختيار هذه</option>
|
||||
<option value="1">واحد</option>
|
||||
<option value="2">اثنان</option>
|
||||
<option value="3">ثلاثة</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">اخترني</label>
|
||||
@@ -440,7 +449,7 @@ direction: rtl
|
||||
<input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg مثال">
|
||||
<select class="form-select form-select-lg" aria-label=".form-select-lg مثال">
|
||||
<option selected>افتح قائمة الاختيار هذه</option>
|
||||
<option value="1">واحد</option>
|
||||
<option value="2">اثنان</option>
|
||||
|
||||
@@ -338,6 +338,15 @@ body_class: "bg-light"
|
||||
<label for="exampleInputPassword1" class="form-label">Password</label>
|
||||
<input type="password" class="form-control" id="exampleInputPassword1">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleSelect" class="form-label">Select menu</label>
|
||||
<select class="form-select" id="exampleSelect">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
||||
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
||||
@@ -439,7 +448,7 @@ body_class: "bg-light"
|
||||
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
|
||||
<select class="form-select form-select-lg" aria-label=".form-select-lg example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
|
||||
@@ -5,7 +5,7 @@ extra_css:
|
||||
- "starter-template.css"
|
||||
---
|
||||
|
||||
<div class="col-lg-8 mx-auto p-3 py-md-5">
|
||||
<div class="col-lg-8 mx-auto p-4 py-md-5">
|
||||
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
|
||||
<a href="/" class="d-flex align-items-center text-dark text-decoration-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><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" fill="currentColor"></path></svg>
|
||||
|
||||
Reference in New Issue
Block a user