From ec429d98f4e33a01763337e9ddb346d14c3fc4a1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 13 Jul 2020 21:57:10 -0700 Subject: [PATCH 1/7] Rewrite JS options, methods, and events in Markdown --- site/content/docs/5.0/components/alerts.md | 69 +---- site/content/docs/5.0/components/buttons.md | 32 +- site/content/docs/5.0/components/carousel.md | 137 ++------- site/content/docs/5.0/components/collapse.md | 103 ++----- site/content/docs/5.0/components/dropdowns.md | 169 ++--------- site/content/docs/5.0/components/modal.md | 141 ++------- site/content/docs/5.0/components/popovers.md | 282 +++--------------- site/content/docs/5.0/components/scrollspy.md | 89 ++---- site/content/docs/5.0/components/toasts.md | 104 ++----- site/content/docs/5.0/components/tooltips.md | 272 +++-------------- 10 files changed, 257 insertions(+), 1141 deletions(-) diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index f35a044ae..aaa306169 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -103,40 +103,13 @@ var bsAlert = new bootstrap.Alert(myAlert) This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
- close - - Closes an alert by removing it from the DOM. If the .fade and .show classes are present on the element, the alert will fade out before it is removed. -
- dispose - - Destroys an element's alert. (Removes stored data on the DOM element) -
- getInstance - - Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: bootstrap.Alert.getInstance(alert) -
+{{< bs-table "table" >}} +| Method | Description | +| --- | --- | +| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. | +| `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) | +| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: `bootstrap.Alert.getInstance(alert)`. | +{{< /bs-table >}} ```js var alertNode = document.querySelector('.alert') @@ -148,28 +121,12 @@ alert.close() Bootstrap's alert plugin exposes a few events for hooking into alert functionality. - - - - - - - - - - - - - - - - - -
EventDescription
close.bs.alert - Fires immediately when the close instance method is called. -
closed.bs.alert - Fired when the alert has been closed and CSS transitions have completed. -
+{{< bs-table "table" >}} +| Event | Description | +| --- | --- | +| `close.bs.alert` | Fires immediately when the `close` instance method is called. | +| `closed.bs.alert` | Fired when the alert has been closed and CSS transitions have completed. | +{{< /bs-table >}} ```js var myAlert = document.getElementById('myAlert') diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index be2bc3e70..be8b5661f 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -169,32 +169,12 @@ var button = document.getElementById('myButton') var bsButton = new bootstrap.Button(button) ``` - - - - - - - - - - - - - - - - - -
MethodDescription
- toggle - - Toggles push state. Gives the button the appearance that it has been activated. -
- dispose - - Destroys an element's button. (Removes stored data on the DOM element) -
+{{< bs-table "table bs-js-table" >}} +| Method | Description | +| --- | --- | +| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. | +| `dispose` | Destroys an element's button. (Removes stored data on the DOM element) | +{{< /bs-table >}} For example, to toggle all buttons diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 85ee9eb44..a4da7f2e8 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -272,55 +272,16 @@ var carousel = new bootstrap.Carousel(myCarousel) Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
intervalnumber5000The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
keyboardbooleantrueWhether the carousel should react to keyboard events.
pausestring | boolean"hover"

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

-

On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.

slidestring | booleanfalseAutoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
wrapbooleantrueWhether the carousel should cycle continuously or have hard stops.
touchbooleantrueWhether the carousel should support left/right swipe interactions on touchscreen devices.
+{{< bs-table "table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | +| `keyboard` | boolean | `true` | Whether the carousel should react to keyboard events. | +| `pause` | string, boolean | `"hover"` | If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior. | +| `slide` | string, boolean | `false` | Autoplays the carousel after the user manually cycles the first item. If `"carousel"`, autoplays the carousel on load. | +| `wrap` | boolean | `true` | Whether the carousel should cycle continuously or have hard stops. | +| `touch` | boolean | `true` | Whether the carousel should support left/right swipe interactions on touchscreen devices. | +{{< /bs-table >}} ### Methods @@ -338,48 +299,18 @@ var carousel = new bootstrap.Carousel(myCarousel, { }) ``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
cycleCycles through the carousel items from left to right.
pauseStops the carousel from cycling through items.
prevCycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs).
nextCycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs).
nextWhenVisibleDon'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 -
toCycles 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).
disposeDestroys an element's carousel. (Removes stored data on the DOM element)
getInstanceStatic method which allows you to get the carousel instance associated with a DOM element.
+{{< bs-table "table" >}} +| Method | Description | +| --- | --- | +| `cycle` | Cycles through the carousel items from left to right. | +| `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). | +| `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** | +| `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). | +| `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 with a DOM element. | +{{< /bs-table >}} ### Events @@ -392,24 +323,12 @@ Bootstrap's carousel class exposes two events for hooking into carousel function All carousel events are fired at the carousel itself (i.e. at the `
`). - - - - - - - - - - - - - - - - - -
Event typeDescription
slide.bs.carouselFires immediately when the slide instance method is invoked.
slid.bs.carouselFired when the carousel has completed its slide transition.
+{{< bs-table "table" >}} +| Event type | Description | +| --- | --- | +| `slide.bs.carousel` | Fires immediately when the `slide` instance method is invoked. | +| `slid.bs.carousel` | Fired when the carousel has completed its slide transition. | +{{< /bs-table >}} ```js var myCarousel = document.getElementById('myCarousel') diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index 0c23133b6..86763145d 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -108,30 +108,12 @@ var collapseList = collapseElementList.map(function (collapseEl) { Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-parent=""`. - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
parentselector | jQuery object | DOM element falseIf 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.
togglebooleantrueToggles the collapsible element on invocation
+{{< bs-table "table bs-js-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 | +{{< /bs-table >}} ### Methods @@ -150,67 +132,28 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, { }) ``` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
toggleToggles 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).
showShows a collapsible element. Returns to the caller before the collapsible element has actually been shown (e.g., before the shown.bs.collapse event occurs).
hideHides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (e.g., before the hidden.bs.collapse event occurs).
disposeDestroys an element's collapse. (Removes stored data on the DOM element)
getInstanceStatic method which allows you to get the collapse instance associated with a DOM element.
+{{< bs-table "table" >}} +| Method | Description | +| --- | --- | +| `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). | +| `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). | +| `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). | +| `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 with a DOM element. | +{{< /bs-table >}} ### Events Bootstrap's collapse class exposes a few events for hooking into collapse functionality. - - - - - - - - - - - - - - - - - - - - - - - - - -
Event typeDescription
show.bs.collapseThis event fires immediately when the show instance method is called.
shown.bs.collapseThis event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.collapseThis event is fired immediately when the hide method has been called.
hidden.bs.collapseThis event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
+{{< bs-table "table" >}} +| Event type | Description | +| --- | --- | +| `show.bs.collapse` | This event fires immediately when the `show` instance method is called. | +| `shown.bs.collapse` | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). | +| `hide.bs.collapse` | This event is fired immediately when the `hide` method has been called. | +| `hidden.bs.collapse` | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). | +{{< /bs-table >}} ```js var myCollapsible = document.getElementById('myCollapsible') diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index 95e6f792c..71914c411 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -857,157 +857,46 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
offsetnumber | string | function0 -

Offset of the dropdown relative to its target.

-

When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.

-

For more information refer to Popper's offset docs.

-
flipbooleantrueAllow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's flip docs.
boundarystring | element'scrollParent'Overflow constraint boundary of the dropdown menu. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper's preventOverflow docs.
referencestring | element'toggle'Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference. For more information refer to Popper's referenceObject docs.
displaystring'dynamic'By default, we use Popper for dynamic positioning. Disable this with static.
popperConfignull | objectnullTo change Bootstrap's default Popper config, see Popper's configuration
+{{< bs-table "table bs-js-table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `offset` | number, string, function | `0` | Offset of the dropdown relative to its target. When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument. For more information refer to Popper's [offset docs](https://popper.js.org/docs/v1/#modifiers..offset.offset). | +| `flip` | boolean | `true` | Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's [flip docs](https://popper.js.org/docs/v1/#modifiers..flip.enabled). | +| `boundary` | string, element | `'scrollParent'` | Overflow constraint boundary of the dropdown menu. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper's [preventOverflow docs](https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement). | +| `reference` | string, element | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, or an HTMLElement reference. For more information refer to Popper's [referenceObject docs](https://popper.js.org/docs/v1/#referenceObject). | +| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. | +| `popperConfig` | null, object | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v1/#Popper.Defaults) | +{{< /bs-table >}} Note when `boundary` is set to any value other than `'scrollParent'`, the style `position: static` is applied to the `.dropdown` container. ### Methods - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
toggle - Toggles the dropdown menu of a given navbar or tabbed navigation. -
show - Shows the dropdown menu of a given navbar or tabbed navigation. -
hide - Hides the dropdown menu of a given navbar or tabbed navigation. -
update - Updates the position of an element's dropdown. -
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 with a DOM element. -
+{{< bs-table "table" >}} +| Method | Description | +| --- | --- | +| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. | +| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. | +| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. | +| `update` | Updates the position of an element's dropdown. | +| `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 with a DOM element. | +{{< /bs-table >}} ### Events All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element. + `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. - - - - - - - - - - - - - - - - - - - - - - - - - -
MethodDescription
- show.bs.dropdown - - Fires immediately when the show instance method is called. -
- shown.bs.dropdown - - Fired when the dropdown has been made visible to the user and CSS transitions have completed. -
- hide.bs.dropdown - - Fires immediately when the hide instance method has been called. -
- hidden.bs.dropdown - - Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. -
+{{< bs-table "table" >}} +| Event type | Description | +| --- | --- | +| `show.bs.dropdown` | Fires immediately when the show instance method is called. | +| `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. | +| `hide.bs.dropdown` | Fires immediately when the hide instance method has been called. | +| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. | +{{< /bs-table >}} ```js var myDropdown = document.getElementById('myDropdown') diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 5bd116c8e..9221f30e6 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -849,42 +849,14 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), options) Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
backdropboolean or the string 'static'trueIncludes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboardbooleantrueCloses the modal when escape key is pressed
focusbooleantruePuts the focus on the modal when initialized.
showbooleantrueShows the modal when initialized.
+{{< bs-table "table bs-js-table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `backdrop` | boolean, `'static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal on click. | +| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. | +| `focus` | boolean | `true` | Puts the focus on the modal when initialized. | +| `show` | boolean | `true` | Shows the modal when initialized. | +{{< /bs-table >}} ### Methods @@ -902,89 +874,30 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), { }) ``` -#### 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). - -```js -myModal.toggle() -``` - -#### 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). - -```js -myModal.show() -``` - -#### 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). - -```js -myModal.hide() -``` - -#### 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). - -```js -myModal.handleUpdate() -``` - -#### dispose - -Destroys an element's modal. (Removes stored data on the DOM element) - -```js -myModal.dispose() -``` - -#### getInstance - -*Static* method which allows you to get the modal instance associated with a DOM element - -```js -var myModalEl = document.getElementById('myModal') -var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance -``` +{{< bs-table "table bs-js-table" >}} +| Method | Description | +| --- | --- | +| `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). | +| `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). | +| `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). | +| `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). | +| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) | +| `getInstance` | *Static* method which allows you to get the modal instance associated with a DOM element. | +{{< /bs-table >}} ### Events Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event typeDescription
show.bs.modalThis event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modalThis event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modalThis event is fired immediately when the hide instance method has been called.
hidden.bs.modalThis event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modalThis event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option or data-bs-keyboard set to false.
+{{< bs-table "table" >}} +| Event | Description | +| --- | --- | +| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | +| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | +| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. | +| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). | +| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside the modal or an escape key press is performed with the keyboard option or `data-bs-keyboard` set to `false`. | +{{< /bs-table >}} ```js var myModalEl = document.getElementById('myModal') diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index c1e1f9017..e74c9e9c5 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -152,142 +152,27 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. {{< /callout >}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
animationbooleantrueApply a CSS fade transition to the popover
containerstring | element | falsefalse -

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.

-
contentstring | 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.

-
delaynumber | object0 -

Delay showing and hiding the popover (ms) - does not 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 }

-
htmlbooleanfalseInsert HTML into the popover. If false, innerText property will be used to insert content into the DOM. Use text if you're worried about XSS attacks.
placementstring | function'right' -

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.

-
selectorstring | falsefalseIf a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
templatestring'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' -

Base HTML to use when creating the popover.

-

The popover's title will be injected into the .popover-header.

-

The popover's content will be injected into the .popover-body.

-

.popover-arrow will become the popover's arrow.

-

The outermost wrapper element should have the .popover class.

-
titlestring | 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.

-
triggerstring'click'How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.
offsetnumber | string0Offset of the popover relative to its target. For more information refer to Popper's offset docs.
fallbackPlacementstring | array'flip'Allow to specify which position Popper will use on fallback. For more information refer to - Popper's behavior docs
boundarystring | element'scrollParent'Overflow constraint boundary of the popover. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper's preventOverflow docs.
sanitizebooleantrueEnable or disable the sanitization. If activated 'template', 'content' and 'title' options will be sanitized.
allowListobject}}">Default valueObject which contains allowed attributes and tags
sanitizeFnnull | functionnullHere you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
popperConfignull | objectnullTo change Bootstrap's default Popper config, see Popper's configuration
+{{< bs-table "table bs-js-table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `animation` | boolean | `true` | Apply a CSS fade transition to the popover. | +| `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. +| `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 }`. | +| `html` | boolean | `false` | Insert HTML into the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. | +| `placement` | string, function | `'right'` | 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. | +| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). | +| `template` | string | `''` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-header`. The popover's `content` will be injected into the `.popover-body`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class. | +| `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 | `'click'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger. | +| `offset` | number | string | `0` | Offset of the popover relative to its target. For more information refer to Popper's [offset docs](https://popper.js.org/docs/v1/#modifiers..offset.offset). | +| `fallbackPlacement` | string, array | `'flip'` | Allow to specify which position Popper will use on fallback. For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v1/#modifiers..flip.behavior). | +| `boundary` | string, element | `'scrollParent'` | Overflow constraint boundary of the popover. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper's [preventOverflow docs](https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement). | +| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. | +| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. | +| `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. | +| `popperConfig` | null, object | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v1/#Popper.Defaults). | +{{< /bs-table >}} {{< callout info >}} #### Data attributes for individual popovers @@ -301,112 +186,31 @@ Options for individual popovers can alternatively be specified through the use o {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} - -#### 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. - -```js -myPopover.show() -``` - -#### 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. - -```js -myPopover.hide() -``` - -#### toggle - -Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. - -```js -myPopover.toggle() -``` - -#### 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. - -```js -myPopover.dispose() -``` - -#### enable - -Gives an element's popover the ability to be shown. **Popovers are enabled by default.** - -```js -myPopover.enable() -``` - -#### disable - -Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled. - -```js -myPopover.disable() -``` - -#### toggleEnabled - -Toggles the ability for an element's popover to be shown or hidden. - -```js -myPopover.toggleEnabled() -``` - -#### update - -Updates the position of an element's popover. - -```js -myPopover.update() -``` - -#### getInstance - -*Static* method which allows you to get the popover instance associated with a DOM element - -```js -var exampleTriggerEl = document.getElementById('example') -var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance -``` +{{< bs-table "table bs-js-table" >}} +| Method | Description | +| --- | --- | +| `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. | +| `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. | +| `toggle` | Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. | +| `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.** | +| `disable` | Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled. | +| `toggleEnabled` | Toggles the ability for an element's popover to be shown or hidden. | +| `update` | Updates the position of an element's popover. | +| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. | +{{< /bs-table >}} ### Events - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event typeDescription
show.bs.popoverThis event fires immediately when the show instance method is called.
shown.bs.popoverThis event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.popoverThis event is fired immediately when the hide instance method has been called.
hidden.bs.popoverThis event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.popoverThis event is fired after the show.bs.popover event when the popover template has been added to the DOM.
+{{< bs-table "table" >}} +| Event | Description | +| --- | --- | +| `show.bs.popover` | This event fires immediately when the show instance method is called. | +| `shown.bs.popover` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). | +| `hide.bs.popover` | This event is fired immediately when the hide instance method has been called. | +| `hidden.bs.popover` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). | +| `inserted.bs.popover` | This event is fired after the show.bs.popover event when the popover template has been added to the DOM. | +{{< /bs-table >}} ```js var myPopoverTrigger = document.getElementById('myPopover') diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.0/components/scrollspy.md index 5606860d3..b30b0cf07 100644 --- a/site/content/docs/5.0/components/scrollspy.md +++ b/site/content/docs/5.0/components/scrollspy.md @@ -274,11 +274,29 @@ Navbar links must have resolvable id targets. For example, a `ho Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted. {{< /callout >}} +### Options + +Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. + +{{< bs-table "table bs-js-table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `offset` | number | 10 | Pixels to offset from top when calculating position of scroll. | +| `method` | string | `auto` | Finds which section the spied element is in. `auto` will choose the best method to get scroll coordinates. `offset` will use the [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) method to get scroll coordinates. `position` will use the [`HTMLElement.offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) and [`HTMLElement.offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft) properties to get scroll coordinates.` | +| `target` | string, jQuery object, DOM element | | Specifies element to apply Scrollspy plugin. | +{{< /bs-table >}} + ### Methods -#### refresh +{{< bs-table "table bs-js-table" >}} +| Method | Description | +| --- | --- | +| `refresh` | When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method. | +| `dispose` | Destroys an element's scrollspy. (Removes stored data on the DOM element) | +| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element | +{{< /bs-table >}} -When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so: +Here's an example using the refresh method: ```js var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]')) @@ -288,70 +306,13 @@ dataSpyList.forEach(function (dataSpyEl) { }) ``` -#### dispose - -Destroys an element's scrollspy. (Removes stored data on the DOM element) - -#### getInstance - -*Static* method which allows you to get the scrollspy instance associated with a DOM element - -```js -var scrollSpyContentEl = document.getElementById('content') -var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance -``` - -### Options - -Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
offsetnumber10Pixels to offset from top when calculating position of scroll.
methodstringautoFinds which section the spied element is in. auto will choose the best method to get scroll coordinates. offset will use the Element.getBoundingClientRect() method to get scroll coordinates. position will use the HTMLElement.offsetTop and HTMLElement.offsetLeft properties to get scroll coordinates.
targetstring | jQuery object | DOM elementSpecifies element to apply Scrollspy plugin.
- ### Events - - - - - - - - - - - - - -
Event typeDescription
activate.bs.scrollspyThis event fires on the scroll element whenever a new item becomes activated by the scrollspy.
+{{< bs-table "table bs-js-table" >}} +| Event | Description | +| --- | --- | +| `activate.bs.scrollspy` | This event fires on the scroll element whenever a new item becomes activated by the scrollspy. | +{{< /bs-table >}} ```js var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]') diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 48c68b60b..131343e28 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -255,38 +255,13 @@ var toastList = toastElList.map(function (toastEl) { Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
animationbooleantrueApply a CSS fade transition to the toast
autohidebooleantrueAuto hide the toast
delaynumber - 5000 - Delay hiding the toast (ms)
+{{< bs-table "table bs-js-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 | +{{< /bs-table >}} ### Methods @@ -294,59 +269,24 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} -#### 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. - -```js -toast.show() -``` - -#### 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`. - -```js -toast.hide() -``` - -#### dispose - -Hides an element's toast. Your toast will remain on the DOM but won't show anymore. - -```js -toast.dispose() -``` +{{< bs-table "table bs-js-table" >}} +| Method | Description | +| --- | --- | +| `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. | +| `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`. | +| `dispose` | Hides an element's toast. Your toast will remain on the DOM but won't show anymore. | +{{< /bs-table >}} ### Events - - - - - - - - - - - - - - - - - - - - - - - - - -
Event typeDescription
show.bs.toastThis event fires immediately when the show instance method is called.
shown.bs.toastThis event is fired when the toast has been made visible to the user.
hide.bs.toastThis event is fired immediately when the hide instance method has been called.
hidden.bs.toastThis event is fired when the toast has finished being hidden from the user.
+{{< bs-table "table bs-js-table" >}} +| Event | Description | +| --- | --- | +| `show.bs.toast` | This event fires immediately when the `show` instance method is called. | +| `shown.bs.toast` | This event is fired when the toast has been made visible to the user. | +| `hide.bs.toast` | This event is fired immediately when the `hide` instance method has been called. | +| `hidden.bs.toast` | This event is fired when the toast has finished being hidden from the user. | +{{< /bs-table >}} ```js var myToastEl = document.getElementById('myToast') diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index 58c1bf9db..5890f9807 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -159,144 +159,26 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes. {{< /callout >}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameTypeDefaultDescription
animationbooleantrueApply a CSS fade transition to the tooltip
containerstring | element | falsefalse -

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.

-
delaynumber | object0 -

Delay showing and hiding the tooltip (ms) - does not 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 }

-
htmlbooleanfalse -

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.

-
placementstring | 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.

-
selectorstring | falsefalseIf 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 and an informative example.
templatestring'<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".

-
titlestring | 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 tooltip is attached to.

-
triggerstring'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.

-
offsetnumber | string | function0 -

Offset of the tooltip relative to its target.

-

When a function is used to determine the offset, it is called with an object containing the offset data as its first argument. The function must return an object with the same structure. The triggering element DOM node is passed as the second argument.

-

For more information refer to Popper's offset docs.

-
fallbackPlacementstring | array'flip'Allow to specify which position Popper will use on fallback. For more information refer to - Popper's behavior docs
boundarystring | element'scrollParent'Overflow constraint boundary of the tooltip. Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only). For more information refer to Popper's preventOverflow docs.
sanitizebooleantrueEnable or disable the sanitization. If activated 'template' and 'title' options will be sanitized.
allowListobject}}">Default valueObject which contains allowed attributes and tags
sanitizeFnnull | functionnullHere you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
popperConfignull | objectnullTo change Bootstrap's default Popper config, see Popper's configuration
+{{< bs-table "table bs-js-table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `animation` | boolean | `true` | Apply a CSS fade transition to the tooltip | +| `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. | +| `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 }`. | +| `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. | +| `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. | +| `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). | +| `template` | string | `''` | 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. | +| `offset` | number, string | `0` | Offset of the popover relative to its target. For more information refer to Popper's [offset docs](https://popper.js.org/docs/v1/#modifiers..offset.offset). | +| `fallbackPlacement` | string, array | `'flip'` | Allow to specify which position Popper will use on fallback. For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v1/#modifiers..flip.behavior). | +| `boundary` | string, element | `'scrollParent'` | Overflow constraint boundary of the popover. Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (JavaScript only). For more information refer to Popper's [preventOverflow docs](https://popper.js.org/docs/v1/#modifiers..preventOverflow.boundariesElement). | +| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. | +| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. | +| `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. | +| `popperConfig` | null, object | `null` | To change Bootstrap's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v1/#Popper.Defaults). | +{{< /bs-table >}} {{< callout info >}} #### Data attributes for individual tooltips @@ -310,69 +192,18 @@ Options for individual tooltips can alternatively be specified through the use o {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} -#### 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. - -```js -tooltip.show() -``` - -#### 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. - -```js -tooltip.hide() -``` - -#### toggle - -Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. - -```js -tooltip.toggle() -``` - -#### 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. - -```js -tooltip.dispose() -``` - -#### enable - -Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.** - -```js -tooltip.enable() -``` - -#### 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. - -```js -tooltip.disable() -``` - -#### toggleEnabled - -Toggles the ability for an element's tooltip to be shown or hidden. - -```js -tooltip.toggleEnabled() -``` - -#### update - -Updates the position of an element's tooltip. - -```js -tooltip.update() -``` +{{< bs-table "table bs-js-table" >}} +| Method | Description | +| --- | --- | +| `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. | +| `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. | +| `toggle` | Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. | +| `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.** | +| `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. | +| `toggleEnabled` | Toggles the ability for an element's tooltip to be shown or hidden. | +| `update` | Updates the position of an element's tooltip. | +{{< /bs-table >}} #### getInstance @@ -385,36 +216,15 @@ var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Boots ### Events - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Event typeDescription
show.bs.tooltipThis event fires immediately when the show instance method is called.
shown.bs.tooltipThis event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.tooltipThis event is fired immediately when the hide instance method has been called.
hidden.bs.tooltipThis event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).
inserted.bs.tooltipThis event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM.
+{{< bs-table "table" >}} +| Event | Description | +| --- | --- | +| `show.bs.tooltip` | This event fires immediately when the show instance method is called. | +| `shown.bs.tooltip` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). | +| `hide.bs.tooltip` | This event is fired immediately when the hide instance method has been called. | +| `hidden.bs.tooltip` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). | +| `inserted.bs.tooltip` | This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM. | +{{< /bs-table >}} ```js var myTooltipEl = document.getElementById('myTooltip') From 60df5fc68babf2871c2f4839387a4cdf7544bf86 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 Jul 2020 13:21:20 -0700 Subject: [PATCH 2/7] Couple copy tweaks --- site/content/docs/5.0/components/alerts.md | 2 +- site/content/docs/5.0/components/scrollspy.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index aaa306169..96d8b9860 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -108,7 +108,7 @@ This makes an alert listen for click events on descendant elements which have th | --- | --- | | `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. | | `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: `bootstrap.Alert.getInstance(alert)`. | +| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `bootstrap.Alert.getInstance(alert)`. | {{< /bs-table >}} ```js diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.0/components/scrollspy.md index b30b0cf07..c6ca35dc6 100644 --- a/site/content/docs/5.0/components/scrollspy.md +++ b/site/content/docs/5.0/components/scrollspy.md @@ -281,7 +281,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap {{< bs-table "table bs-js-table" >}} | Name | Type | Default | Description | | --- | --- | --- | --- | -| `offset` | number | 10 | Pixels to offset from top when calculating position of scroll. | +| `offset` | number | `10` | Pixels to offset from top when calculating position of scroll. | | `method` | string | `auto` | Finds which section the spied element is in. `auto` will choose the best method to get scroll coordinates. `offset` will use the [`Element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) method to get scroll coordinates. `position` will use the [`HTMLElement.offsetTop`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) and [`HTMLElement.offsetLeft`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft) properties to get scroll coordinates.` | | `target` | string, jQuery object, DOM element | | Specifies element to apply Scrollspy plugin. | {{< /bs-table >}} From fb2f3a418bb89ec13d8d5a97ed61de56057ea585 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 31 Oct 2020 08:50:49 +0200 Subject: [PATCH 3/7] Make bs-table responsive --- site/layouts/shortcodes/bs-table.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/layouts/shortcodes/bs-table.html b/site/layouts/shortcodes/bs-table.html index 40b9b8ce5..ac2c5a53b 100644 --- a/site/layouts/shortcodes/bs-table.html +++ b/site/layouts/shortcodes/bs-table.html @@ -5,5 +5,6 @@ {{- $css_class := .Get 0 | default "table" -}} {{- $html_table := .Inner | markdownify -}} -{{- $html_table = replace $html_table "" (printf `
` $css_class) -}} +{{- $html_table = replace $html_table "
" (printf `
` $css_class) -}} +{{- $html_table = replace $html_table "
" "
" -}} {{- $html_table | safeHTML -}} From 020fa66ec2ade295b765a942833ae6efbf657642 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 2 Nov 2020 15:38:02 +0200 Subject: [PATCH 4/7] CSS changes --- site/assets/scss/_content.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index a6c1639b0..0be926758 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -24,15 +24,12 @@ } // Override Bootstrap defaults - > .table { - max-width: 100%; + > .table, + > .table-responsive .table { margin-bottom: 1.5rem; @include font-size(.875rem); @include media-breakpoint-down(lg) { - display: block; - overflow-x: auto; - &.table-bordered { border: 0; } From e65de024043733e2c17c68784122ff12481c308c Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 2 Nov 2020 15:45:25 +0200 Subject: [PATCH 5/7] Convert more tables to Markdown --- .../content/docs/5.0/components/list-group.md | 34 ++------ site/content/docs/5.0/components/modal.md | 44 +++------- site/content/docs/5.0/components/navs-tabs.md | 34 ++------ site/content/docs/5.0/content/typography.md | 56 +++---------- .../docs/5.0/getting-started/build-tools.md | 54 ++---------- site/content/docs/5.0/utilities/display.md | 84 ++++--------------- 6 files changed, 63 insertions(+), 243 deletions(-) diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index 1debfdd69..42d1d53d7 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -436,32 +436,14 @@ When showing a new tab, the events fire in the following order: If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired. - - - - - - - - - - - - - - - - - - - - - - - - - -
Event typeDescription
show.bs.tabThis event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.bs.tabThis event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.bs.tabThis event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tabThis event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
+{{< bs-table "table" >}} +| Event type | Description | +| --- | --- | +| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | +| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | +| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. | +| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. | +{{< /bs-table >}} ```js var tabEl = document.querySelector('a[data-bs-toggle="list"]') diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 9221f30e6..f837249c1 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -655,40 +655,16 @@ Our default modal without modifier class constitutes the "medium" size modal. Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassAvailability
.modal-fullscreenAlways
.modal-fullscreen-sm-downBelow 576px
.modal-fullscreen-md-downBelow 768px
.modal-fullscreen-lg-downBelow 992px
.modal-fullscreen-xl-downBelow 1200px
.modal-fullscreen-xxl-downBelow 1400px
+{{< bs-table >}} +| Class | Availability | +| --- | --- | --- | +| `.modal-fullscreen` | Always | +| `.modal-fullscreen-sm-down` | `576px` | +| `.modal-fullscreen-md-down` | `768px` | +| `.modal-fullscreen-lg-down` | `992px` | +| `.modal-fullscreen-xl-down` | `1200px` | +| `.modal-fullscreen-xxl-down` | `1400px` | +{{< /bs-table >}}
diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md index fb2712bb5..4c78c8b7a 100644 --- a/site/content/docs/5.0/components/navs-tabs.md +++ b/site/content/docs/5.0/components/navs-tabs.md @@ -629,32 +629,14 @@ When showing a new tab, the events fire in the following order: If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired. - - - - - - - - - - - - - - - - - - - - - - - - - -
Event typeDescription
show.bs.tabThis event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.bs.tabThis event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.bs.tabThis event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tabThis event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
+{{< bs-table "table" >}} +| Event type | Description | +| --- | --- | +| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | +| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | +| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. | +| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. | +{{< /bs-table >}} ```js var tabEl = document.querySelector('a[data-bs-toggle="tab"]') diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md index b8e4f558a..49845baea 100644 --- a/site/content/docs/5.0/content/typography.md +++ b/site/content/docs/5.0/content/typography.md @@ -22,52 +22,16 @@ These styles can be found within `_reboot.scss`, and the global variables are de All HTML headings, `

` through `

`, are available. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeadingExample
- {{< markdown >}}`

`{{< /markdown >}} - 		h1. Bootstrap heading
- {{< markdown >}}`

`{{< /markdown >}} - 		h2. Bootstrap heading
- {{< markdown >}}`

`{{< /markdown >}} - 		h3. Bootstrap heading
- {{< markdown >}}`

`{{< /markdown >}} - 		h4. Bootstrap heading
- {{< markdown >}}`
`{{< /markdown >}} - 		h5. Bootstrap heading
- {{< markdown >}}`
`{{< /markdown >}} - 		h6. Bootstrap heading
+{{< bs-table >}} +| Heading | Example | +| --- | --- | +| `

` | h1. Bootstrap heading | +| `

` | h2. Bootstrap heading | +| `

` | h3. Bootstrap heading | +| `

` | h4. Bootstrap heading | +| `
` | h5. Bootstrap heading | +| `
` | h6. Bootstrap heading | +{{< /bs-table >}} ```html

h1. Bootstrap heading

diff --git a/site/content/docs/5.0/getting-started/build-tools.md b/site/content/docs/5.0/getting-started/build-tools.md index 7d5cb51aa..29c61ce9f 100644 --- a/site/content/docs/5.0/getting-started/build-tools.md +++ b/site/content/docs/5.0/getting-started/build-tools.md @@ -22,52 +22,18 @@ When completed, you'll be able to run the various commands provided from the com Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:** - - - - - - - - - - - - - - - - - - - - - - - - - -
TaskDescription
- npm start - - Compiles CSS and JavaScript, builds the documentation, and starts a local server. -
- npm run dist - - Creates the dist/ directory with compiled files. Requires Sass, Autoprefixer, and terser. -
- npm test - - Runs tests locally after running npm run dist -
- npm run docs-serve - - Builds and runs the documentation locally. -
+{{< bs-table >}} +| Task | Description | +| --- | --- | +| `npm start` | Compiles CSS and JavaScript, builds the documentation, and starts a local server. | +| `npm run dist` | Creates the `dist/` directory with compiled files. Uses [Sass](https://sass-lang.com/), [Autoprefixer](https://github.com/postcss/autoprefixer), and [terser](https://github.com/terser/terser). | +| `npm test` | Runs tests locally after running `npm run dist` | +| `npm run docs-serve` | Builds and runs the documentation locally. | +{{< /bs-table >}} ## Autoprefixer -Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3. +Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3. We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details. @@ -84,5 +50,3 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc ## Troubleshooting Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`. - -[autoprefixer]: https://github.com/postcss/autoprefixer diff --git a/site/content/docs/5.0/utilities/display.md b/site/content/docs/5.0/utilities/display.md index 2d033ba85..cc623f4d3 100644 --- a/site/content/docs/5.0/utilities/display.md +++ b/site/content/docs/5.0/utilities/display.md @@ -56,72 +56,24 @@ To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,x To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Screen sizeClass
Hidden on all.d-none
Hidden only on xs.d-none .d-sm-block
Hidden only on sm.d-sm-none .d-md-block
Hidden only on md.d-md-none .d-lg-block
Hidden only on lg.d-lg-none .d-xl-block
Hidden only on xl.d-xl-none
Hidden only on xxl.d-xxl-none
Visible on all.d-block
Visible only on xs.d-block .d-sm-none
Visible only on sm.d-none .d-sm-block .d-md-none
Visible only on md.d-none .d-md-block .d-lg-none
Visible only on lg.d-none .d-lg-block .d-xl-none
Visible only on xl.d-none .d-xl-block .d-xxl-none
Visible only on xxl.d-none .d-xxl-block
+{{< bs-table "table" >}} +| Screen size | Class | +| --- | --- | +| Hidden on all | `.d-none` | +| Hidden only on xs | `.d-none .d-sm-block` | +| Hidden only on sm | `.d-sm-none .d-md-block` | +| Hidden only on md | `.d-md-none .d-lg-block` | +| Hidden only on lg | `.d-lg-none .d-xl-block` | +| Hidden only on xl | `.d-xl-none` | +| Hidden only on xxl | `.d-xxl-none` | +| Visible on all | `.d-block` | +| Visible only on xs | `.d-block .d-sm-none` | +| Visible only on sm | `.d-none .d-sm-block .d-md-none` | +| Visible only on md | `.d-none .d-md-block .d-lg-none` | +| Visible only on lg | `.d-none .d-lg-block .d-xl-none` | +| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` | +| Visible only on xxl | `.d-none .d-xxl-block` | +{{< /bs-table >}} {{< example >}}
hide on lg and wider screens
From 888b885ce113924592e7aa5cc703df0a6e784ffd Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 2 Nov 2020 15:59:59 +0200 Subject: [PATCH 6/7] Remove default class --- site/content/docs/5.0/components/alerts.md | 4 ++-- site/content/docs/5.0/components/carousel.md | 6 +++--- site/content/docs/5.0/components/collapse.md | 4 ++-- site/content/docs/5.0/components/dropdowns.md | 4 ++-- site/content/docs/5.0/components/list-group.md | 2 +- site/content/docs/5.0/components/modal.md | 2 +- site/content/docs/5.0/components/navs-tabs.md | 2 +- site/content/docs/5.0/components/popovers.md | 2 +- site/content/docs/5.0/components/tooltips.md | 2 +- site/content/docs/5.0/utilities/display.md | 2 +- 10 files changed, 15 insertions(+), 15 deletions(-) diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index 96d8b9860..78b0e6280 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -103,7 +103,7 @@ var bsAlert = new bootstrap.Alert(myAlert) This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.) -{{< bs-table "table" >}} +{{< bs-table >}} | Method | Description | | --- | --- | | `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. | @@ -121,7 +121,7 @@ alert.close() Bootstrap's alert plugin exposes a few events for hooking into alert functionality. -{{< bs-table "table" >}} +{{< bs-table >}} | Event | Description | | --- | --- | | `close.bs.alert` | Fires immediately when the `close` instance method is called. | diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index a4da7f2e8..7d06394f3 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -272,7 +272,7 @@ var carousel = new bootstrap.Carousel(myCarousel) Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-interval=""`. -{{< bs-table "table" >}} +{{< bs-table >}} | Name | Type | Default | Description | | --- | --- | --- | --- | | `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | @@ -299,7 +299,7 @@ var carousel = new bootstrap.Carousel(myCarousel, { }) ``` -{{< bs-table "table" >}} +{{< bs-table >}} | Method | Description | | --- | --- | | `cycle` | Cycles through the carousel items from left to right. | @@ -323,7 +323,7 @@ Bootstrap's carousel class exposes two events for hooking into carousel function All carousel events are fired at the carousel itself (i.e. at the `
`). -{{< bs-table "table" >}} +{{< bs-table >}} | Event type | Description | | --- | --- | | `slide.bs.carousel` | Fires immediately when the `slide` instance method is invoked. | diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index 86763145d..8ccb6c300 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -132,7 +132,7 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, { }) ``` -{{< bs-table "table" >}} +{{< bs-table >}} | Method | Description | | --- | --- | | `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). | @@ -146,7 +146,7 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, { Bootstrap's collapse class exposes a few events for hooking into collapse functionality. -{{< bs-table "table" >}} +{{< bs-table >}} | Event type | Description | | --- | --- | | `show.bs.collapse` | This event fires immediately when the `show` instance method is called. | diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index 71914c411..fe4b117d1 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -872,7 +872,7 @@ Note when `boundary` is set to any value other than `'scrollParent'`, the style ### Methods -{{< bs-table "table" >}} +{{< bs-table >}} | Method | Description | | --- | --- | | `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. | @@ -889,7 +889,7 @@ All dropdown events are fired at the `.dropdown-menu`'s parent element and have `hide.bs.dropdown` and `hidden.bs.dropdown` events have a `clickEvent` property (only when the original Event type is `click`) that contains an Event Object for the click event. -{{< bs-table "table" >}} +{{< bs-table >}} | Event type | Description | | --- | --- | | `show.bs.dropdown` | Fires immediately when the show instance method is called. | diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index 42d1d53d7..69d413cf0 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -436,7 +436,7 @@ When showing a new tab, the events fire in the following order: If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired. -{{< bs-table "table" >}} +{{< bs-table >}} | Event type | Description | | --- | --- | | `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index f837249c1..ee8b37c92 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -865,7 +865,7 @@ var myModal = new bootstrap.Modal(document.getElementById('myModal'), { Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`). -{{< bs-table "table" >}} +{{< bs-table >}} | Event | Description | | --- | --- | | `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md index 4c78c8b7a..a1fd4018e 100644 --- a/site/content/docs/5.0/components/navs-tabs.md +++ b/site/content/docs/5.0/components/navs-tabs.md @@ -629,7 +629,7 @@ When showing a new tab, the events fire in the following order: If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired. -{{< bs-table "table" >}} +{{< bs-table >}} | Event type | Description | | --- | --- | | `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. | diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index e74c9e9c5..9d366541a 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -202,7 +202,7 @@ Options for individual popovers can alternatively be specified through the use o ### Events -{{< bs-table "table" >}} +{{< bs-table >}} | Event | Description | | --- | --- | | `show.bs.popover` | This event fires immediately when the show instance method is called. | diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index 5890f9807..8a168533c 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -216,7 +216,7 @@ var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Boots ### Events -{{< bs-table "table" >}} +{{< bs-table >}} | Event | Description | | --- | --- | | `show.bs.tooltip` | This event fires immediately when the show instance method is called. | diff --git a/site/content/docs/5.0/utilities/display.md b/site/content/docs/5.0/utilities/display.md index cc623f4d3..635494619 100644 --- a/site/content/docs/5.0/utilities/display.md +++ b/site/content/docs/5.0/utilities/display.md @@ -56,7 +56,7 @@ To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,x To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices. -{{< bs-table "table" >}} +{{< bs-table >}} | Screen size | Class | | --- | --- | | Hidden on all | `.d-none` | From 296621c7f3650e8abd805d8c91d1533241b7acc6 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 3 Nov 2020 11:50:48 +0200 Subject: [PATCH 7/7] reboot.md: use the example shortcode --- site/content/docs/5.0/content/reboot.md | 70 ++++++++++++------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md index 60564c152..20dd56073 100644 --- a/site/content/docs/5.0/content/reboot.md +++ b/site/content/docs/5.0/content/reboot.md @@ -198,41 +198,41 @@ For indicating sample output from a program use the `` tag. Tables are slightly adjusted to style ``s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}). -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- This is an example table, and this is its caption to describe the contents. -
Table headingTable headingTable headingTable heading
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
-
+{{< example >}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ This is an example table, and this is its caption to describe the contents. +
Table headingTable headingTable headingTable heading
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
Table cellTable cellTable cellTable cell
+{{< /example >}} ## Forms