diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site')
60 files changed, 436 insertions, 297 deletions
diff --git a/vendor/twbs/bootstrap/site/.eslintrc.json b/vendor/twbs/bootstrap/site/.eslintrc.json index 7cca4bc20..1158ba36a 100644 --- a/vendor/twbs/bootstrap/site/.eslintrc.json +++ b/vendor/twbs/bootstrap/site/.eslintrc.json @@ -48,6 +48,7 @@ "prefer-template": "error", "strict": "error", "unicorn/no-array-for-each": "off", - "unicorn/numeric-separators-style": "off" + "unicorn/numeric-separators-style": "off", + "unicorn/prefer-node-protocol": "off" } } diff --git a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss index 6f3256894..f4865daf8 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss @@ -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 { diff --git a/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss b/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss index 4805a3c47..0cff3e2a8 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss @@ -4,6 +4,12 @@ background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); + .bd-navbar-toggle { + @include media-breakpoint-down(lg) { + width: 4.25rem; + } + } + .navbar-toggler { padding: 0; margin-right: -.5rem; diff --git a/vendor/twbs/bootstrap/site/assets/scss/_search.scss b/vendor/twbs/bootstrap/site/assets/scss/_search.scss index 24c0e2dc8..01e9d036e 100644 --- a/vendor/twbs/bootstrap/site/assets/scss/_search.scss +++ b/vendor/twbs/bootstrap/site/assets/scss/_search.scss @@ -2,7 +2,6 @@ .bd-search { position: relative; - width: 100%; @include media-breakpoint-up(lg) { position: absolute; @@ -24,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; @@ -57,6 +57,26 @@ opacity: 1; } } + + @include media-breakpoint-down(lg) { + &, + &:hover, + &:focus { + background: transparent; + border: 0; + box-shadow: none; + } + &:focus { + box-shadow: var(--docsearch-searchbox-shadow); + } + } +} + +.DocSearch-Button-Keys, +.DocSearch-Button-Placeholder { + @include media-breakpoint-down(lg) { + display: none; + } } .DocSearch-Button-Keys { diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/about/overview.md b/vendor/twbs/bootstrap/site/content/docs/5.2/about/overview.md index f61101c15..1f39b85aa 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/about/overview.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/about/overview.md @@ -26,4 +26,4 @@ Our latest release, Bootstrap 5, focuses on improving v4's codebase with as few ## Get involved -Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop. +Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/about/team.md b/vendor/twbs/bootstrap/site/content/docs/5.2/about/team.md index 3c1666f29..c00ba4efc 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/about/team.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/about/team.md @@ -20,4 +20,4 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor </div> {{< /team.inline >}} -Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop. +Get involved with Bootstrap development by [opening an issue]({{< param repo >}}/issues/new/choose) or submitting a pull request. Read our [contributing guidelines]({{< param repo >}}/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how we develop. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/buttons.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/buttons.md index 246641529..c2fdd75b1 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/buttons.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/buttons.md @@ -187,8 +187,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 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)`. | | `toggle` | Toggles push state. Gives the button the appearance that it has been activated. | {{< /bs-table >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/card.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/card.md index 78c7cd3f3..6bc90e7b8 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/card.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/card.md @@ -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 >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/carousel.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/carousel.md index fee28995b..e32ce64eb 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/carousel.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/carousel.md @@ -281,14 +281,20 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap ## Custom transition -The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out`). +The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (e.g. `transition: transform 2s ease, opacity .5s ease-out`). ## Sass ### 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 @@ -343,10 +349,10 @@ const carousel = new bootstrap.Carousel(myCarouselElement, { | --- | --- | | `cycle` | Cycles through the carousel items from left to right. | | `dispose` | Destroys an element's carousel. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `bootstrap.Carousel.getInstance(element)` | -| `getOrCreateInstance` | Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)` | +| `getInstance` | Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `bootstrap.Carousel.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)`. | | `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (e.g., before the `slid.bs.carousel` event occurs). | -| `nextWhenVisible` | Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. **Returns to the caller before the target item has been shown** | +| `nextWhenVisible` | Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. **Returns to the caller before the target item has been shown**. | | `pause` | Stops the carousel from cycling through items. | | `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (e.g., before the `slid.bs.carousel` event occurs). | | `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (e.g., before the `slid.bs.carousel` event occurs). | diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/collapse.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/collapse.md index 8d775e95d..21be901c0 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/collapse.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/collapse.md @@ -146,8 +146,8 @@ 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. | -`toggle` | boolean | `true` | Toggles the collapsible element on invocation | +`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 >}} ### Methods @@ -170,8 +170,8 @@ const bsCollapse = new bootstrap.Collapse('#myCollapse', { | Method | Description | | --- | --- | | `dispose` | Destroys an element's collapse. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: `bootstrap.Collapse.getInstance(element)` | -| `getOrCreateInstance` | Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Collapse.getOrCreateInstance(element)` | +| `getInstance` | Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: `bootstrap.Collapse.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Collapse.getOrCreateInstance(element)`. | | `hide` | Hides a collapsible element. **Returns to the caller before the collapsible element has actually been hidden** (e.g., before the `hidden.bs.collapse` event occurs). | | `show` | Shows a collapsible element. **Returns to the caller before the collapsible element has actually been shown** (e.g., before the `shown.bs.collapse` event occurs). | | `toggle` | Toggles a collapsible element to shown or hidden. **Returns to the caller before the collapsible element has actually been shown or hidden** (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs). | diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/dropdowns.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/dropdowns.md index ec7e584b5..b58922775 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/dropdowns.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/dropdowns.md @@ -1069,12 +1069,12 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d {{< bs-table "table" >}} | 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). | +| `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 | `'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` @@ -1095,7 +1095,7 @@ const dropdown = new bootstrap.Dropdown(element, { | Method | Description | | --- | --- | | `dispose` | Destroys an element's dropdown. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)` | +| `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `bootstrap.Dropdown.getInstance(element)`. | | `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Dropdown.getOrCreateInstance(element)`. | | `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. | | `show` | Shows the dropdown menu of a given navbar or tabbed navigation. | diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/list-group.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/list-group.md index 563d5b527..7804c7406 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/list-group.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/list-group.md @@ -442,62 +442,26 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane ### Methods -#### constructor - -Activates a list item element and content container. Tab should have either a `data-bs-target` or an `href` targeting a container node in the DOM. - -```html -<div class="list-group" id="myList" role="tablist"> - <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a> - <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a> - <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a> - <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a> -</div> - -<div class="tab-content"> - <div class="tab-pane active" id="home" role="tabpanel">...</div> - <div class="tab-pane" id="profile" role="tabpanel">...</div> - <div class="tab-pane" id="messages" role="tabpanel">...</div> - <div class="tab-pane" id="settings" role="tabpanel">...</div> -</div> - -<script> - const firstTabEl = document.querySelector('#myTab a:last-child') - const firstTab = new bootstrap.Tab(firstTabEl) - - firstTab.show() -</script> -``` - -#### show - -Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs). - -```js -const tab = new bootstrap.Tab('#someListItem') - -tab.show() -``` - -#### dispose - -Destroys an element's tab. +{{< callout danger >}} +{{< partial "callout-danger-async-methods.md" >}} +{{< /callout >}} -#### getInstance +Activates your content as a tab element. -*Static* method which allows you to get the tab instance associated with a DOM element +You can create a tab instance with the constructor, for example: ```js -const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance +const bsTab = new bootstrap.Tab('#myTab') ``` -#### getOrCreateInstance - -*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized - -```js -const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance -``` +{{< bs-table >}} +| Method | Description | +| --- | --- | +| `dispose` | Destroys an element's tab. | +| `getInstance` | Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`. | +| `show` | Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs). | +{{< /bs-table >}} ### Events @@ -508,7 +472,7 @@ When showing a new tab, the events fire in the following order: 3. `hidden.bs.tab` (on the previous active tab, the same one as for the `hide.bs.tab` event) 4. `shown.bs.tab` (on the newly-active just-shown tab, the same one as for the `show.bs.tab` event) -If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired. +If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired. {{< bs-table >}} | Event type | Description | diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/modal.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/modal.md index aa6012cb0..ed31b7374 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/modal.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/modal.md @@ -78,6 +78,10 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee </div> ``` +{{< callout info >}} +In the above static example, we use `<h5>`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `<h1>`. If necessary, you can use the [font size utilities]({{< docsref "/utilities/text#font-size" >}}) to control the heading's appearance. All the following live examples use this approach. +{{< /callout >}} + ### Live demo Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. @@ -86,7 +90,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalLiveLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -117,7 +121,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -140,7 +144,7 @@ When backdrop is set to static, the modal will not close when clicking outside o <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5> + <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -171,7 +175,7 @@ When backdrop is set to static, the modal will not close when clicking outside o <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> + <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -194,7 +198,7 @@ When modals become too long for the user's viewport or device, they scroll indep <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body" style="min-height: 1500px"> @@ -220,7 +224,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalScrollableTitle">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -257,7 +261,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalCenterTitle">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -275,7 +279,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -320,14 +324,14 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalPopoversLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> - <h5>Popover in a modal</h5> + <h2 class="fs-5">Popover in a modal</h2> <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p> <hr> - <h5>Tooltips in a modal</h5> + <h2 class="fs-5">Tooltips in a modal</h2> <p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p> </div> <div class="modal-footer"> @@ -346,10 +350,10 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. ```html <div class="modal-body"> - <h5>Popover in a modal</h5> + <h2 class="fs-5">Popover in a modal</h2> <p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p> <hr> - <h5>Tooltips in a modal</h5> + <h2 class="fs-5">Tooltips in a modal</h2> <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p> </div> ``` @@ -362,7 +366,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5> + <h1 class="modal-title fs-5" id="gridModalLabel">Grids in modals</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -453,7 +457,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLabel">New message</h5> + <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -505,7 +509,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5> + <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -521,7 +525,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5> + <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -595,7 +599,7 @@ Our default modal without modifier class constitutes the "medium" size modal. <div class="modal-dialog modal-xl"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5> + <h1 class="modal-title fs-4" id="exampleModalXlLabel">Extra large modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -609,7 +613,7 @@ Our default modal without modifier class constitutes the "medium" size modal. <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5> + <h1 class="modal-title fs-4" id="exampleModalLgLabel">Large modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -623,7 +627,7 @@ Our default modal without modifier class constitutes the "medium" size modal. <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5> + <h1 class="modal-title fs-4" id="exampleModalSmLabel">Small modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -668,7 +672,7 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -685,7 +689,7 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-dialog modal-fullscreen-sm-down"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenSmLabel">Full screen below sm</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -702,7 +706,7 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-dialog modal-fullscreen-md-down"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenMdLabel">Full screen below md</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -719,7 +723,7 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-dialog modal-fullscreen-lg-down"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenLgLabel">Full screen below lg</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -736,7 +740,7 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-dialog modal-fullscreen-xl-down"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenXlLabel">Full screen below xl</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -753,7 +757,7 @@ Another override is the option to pop up a modal that covers the user viewport, <div class="modal-dialog modal-fullscreen-xxl-down"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -858,7 +862,7 @@ const myModal = new bootstrap.Modal('#myModal', { | `getOrCreateInstance` | *Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. | | `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). | | `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). | -| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` | +| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`. | | `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). | {{< /bs-table >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md index a1d671a42..7cbc4e2c1 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/navbar.md @@ -109,7 +109,7 @@ You can replace the text within the `.navbar-brand` with an `<img>`. <nav class="navbar bg-light"> <div class="container"> <a class="navbar-brand" href="#"> - <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24"> + <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24"> </a> </div> </nav> @@ -123,7 +123,7 @@ You can also make use of some additional utilities to add an image and text at t <nav class="navbar bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#"> - <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top"> + <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top"> Bootstrap </a> </div> @@ -708,7 +708,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr </ul> </li> </ul> - <form class="d-flex" role="search"> + <form class="d-flex mt-3" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success" type="submit">Search</button> </form> @@ -768,7 +768,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark </ul> </li> </ul> - <form class="d-flex" role="search"> + <form class="d-flex mt-3" role="search"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-success" type="submit">Search</button> </form> @@ -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 diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md index 2b58bdd72..1748dd1bb 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/navs-tabs.md @@ -625,71 +625,22 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} -#### constructor +Activates your content as a tab element. -Activates a tab element and content container. Tab should have either a `data-bs-target` or, if using a link, an `href` attribute, targeting a container node in the DOM. - -```html -<ul class="nav nav-tabs" id="myTab" role="tablist"> - <li class="nav-item" role="presentation"> - <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button> - </li> - <li class="nav-item" role="presentation"> - <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button> - </li> - <li class="nav-item" role="presentation"> - <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button> - </li> - <li class="nav-item" role="presentation"> - <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button> - </li> -</ul> - -<div class="tab-content"> - <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div> - <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div> - <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div> - <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div> -</div> - -<script> - const firstTabEl = document.querySelector('#myTab li:last-child button') - const firstTab = new bootstrap.Tab(firstTabEl) - - firstTab.show() -</script> -``` - -#### show - -Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs). +You can create a tab instance with the constructor, for example: ```js -const someTabTriggerEl = document.querySelector('#someTabTrigger') -const tab = new bootstrap.Tab(someTabTriggerEl) - -tab.show() +const bsTab = new bootstrap.Tab('#myTab') ``` -#### dispose - -Destroys an element's tab. - -#### getInstance - -*Static* method which allows you to get the tab instance associated with a DOM element - -```js -const tab = bootstrap.Tab.getInstance('#trigger') // Returns a Bootstrap tab instance -``` - -#### getOrCreateInstance - -*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialized - -```js -const tab = bootstrap.Tab.getOrCreateInstance('#trigger') // Returns a Bootstrap tab instance -``` +{{< bs-table >}} +| Method | Description | +| --- | --- | +| `dispose` | Destroys an element's tab. | +| `getInstance` | Static method which allows you to get the tab instance associated with a DOM element, you can use it like this: `bootstrap.Tab.getInstance(element)`. | +| `getOrCreateInstance` | Static method which returns a tab instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Tab.getOrCreateInstance(element)`. | +| `show` | Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs). | +{{< /bs-table >}} ### Events diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md index 39a5fb826..c4290adf2 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/offcanvas.md @@ -79,22 +79,6 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ </div> {{< /example >}} -### Dark offcanvas - -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. @@ -153,9 +137,27 @@ 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 -<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small> +{{< added-in "5.2.0" >}} Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, `.offcanvas-lg` hides content in an offcanvas below the `lg` breakpoint, but shows the content above the `lg` breakpoint. @@ -245,7 +247,7 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l ### Variables -<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small> +{{< added-in "5.2.0" >}} As part of Bootstrap's evolving CSS variables approach, offcanvas now uses local CSS variables on `.offcanvas` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. @@ -301,8 +303,8 @@ const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap | Name | Type | Default | Description | | --- | --- | --- | --- | | `backdrop` | boolean or the string `static` | `true` | Apply a backdrop on body while offcanvas is open. Alternatively, specify `static` for a backdrop which doesn't close the offcanvas when clicked. | -| `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed | -| `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open | +| `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed. | +| `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open. | {{< /bs-table >}} ### Methods @@ -322,10 +324,10 @@ const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas') {{< bs-table "table" >}} | Method | Description | | --- | --- | -| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element | -| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized | -| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs).| -| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs).| +| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element. | +| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized. | +| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs). | +| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs). | | `toggle` | Toggles an offcanvas element to shown or hidden. **Returns to the caller before the offcanvas element has actually been shown or hidden** (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs). | {{< /bs-table >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/popovers.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/popovers.md index 8dd28ec55..9726c3034 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/popovers.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/popovers.md @@ -83,6 +83,14 @@ const popover = new bootstrap.Popover('.example-popover', { }) ``` +Another situation where you'll want to set an explicit custom `container` are popovers inside a [modal dialog]({{< docsref "/components/modal" >}}), to make sure that the popover itself is appended to the modal. This is particularly important for popovers that contain interactive elements – modal dialogs will trap focus, so unless the popover is a child element of the modal, users won't be able to focus or activate these interactive elements. + +```js +const popover = new bootstrap.Popover('.example-popover', { + container: '.modal-body' +}) +``` + ### Custom popovers {{< added-in "5.2.0" >}} @@ -176,25 +184,24 @@ Additionally, while it is possible to also include interactive controls (such as Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. {{< /callout >}} - {{< bs-table "table" >}} | Name | Type | Default | Description | | --- | --- | --- | --- | | `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. | -| `animation` | boolean | `true` | Apply a CSS fade transition to the popover | +| `animation` | boolean | `true` | Apply a CSS fade transition to the popover. | | `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (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). | | `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. | -| `content` | string, element, function | `''` | Default content value if `data-bs-content` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. +| `content` | string, element, function | `''` | Default content value if `data-bs-content` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | | `customClass` | string, function | `''` | Add classes to the popover 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 popover (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). | | `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover's `title` will be rendered in the popover. 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 popover 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 popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover 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.| +| `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. | | `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. | -| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). | +| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. | | `template` | string | `'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. | | `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | | `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. | @@ -231,7 +238,7 @@ const popover = new bootstrap.Popover(element, { | `dispose` | Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. | | `enable` | Gives an element's popover the ability to be shown. **Popovers are enabled by default.** | | `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. | -| `getOrCreateInstance` | *Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized | +| `getOrCreateInstance` | *Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized. | | `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. | | `setContent` | Gives a way to change the popover's content after its initialization. | | `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. | diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/scrollspy.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/scrollspy.md index 5e329dc85..53e3fa0d3 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/scrollspy.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/scrollspy.md @@ -377,9 +377,11 @@ 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 >}} {{< callout warning >}} @@ -395,7 +397,7 @@ To keep backwards compatibility, we will continue to parse a given `offset` to ` | Method | Description | | --- | --- | | `dispose` | Destroys an element's scrollspy. (Removes stored data on the DOM element) | -| `getInstance` | *Static* method to get the scrollspy instance associated with a DOM element | +| `getInstance` | *Static* method to get the scrollspy instance associated with a DOM element. | | `getOrCreateInstance` | *Static* method to get the scrollspy instance associated with a DOM element, or to create a new one in case it wasn't initialized. | | `refresh` | When adding or removing elements in the DOM, you'll need to call the refresh method. | {{< /bs-table >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/toasts.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/toasts.md index 562fbf28a..abcb3928a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/toasts.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/toasts.md @@ -360,9 +360,9 @@ const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, o {{< bs-table "table" >}} | Name | Type | Default | Description | | --- | --- | --- | --- | -| `animation` | boolean | `true` | Apply a CSS fade transition to the toast | -| `autohide` | boolean | `true` | Automatically hide the toast after the delay | -| `delay` | number | `5000` | Delay in milliseconds before hiding the toast | +| `animation` | boolean | `true` | Apply a CSS fade transition to the toast. | +| `autohide` | boolean | `true` | Automatically hide the toast after the delay. | +| `delay` | number | `5000` | Delay in milliseconds before hiding the toast. | {{< /bs-table >}} ### Methods @@ -375,8 +375,8 @@ const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, o | Method | Description | | --- | --- | | `dispose` | Hides an element's toast. Your toast will remain on the DOM but won't show anymore. | -| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element. <br> For example: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance| -| `getOrCreateInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one, in case it wasn't initialized. <br>`const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance | +| `getInstance` | *Static* method which allows you to get the toast instance associated with a DOM element. <br> For example: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance. | +| `getOrCreateInstance` | *Static* method which allows you to get the toast instance associated with a DOM element, or create a new one, in case it wasn't initialized. <br>`const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance. | | `hide` | Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. | | `isShown` | Returns a boolean according to toast's visibility state. | | `show` | Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won't show. | diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/components/tooltips.md b/vendor/twbs/bootstrap/site/content/docs/5.2/components/tooltips.md index acdecc9f3..a106d9de8 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/components/tooltips.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/components/tooltips.md @@ -207,19 +207,19 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt | Name | Type | Default | Description | | --- | --- | --- | --- | | `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. | -| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip | +| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip. | | `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the tooltip (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). | | `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.| +| `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. | | `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. | -| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). | +| `selector` | string, false | `false` | If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to also apply tooltips to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. | | `template` | string | `'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'` | Base HTML to use when creating the tooltip. The tooltip's `title` will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class and `role="tooltip"`. | | `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. | | `trigger` | string | `'hover focus'` | How tooltip is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the tooltip will be triggered programmatically via the `.tooltip('show')`, `.tooltip('hide')` and `.tooltip('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. | @@ -255,8 +255,8 @@ const tooltip = new bootstrap.Tooltip(element, { | `disable` | Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled. | | `dispose` | Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. | | `enable` | Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** | -| `getInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized | -| `getOrCreateInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized | +| `getInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. | +| `getOrCreateInstance` | *Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialized. | | `hide` | Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. | | `setContent` | Gives a way to change the tooltip's content after its initialization. | | `show` | Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed. | diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/customize/overview.md b/vendor/twbs/bootstrap/site/content/docs/5.2/customize/overview.md index 1b332bfe4..d0a853cd6 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/customize/overview.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/customize/overview.md @@ -48,4 +48,4 @@ Several Bootstrap components include embedded SVGs in our CSS to style component - [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}}) - [Select menus]({{< docsref "/forms/select" >}}) -Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary. +Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]({{< docsref "/getting-started/webpack#extracting-svg-files" >}}), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/_index.md b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/_index.md index 8241892a5..46688839b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/_index.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/_index.md @@ -16,7 +16,7 @@ aliases: "/examples/" <p> <strong>RTL is still experimental</strong> and will evolve with feedback. Spotted something or have an improvement to suggest? </p> - <p><a href="{{ $.Site.Params.repo }}/issues/new">Please open an issue.</a></p> + <p><a href="{{ $.Site.Params.repo }}/issues/new/choose">Please open an issue.</a></p> </div> {{ end -}} </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet-rtl/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet-rtl/index.html index 77accc976..a05799873 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet-rtl/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet-rtl/index.html @@ -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> @@ -1530,7 +1539,7 @@ direction: rtl <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5> + <h1 class="modal-title fs-5" id="exampleModalLabel">عنوان الصندوق العائم</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> @@ -1547,7 +1556,7 @@ direction: rtl <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5> + <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> @@ -1564,7 +1573,7 @@ direction: rtl <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5> + <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> @@ -1587,7 +1596,7 @@ direction: rtl <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet/index.html index 5627f8375..a2285d0ed 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/cheatsheet/index.html @@ -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> @@ -1526,7 +1535,7 @@ body_class: "bg-light" <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -1543,7 +1552,7 @@ body_class: "bg-light" <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5> + <h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -1560,7 +1569,7 @@ body_class: "bg-light" <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5> + <h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> @@ -1579,7 +1588,7 @@ body_class: "bg-light" <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> - <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5> + <h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/features.css b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/features.css index 619222364..b5d658f6b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/features.css +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/features.css @@ -29,3 +29,8 @@ background-position: center center; background-size: cover; } + +.feature-icon-small { + width: 3rem; + height: 3rem; +} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/index.html index 07ae5ad3c..c134a0a91 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/features/index.html @@ -74,7 +74,7 @@ body_class: "" <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg> </div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <a href="#" class="icon-link d-inline-flex align-items-center"> Call to action @@ -85,7 +85,7 @@ body_class: "" <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg> </div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <a href="#" class="icon-link d-inline-flex align-items-center"> Call to action @@ -96,7 +96,7 @@ body_class: "" <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3"> <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> </div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <a href="#" class="icon-link d-inline-flex align-items-center"> Call to action @@ -116,7 +116,7 @@ body_class: "" <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg> </div> <div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <a href="#" class="btn btn-primary"> Primary button @@ -128,7 +128,7 @@ body_class: "" <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg> </div> <div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <a href="#" class="btn btn-primary"> Primary button @@ -140,7 +140,7 @@ body_class: "" <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg> </div> <div> - <h2>Featured title</h2> + <h3 class="fs-2">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> <a href="#" class="btn btn-primary"> Primary button @@ -159,7 +159,7 @@ body_class: "" <div class="col"> <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');"> <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> - <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2> + <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3> <ul class="d-flex list-unstyled mt-auto"> <li class="me-auto"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> @@ -180,7 +180,7 @@ body_class: "" <div class="col"> <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');"> <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1"> - <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2> + <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h3> <ul class="d-flex list-unstyled mt-auto"> <li class="me-auto"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> @@ -201,7 +201,7 @@ body_class: "" <div class="col"> <div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');"> <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1"> - <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2> + <h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h3> <ul class="d-flex list-unstyled mt-auto"> <li class="me-auto"> <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white"> @@ -230,59 +230,118 @@ body_class: "" <div class="col d-flex align-items-start"> <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> <div> - <h4 class="fw-bold mb-0">Featured title</h4> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> <div> - <h4 class="fw-bold mb-0">Featured title</h4> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> <div> - <h4 class="fw-bold mb-0">Featured title</h4> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> <div> - <h4 class="fw-bold mb-0">Featured title</h4> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> <div> - <h4 class="fw-bold mb-0">Featured title</h4> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> <div> - <h4 class="fw-bold mb-0">Featured title</h4> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> <div> - <h4 class="fw-bold mb-0">Featured title</h4> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> <div class="col d-flex align-items-start"> <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> <div> - <h4 class="fw-bold mb-0">Featured title</h4> + <h3 class="fw-bold mb-0 fs-4">Featured title</h3> <p>Paragraph of text beneath the heading to explain the heading.</p> </div> </div> </div> </div> + + <div class="b-example-divider"></div> + + <div class="container px-4 py-5"> + <h2 class="pb-2 border-bottom">Features with title</h2> + + <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5"> + <div class="d-flex flex-column align-items-start gap-2"> + <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p> + <a href="#" class="btn btn-primary btn-lg">Primary button</a> + </div> + <div class="row row-cols-1 row-cols-sm-2 g-4"> + <div class="d-flex flex-column gap-2"> + <div + class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> + <svg class="bi" width="1em" height="1em"> + <use xlink:href="#collection" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + + <div class="d-flex flex-column gap-2"> + <div + class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> + <svg class="bi" width="1em" height="1em"> + <use xlink:href="#gear-fill" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + + <div class="d-flex flex-column gap-2"> + <div + class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> + <svg class="bi" width="1em" height="1em"> + <use xlink:href="#speedometer" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + + <div class="d-flex flex-column gap-2"> + <div + class="feature-icon-small d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-4 rounded-3"> + <svg class="bi" width="1em" height="1em"> + <use xlink:href="#table" /> + </svg> + </div> + <h4 class="fw-semibold mb-0">Featured title</h4> + <p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> + </div> + </div> + </div> + </div> </main> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/modals/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/modals/index.html index 0f16aabf8..a68bd419e 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/modals/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/modals/index.html @@ -59,7 +59,7 @@ body_class: "" <div class="modal-dialog" role="document"> <div class="modal-content rounded-4 shadow"> <div class="modal-header border-bottom-0"> - <h5 class="modal-title">Modal title</h5> + <h1 class="modal-title fs-5">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-0"> @@ -133,8 +133,8 @@ body_class: "" <div class="modal-dialog" role="document"> <div class="modal-content rounded-4 shadow"> <div class="modal-header p-5 pb-4 border-bottom-0"> - <!-- <h5 class="modal-title">Modal title</h5> --> - <h2 class="fw-bold mb-0">Sign up for free</h2> + <!-- <h1 class="modal-title fs-5" >Modal title</h1> --> + <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/starter-template/index.html b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/starter-template/index.html index a16984ab9..5a898a44d 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/examples/starter-template/index.html +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/examples/starter-template/index.html @@ -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> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/forms/layout.md b/vendor/twbs/bootstrap/site/content/docs/5.2/forms/layout.md index 21423040e..3b27e3f1c 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/forms/layout.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/forms/layout.md @@ -291,7 +291,7 @@ You can then remix that once again with size-specific column classes. ## Inline forms -Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly. +Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-check` align properly. {{< example >}} <form class="row row-cols-lg-auto g-3 align-items-center"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/best-practices.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/best-practices.md index e17fc1290..449d02a85 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/best-practices.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/best-practices.md @@ -17,4 +17,4 @@ We've designed and developed Bootstrap to work in a number of environments. Here - Working with Sass files - Building new CSS components - Working with flexbox -- Ask in [Slack](https://bootstrap-slack.herokuapp.com/) +- Ask in [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions) diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/browsers-devices.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/browsers-devices.md index 41885feaa..dc550ecb9 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/browsers-devices.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/browsers-devices.md @@ -30,7 +30,7 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor | | Chrome | Firefox | Safari | Android Browser & WebView | | --- | --- | --- | --- | --- | | **Android** | Supported | Supported | <span class="text-muted">—</span> | v6.0+ | -| **Windows** | Supported | Supported | Supported | <span class="text-muted">—</span> | +| **iOS** | Supported | Supported | Supported | <span class="text-muted">—</span> | {{< /bs-table >}} ### Desktop browsers diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/contents.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/contents.md index a83b65ee3..88632b6d5 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/contents.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/contents.md @@ -1,12 +1,12 @@ --- layout: docs title: Contents -description: Discover what's included in Bootstrap, including our precompiled and source code flavors. +description: Discover what's included in Bootstrap, including our compiled and source code flavors. group: getting-started toc: true --- -## Precompiled Bootstrap +## Compiled Bootstrap Once downloaded, unzip the compressed folder and you'll see something like this: @@ -62,9 +62,9 @@ bootstrap/ └── bootstrap.min.js.map ``` -This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/). +This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/). -## CSS files +### CSS files Bootstrap includes a handful of options for including some or all of our compiled CSS. @@ -77,7 +77,7 @@ Bootstrap includes a handful of options for including some or all of our compile | `bootstrap-reboot.css`<br> `bootstrap-reboot.rtl.css`<br> `bootstrap-reboot.min.css`<br> `bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — | {{< /bs-table >}} -## JS files +### JS files Similarly, we have options for including some or all of our compiled JavaScript. @@ -90,7 +90,7 @@ Similarly, we have options for including some or all of our compiled JavaScript. ## Bootstrap source code -The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more: +The Bootstrap source code download includes the compiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more: ```text bootstrap/ @@ -106,4 +106,6 @@ bootstrap/ └── scss/ ``` -The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `site/docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development. +The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the compiled download section above. The `site/content/docs/` folder includes the source code for our hosted documentation, including our live examples of Bootstrap usage. + +Beyond that, any other included file provides support for packages, license information, and development. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/download.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/download.md index eeffdc83e..b06c0559a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/download.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/download.md @@ -68,7 +68,7 @@ The `bootstrap` module itself exports all of our plugins. You can manually load Bootstrap's `package.json` contains some additional metadata under the following keys: - `sass` - path to Bootstrap's main [Sass](https://sass-lang.com/) source file -- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization) +- `style` - path to Bootstrap's non-minified CSS that's been compiled using the default settings (no customization) {{< callout info >}} {{< partial "callout-info-npm-starter.md" >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/introduction.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/introduction.md index 4eaf5d6f8..f0072bf85 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/introduction.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/introduction.md @@ -76,7 +76,7 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co - Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes. -- Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) and the list of [components that require JavaScript](#js-components) below. +- Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents/" >}}) and the list of [components that require JavaScript](#js-components) below. - Need a little more power? Consider building with Bootstrap by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}). @@ -151,10 +151,10 @@ For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/rebo ## Community -Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources. +Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources. - Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}). -- Join [the official Slack room]({{< param slack >}}). +- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions). - Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel. - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)). - Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability. diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/javascript.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/javascript.md index fa157e006..c4ba6b0f7 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/javascript.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/javascript.md @@ -222,8 +222,8 @@ Every Bootstrap plugin exposes the following methods and static properties. {{< bs-table "table" >}} | Static property | Description | | --- | --- | -| `NAME` | Returns the plugin name. (Example: `bootstrap.Tooltip.NAME`) | -| `VERSION` | The version of each of Bootstrap's plugins can be accessed via the `VERSION` property of the plugin's constructor (Example: `bootstrap.Tooltip.VERSION`) | +| `NAME` | Returns the plugin name. (Example: `bootstrap.Tooltip.NAME`) | +| `VERSION` | The version of each of Bootstrap's plugins can be accessed via the `VERSION` property of the plugin's constructor (Example: `bootstrap.Tooltip.VERSION`) | {{< /bs-table >}} ## Sanitizer diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/parcel.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/parcel.md index 674a39837..d28f92384 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/parcel.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/parcel.md @@ -4,6 +4,7 @@ title: "Bootstrap & Parcel" description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Parcel. group: getting-started toc: true +thumbnail: guides/bootstrap-parcel@2x.png --- <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-parcel.png" width="2000" height="1000" alt=""> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/rtl.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/rtl.md index 19d33ffb4..f4abf050b 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/rtl.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/rtl.md @@ -15,7 +15,7 @@ You may also want to read up on [the RTLCSS project](https://rtlcss.com/), as it {{< callout warning >}} ### Experimental feature -The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new), we'd love to get your insights. +The RTL feature is still **experimental** and will probably evolve according to user feedback. Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new/choose), we'd love to get your insights. {{< /callout >}} ## Required HTML diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/vite.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/vite.md index ca71bbe31..b203eef8a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/vite.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/vite.md @@ -4,6 +4,7 @@ title: "Bootstrap & Vite" description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Vite. group: getting-started toc: true +thumbnail: guides/bootstrap-vite@2x.png --- <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-vite.png" width="2000" height="1000" alt=""> @@ -72,7 +73,7 @@ At this point, everything is in the right place, but Vite won't work because we With dependencies installed and our project folder ready for us to start coding, we can now configure Vite and run our project locally. -1. **Open `vite.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Vite were to look for our project's JavaScript and how the development server should behave (pulling from the `src` folder with hot reload). +1. **Open `vite.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Vite where to look for our project's JavaScript and how the development server should behave (pulling from the `src` folder with hot reload). <!-- eslint-skip --> ```js diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/webpack.md b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/webpack.md index e314ecf6a..870e070e3 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/webpack.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/getting-started/webpack.md @@ -4,6 +4,7 @@ title: "Bootstrap & Webpack" description: The official guide for how to include and bundle Bootstrap's CSS and JavaScript in your project using Webpack. group: getting-started toc: true +thumbnail: guides/bootstrap-webpack@2x.png --- <img class="mb-4 img-fluid rounded-3" srcset="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png, /docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack@2x.png 2x" src="/docs/{{< param docs_version >}}/assets/img/guides/bootstrap-webpack.png" width="2000" height="1000" alt=""> @@ -74,7 +75,7 @@ At this point, everything is in the right place, but Webpack won't work because With dependencies installed and our project folder ready for us to start coding, we can now configure Webpack and run our project locally. -1. **Open `webpack.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Webpack were to look for our project's JavaScript, where to output the compiled code to (`dist`), and how the development server should behave (pulling from the `dist` folder with hot reload). +1. **Open `webpack.config.js` in your editor.** Since it's blank, we'll need to add some boilerplate config to it so we can start our server. This part of the config tells Webpack where to look for our project's JavaScript, where to output the compiled code to (`dist`), and how the development server should behave (pulling from the `dist` folder with hot reload). ```js const path = require('path') @@ -229,6 +230,93 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need. +## Production optimizations + +Depending on your setup, you may want to implement some additional security and speed optimizations useful for running the project in production. Note that these optimizations are not applied on [the Webpack example project](https://github.com/twbs/examples/tree/main/webpack) and are up to you to implement. + +### Extracting CSS + +The `style-loader` we configured above conveniently emits CSS into the bundle so that manually loading a CSS file in `dist/index.html` isn't necessary. This approach may not work with a strict Content Security Policy, however, and it may become a bottleneck in your application due to the large bundle size. + +To separate the CSS so that we can load it directly from `dist/index.html`, use the `mini-css-extract-loader` Webpack plugin. + +First, install the plugin: + +```sh +npm install --save-dev mini-css-extract-plugin +``` + +Then instantiate and use the plugin in the Webpack configuration: + +```diff +--- a/webpack/webpack.config.js ++++ b/webpack/webpack.config.js +@@ -1,8 +1,10 @@ ++const miniCssExtractPlugin = require('mini-css-extract-plugin') + const path = require('path') + + module.exports = { + mode: 'development', + entry: './src/js/main.js', ++ plugins: [new miniCssExtractPlugin()], + output: { + filename: "main.js", + path: path.resolve(__dirname, "dist"), +@@ -18,8 +20,8 @@ module.exports = { + test: /\.(scss)$/, + use: [ + { +- // Adds CSS to the DOM by injecting a `<style>` tag +- loader: 'style-loader' ++ // Extracts CSS for each JS file that includes CSS ++ loader: miniCssExtractPlugin.loader + }, + { +``` + +After running `npm run build` again, there will be a new file `dist/main.css`, which will contain all of the CSS imported by `src/js/main.js`. If you view `dist/index.html` in your browser now, the style will be missing, as it is now in `dist/main.css`. You can include the generated CSS in `dist/index.html` like this: + +```diff +--- a/webpack/dist/index.html ++++ b/webpack/dist/index.html +@@ -3,6 +3,7 @@ + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> ++ <link rel="stylesheet" href="./main.css"> + <title>Bootstrap w/ Webpack</title> + </head> + <body> +``` + +### Extracting SVG files + +Bootstrap's CSS includes multiple references to SVG files via inline `data:` URIs. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack's asset modules feature. + +Configure Webpack to extract inline SVG files like this: + +```diff +--- a/webpack/webpack.config.js ++++ b/webpack/webpack.config.js +@@ -16,6 +16,14 @@ module.exports = { + }, + module: { + rules: [ ++ { ++ mimetype: 'image/svg+xml', ++ scheme: 'data', ++ type: 'asset/resource', ++ generator: { ++ filename: 'icons/[hash].svg' ++ } ++ }, + { + test: /\.(scss)$/, + use: [ +``` + +After running `npm run build` again, you'll find the SVG files extracted into `dist/icons` and properly referenced from CSS. + {{< markdown >}} {{< partial "guide-footer.md" >}} {{< /markdown >}} diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/layout/breakpoints.md b/vendor/twbs/bootstrap/site/content/docs/5.2/layout/breakpoints.md index df56924b3..e773b8f9a 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/layout/breakpoints.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/layout/breakpoints.md @@ -22,7 +22,7 @@ Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers {{< bs-table "table" >}} | Breakpoint | Class infix | Dimensions | | --- | --- | --- | -| Extra small | <em>None</em> |<576px | +| Extra small | <em>None</em> |<576px | | Small | `sm` | ≥576px | | Medium | `md` | ≥768px | | Large | `lg` | ≥992px | diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/layout/grid.md b/vendor/twbs/bootstrap/site/content/docs/5.2/layout/grid.md index 44465e907..a9d00376f 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/layout/grid.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/layout/grid.md @@ -420,6 +420,7 @@ Variables and maps determine the number of columns, the gutter width, and the me ```scss $grid-columns: 12; $grid-gutter-width: 1.5rem; +$grid-row-columns: 6; ``` {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}} @@ -499,11 +500,12 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus ### Columns and gutters -The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters. +The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters. `$grid-row-columns` is used to set the maximum number of columns of `.row-cols-*`, any number over this limit is ignored. ```scss $grid-columns: 12 !default; $grid-gutter-width: 1.5rem !default; +$grid-row-columns: 6 !default; ``` ### Grid tiers diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/layout/gutters.md b/vendor/twbs/bootstrap/site/content/docs/5.2/layout/gutters.md index 1cb68303f..586209451 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/layout/gutters.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/layout/gutters.md @@ -48,7 +48,7 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo ## Vertical gutters -`.gy-*` classes can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class: +`.gy-*` classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class: {{< example >}} <div class="container overflow-hidden text-center"> diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/utilities/borders.md b/vendor/twbs/bootstrap/site/content/docs/5.2/utilities/borders.md index 64913bbc9..8d850a214 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/utilities/borders.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.2/utilities/borders.md @@ -143,6 +143,8 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from ### Variables +{{< added-in "5.2.0" >}} + {{< scss-docs name="root-border-var" file="scss/_root.scss" >}} ### Sass variables diff --git a/vendor/twbs/bootstrap/site/data/docs-versions.yml b/vendor/twbs/bootstrap/site/data/docs-versions.yml index 4b3f4836f..1c98de07b 100644 --- a/vendor/twbs/bootstrap/site/data/docs-versions.yml +++ b/vendor/twbs/bootstrap/site/data/docs-versions.yml @@ -48,7 +48,7 @@ - group: v5.x baseurl: "https://getbootstrap.com/docs" - description: "Current major release. Last update was v5.2.0." + description: "Current major release. Last update was v5.2.2." versions: - v: "5.0" - v: "5.1" diff --git a/vendor/twbs/bootstrap/site/data/examples.yml b/vendor/twbs/bootstrap/site/data/examples.yml index 38644ef4a..97d4bfb93 100644 --- a/vendor/twbs/bootstrap/site/data/examples.yml +++ b/vendor/twbs/bootstrap/site/data/examples.yml @@ -19,7 +19,7 @@ description: "Transform modals to serve any purpose, from feature tours to dialogs." - category: Custom Components - description: "Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework." + description: "Brand-new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework." examples: - name: Album description: "Simple one-page template for photo galleries, portfolios, and more." diff --git a/vendor/twbs/bootstrap/site/layouts/_default/docs.html b/vendor/twbs/bootstrap/site/layouts/_default/docs.html index d7fcf23c8..1a3f9c1a1 100644 --- a/vendor/twbs/bootstrap/site/layouts/_default/docs.html +++ b/vendor/twbs/bootstrap/site/layouts/_default/docs.html @@ -16,7 +16,7 @@ <main class="bd-main order-1"> <div class="bd-intro pt-2 ps-lg-2"> <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between"> - <a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener"> + <a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener"> View on GitHub </a> <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/docs-navbar.html b/vendor/twbs/bootstrap/site/layouts/partials/docs-navbar.html index e4f6eaaa7..68a086e89 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/docs-navbar.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/docs-navbar.html @@ -1,21 +1,29 @@ <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top"> <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation"> {{- if eq .Layout "docs" }} + <div class="bd-navbar-toggle"> <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation"> {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }} <span class="d-none fs-6 pe-1">Browse</span> </button> + </div> {{- else }} - <div class="d-lg-none" style="width: 2.25rem;"></div> + <div class="d-lg-none" style="width: 1.5rem;"></div> {{- end }} <a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap"> {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }} </a> - <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> - </button> + <div class="d-flex"> + {{ if eq .Layout "docs" }} + <div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div> + {{ end }} + + <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> + </button> + </div> <div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true"> <div class="offcanvas-header px-4 pb-0"> @@ -45,12 +53,6 @@ <hr class="d-lg-none text-white-50"> - {{ if eq .Layout "docs" }} - <div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div> - - <hr class="d-lg-none text-white-50"> - {{ end }} - <ul class="navbar-nav flex-row flex-wrap ms-md-auto"> <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener"> @@ -65,12 +67,6 @@ </a> </li> <li class="nav-item col-6 col-lg-auto"> - <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener"> - {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }} - <small class="d-lg-none ms-2">Slack</small> - </a> - </li> - <li class="nav-item col-6 col-lg-auto"> <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener"> {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }} <small class="d-lg-none ms-2">Open Collective</small> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/footer.html b/vendor/twbs/bootstrap/site/layouts/partials/footer.html index 78febb204..336032ab1 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/footer.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/footer.html @@ -51,7 +51,6 @@ <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="{{ .Site.Params.slack }}">Slack</a></li> <li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li> </ul> </div> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/header.html b/vendor/twbs/bootstrap/site/layouts/partials/header.html index a592cdccb..ceeb8b546 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/header.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/header.html @@ -7,7 +7,7 @@ <meta name="docsearch:language" content="en"> <meta name="docsearch:version" content="{{ .Site.Params.docs_version }}"> -<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.description | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title> +<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title> <link rel="canonical" href="{{ .Permalink }}"> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/home/masthead-followup.html b/vendor/twbs/bootstrap/site/layouts/partials/home/masthead-followup.html index 00a9e3367..58c9fb65f 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/home/masthead-followup.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/home/masthead-followup.html @@ -47,7 +47,7 @@ <p>Get a jump on including Bootstrap's source files in a new project with our official guides.</p> <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4"> <a class="d-flex flex-column align-items-center text-decoration-none" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack"> - <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.png" alt="" width="72" height="72" loading="lazy"> + <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy"> <span class="text-muted">Webpack</span> </a> <a class="d-flex flex-column align-items-center text-decoration-none" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel"> @@ -55,7 +55,7 @@ <span class="text-muted">Parcel</span> </a> <a class="d-flex flex-column align-items-center text-decoration-none" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite"> - <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.png" alt="" width="72" height="72" loading="lazy"> + <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy"> <span class="text-muted">Vite</span> </a> </div> diff --git a/vendor/twbs/bootstrap/site/layouts/partials/icons/slack.svg b/vendor/twbs/bootstrap/site/layouts/partials/icons/slack.svg deleted file mode 100644 index e3c995cc7..000000000 --- a/vendor/twbs/bootstrap/site/layouts/partials/icons/slack.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg"{{ with .width }} width="{{ . }}"{{ end }}{{ with .height }} height="{{ . }}"{{ end }}{{ with .class }} class="{{ . }}"{{ end }} viewBox="0 0 512 512" role="img"><title>{{ with .title }}{{ . }}{{ else }}Slack{{ end }}</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"/></svg>
\ No newline at end of file diff --git a/vendor/twbs/bootstrap/site/layouts/partials/social.html b/vendor/twbs/bootstrap/site/layouts/partials/social.html index a63f6caee..2226c386c 100644 --- a/vendor/twbs/bootstrap/site/layouts/partials/social.html +++ b/vendor/twbs/bootstrap/site/layouts/partials/social.html @@ -1,17 +1,15 @@ -{{ "<!-- Twitter -->" | safeHTML }} -<meta name="twitter:card" content="{{ if .IsHome }}summary_large_image{{ else }}summary{{ end }}"> +<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@{{ .Site.Params.twitter }}"> <meta name="twitter:creator" content="@{{ .Site.Params.twitter }}"> <meta name="twitter:title" content="{{ .Title | markdownify }}"> <meta name="twitter:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}"> -<meta name="twitter:image" content="{{ if .IsHome }}{{ .Site.Params.social_logo_path | absURL }}{{ else }}{{ .Site.Params.social_image_path | absURL }}{{ end }}"> +<meta name="twitter:image" content="/docs/{{ .Site.Params.docs_version }}/assets/{{ if .Page.Params.thumbnail }}img/{{ .Page.Params.thumbnail }}{{else}}brand/bootstrap-social.png{{end}}"> -{{ "<!-- Facebook -->" | safeHTML }} <meta property="og:url" content="{{ .Permalink }}"> <meta property="og:title" content="{{ .Title | markdownify }}"> <meta property="og:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}"> <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}"> -<meta property="og:image" content="{{ .Site.Params.social_image_path | absURL }}"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1000"> <meta property="og:image:height" content="500"> +<meta property="og:image" content="/docs/{{ .Site.Params.docs_version }}/assets/{{ if .Page.Params.thumbnail }}img/{{ .Page.Params.thumbnail }}{{else}}brand/bootstrap-social.png{{end}}"> diff --git a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/brand/bootstrap-social.png b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/brand/bootstrap-social.png Binary files differindex c7adc6f85..ff9300f41 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/brand/bootstrap-social.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/brand/bootstrap-social.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/bootstrap-icons@2x.png b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/bootstrap-icons@2x.png Binary files differindex 8d08df766..5dd660856 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/bootstrap-icons@2x.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/bootstrap-icons@2x.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/examples/navbars.png b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/examples/navbars.png Binary files differindex 4e7e5fa6a..0d7b44afb 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/examples/navbars.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/examples/navbars.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/parcel.png b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/parcel.png Binary files differindex 899b29c7b..ff5cc3ae7 100644 --- a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/parcel.png +++ b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/parcel.png diff --git a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/vite.png b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/vite.png Binary files differdeleted file mode 100644 index 87b844b6c..000000000 --- a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/vite.png +++ /dev/null diff --git a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/vite.svg b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/vite.svg new file mode 100644 index 000000000..831cb1610 --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/vite.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410 404"><path fill="url(#a)" d="m399.641 59.525-183.998 329.02c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556C6.38 52.19 12.68 43.266 21.028 44.76l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719Z"/><path fill="url(#b)" d="M292.965 1.574 156.801 28.255a5 5 0 0 0-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.707-1.346-7.935-5.418-7.15l-39.022 7.532c-3.667.707-6.787-2.708-5.752-6.296l25.469-88.291c1.036-3.594-2.095-7.012-5.766-6.293Z"/><defs><linearGradient id="a" x1="6" x2="235" y1="33" y2="344" gradientUnits="userSpaceOnUse"><stop stop-color="#41d1ff"/><stop offset="1" stop-color="#bd34fe"/></linearGradient><linearGradient id="b" x1="194.651" x2="236.076" y1="8.818" y2="292.989" gradientUnits="userSpaceOnUse"><stop stop-color="#ffea83"/><stop offset=".083" stop-color="#ffdd35"/><stop offset="1" stop-color="#ffa800"/></linearGradient></defs></svg> diff --git a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/webpack.png b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/webpack.png Binary files differdeleted file mode 100644 index ed1719b81..000000000 --- a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/webpack.png +++ /dev/null diff --git a/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/webpack.svg b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/webpack.svg new file mode 100644 index 000000000..ed885f2fe --- /dev/null +++ b/vendor/twbs/bootstrap/site/static/docs/5.2/assets/img/webpack.svg @@ -0,0 +1 @@ +<svg viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg"><path d="m600 0 530.3 300v600L600 1200 69.7 900V300z" fill="#fff"/><path d="m1035.6 879.3-418.1 236.5V931.6L878 788.3zm28.6-25.9V358.8l-153 88.3V765zm-901.5 25.9 418.1 236.5V931.6L320.3 788.3zm-28.6-25.9V358.8l153 88.3V765zM152 326.8 580.8 84.2v178.1L306.1 413.4l-2.1 1.2zm894.3 0L617.5 84.2v178.1l274.7 151.1 2.1 1.2z" fill="#8ed6fb"/><path d="m580.8 889.7-257-141.3v-280l257 148.4zm36.7 0 257-141.3v-280l-257 148.4zM341.2 436l258-141.9 258 141.9-258 149z" fill="#1c78c0"/></svg> |
