diff options
| author | Mark Otto <markd.otto@gmail.com> | 2022-03-14 10:38:04 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-14 10:38:04 +0300 |
| commit | a9a89debc7535a1c5857ced28c1002a2f682889f (patch) | |
| tree | c12f21a8b666d8a0605126dd4488cff41e1861b4 | |
| parent | 8fe82c7176a577190f2d69f9cbdd990b7f3c8493 (diff) | |
Rewrite docs tables in Markdown with table shortcode (#31337)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: GeoSot <geo.sotis@gmail.com>
22 files changed, 467 insertions, 1955 deletions
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index e79108fc69..e8ec8ac150 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -31,15 +31,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; } @@ -61,6 +58,7 @@ } // Prevent breaking of code + // stylelint-disable-next-line selector-max-compound-selectors td:first-child > code { white-space: nowrap; } diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md index 68a18be7ad..32df609f5b 100644 --- a/site/content/docs/5.1/components/alerts.md +++ b/site/content/docs/5.1/components/alerts.md @@ -209,53 +209,29 @@ See the [triggers](#triggers) section for more details. ### Methods -<table class="table"> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <code>close</code> - </td> - <td> - Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.show</code> classes are present on the element, the alert will fade out before it is removed. - </td> - </tr> - <tr> - <td> - <code>dispose</code> - </td> - <td> - Destroys an element's alert. (Removes stored data on the DOM element) - </td> - </tr> - <tr> - <td> - <code>getInstance</code> - </td> - <td> - Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: <code>bootstrap.Alert.getInstance(alert)</code> - </td> - </tr> - <tr> - <td> - <code>getOrCreateInstance</code> - </td> - <td> - Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized. - You can use it like this: <code>bootstrap.Alert.getOrCreateInstance(element)</code> - </td> - </tr> - </tbody> -</table> +You can create an alert instance with the alert constructor, for example: + +```js +var myAlert = document.getElementById('myAlert') +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 >}} +| 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. For example: `bootstrap.Alert.getInstance(alert)`. | +| `getOrCreateInstance` | Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: <code>bootstrap.Alert.getOrCreateInstance(element)</code>. | +{{< /bs-table >}} + +Basic usage: ```js var alertNode = document.querySelector('.alert') -var alert = bootstrap.Alert.getInstance(alertNode) +var alert = bootstrap.Alert.getOrCreateInstance(alertNode) alert.close() ``` @@ -263,28 +239,12 @@ alert.close() Bootstrap's alert plugin exposes a few events for hooking into alert functionality. -<table class="table"> - <thead> - <tr> - <th>Event</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>close.bs.alert</code></td> - <td> - Fires immediately when the <code>close</code> instance method is called. - </td> - </tr> - <tr> - <td><code>closed.bs.alert</code></td> - <td> - Fired when the alert has been closed and CSS transitions have completed. - </td> - </tr> - </tbody> -</table> +{{< bs-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.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md index 7f400df1a1..bacc6b23d2 100644 --- a/site/content/docs/5.1/components/buttons.md +++ b/site/content/docs/5.1/components/buttons.md @@ -184,49 +184,14 @@ var button = document.getElementById('myButton') var bsButton = new bootstrap.Button(button) ``` -<table class="table"> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <code>toggle</code> - </td> - <td> - Toggles push state. Gives the button the appearance that it has been activated. - </td> - </tr> - <tr> - <td> - <code>dispose</code> - </td> - <td> - Destroys an element's button. (Removes stored data on the DOM element) - </td> - </tr> - <tr> - <td> - <code>getInstance</code> - </td> - <td> - Static method which allows you to get the button instance associated to a DOM element, you can use it like this: <code>bootstrap.Button.getInstance(element)</code> - </td> - </tr> - <tr> - <td> - <code>getOrCreateInstance</code> - </td> - <td> - 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: <code>bootstrap.Button.getOrCreateInstance(element)</code> - </td> - </tr> - </tbody> -</table> +{{< bs-table "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) | +| `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)` | +{{< /bs-table >}} For example, to toggle all buttons diff --git a/site/content/docs/5.1/components/carousel.md b/site/content/docs/5.1/components/carousel.md index c7f7108939..86de96a074 100644 --- a/site/content/docs/5.1/components/carousel.md +++ b/site/content/docs/5.1/components/carousel.md @@ -310,55 +310,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=""`. -<table class="table"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>interval</code></td> - <td>number</td> - <td><code>5000</code></td> - <td>The amount of time to delay between automatically cycling an item. If <code>false</code>, carousel will not automatically cycle.</td> - </tr> - <tr> - <td><code>keyboard</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Whether the carousel should react to keyboard events.</td> - </tr> - <tr> - <td><code>pause</code></td> - <td>string | boolean</td> - <td><code>'hover'</code></td> - <td><p>If set to <code>'hover'</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p> - <p>On touch-enabled devices, when set to <code>'hover'</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td> - </tr> - <tr> - <td><code>ride</code></td> - <td>string | boolean</td> - <td><code>false</code></td> - <td>Autoplays the carousel after the user manually cycles the first item. If set to <code>'carousel'</code>, autoplays the carousel on load.</td> - </tr> - <tr> - <td><code>wrap</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Whether the carousel should cycle continuously or have hard stops.</td> - </tr> - <tr> - <td><code>touch</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Whether the carousel should support left/right swipe interactions on touchscreen devices.</td> - </tr> - </tbody> -</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. | +| `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. | +| `ride` | string, boolean | `false` | Autoplays the carousel after the user manually cycles the first item. If set to`"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 @@ -376,61 +337,19 @@ var carousel = new bootstrap.Carousel(myCarousel, { }) ``` -<table class="table"> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>cycle</code></td> - <td>Cycles through the carousel items from left to right.</td> - </tr> - <tr> - <td><code>pause</code></td> - <td>Stops the carousel from cycling through items.</td> - </tr> - <tr> - <td><code>prev</code></td> - <td>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td> - </tr> - <tr> - <td><code>next</code></td> - <td>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td> - </tr> - <tr> - <td><code>nextWhenVisible</code></td> - <td>Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. <strong>Returns to the caller before the target item has been shown</strong> - </tr> - <tr> - <td><code>to</code></td> - <td>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td> - </tr> - <tr> - <td><code>dispose</code></td> - <td>Destroys an element's carousel. (Removes stored data on the DOM element)</td> - </tr> - <tr> - <td> - <code>getInstance</code> - </td> - <td> - Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: <code>bootstrap.Carousel.getInstance(element)</code> - </td> - </tr> - <tr> - <td> - <code>getOrCreateInstance</code> - </td> - <td> - 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: <code>bootstrap.Carousel.getOrCreateInstance(element)</code> - </td> - </tr> - </tbody> -</table> +{{< bs-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 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)` | +{{< /bs-table >}} ### Events @@ -443,24 +362,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 `<div class="carousel">`). -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>slide.bs.carousel</code></td> - <td>Fires immediately when the <code>slide</code> instance method is invoked.</td> - </tr> - <tr> - <td><code>slid.bs.carousel</code></td> - <td>Fired when the carousel has completed its slide transition.</td> - </tr> - </tbody> -</table> +{{< bs-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.1/components/collapse.md b/site/content/docs/5.1/components/collapse.md index 75e4b20a3f..4fb6f5e944 100644 --- a/site/content/docs/5.1/components/collapse.md +++ b/site/content/docs/5.1/components/collapse.md @@ -143,30 +143,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=""`. -<table class="table"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>parent</code></td> - <td>selector | jQuery object | DOM element </td> - <td><code>false</code></td> - <td>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 <code>card</code> class). The attribute has to be set on the target collapsible area.</td> - </tr> - <tr> - <td><code>toggle</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Toggles the collapsible element on invocation</td> - </tr> - </tbody> -</table> +{{< 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 | +{{< /bs-table >}} ### Methods @@ -185,80 +167,29 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, { }) ``` -<table class="table"> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>toggle</code></td> - <td>Toggles a collapsible element to shown or hidden. <strong>Returns to the caller before the collapsible element has actually been shown or hidden</strong> (i.e. before the <code>shown.bs.collapse</code> or <code>hidden.bs.collapse</code> event occurs).</td> - </tr> - <tr> - <td><code>show</code></td> - <td>Shows a collapsible element. <strong>Returns to the caller before the collapsible element has actually been shown</strong> (e.g., before the <code>shown.bs.collapse</code> event occurs). </td> - </tr> - <tr> - <td><code>hide</code></td> - <td>Hides a collapsible element. <strong>Returns to the caller before the collapsible element has actually been hidden</strong> (e.g., before the <code>hidden.bs.collapse</code> event occurs).</td> - </tr> - <tr> - <td><code>dispose</code></td> - <td>Destroys an element's collapse. (Removes stored data on the DOM element)</td> - </tr> - <tr> - <td> - <code>getInstance</code> - </td> - <td> - Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: <code>bootstrap.Collapse.getInstance(element)</code> - </td> - </tr> - <tr> - <td> - <code>getOrCreateInstance</code> - </td> - <td> - 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: <code>bootstrap.Collapse.getOrCreateInstance(element)</code> - </td> - </tr> - </tbody> -</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). | +| `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 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)` | +{{< /bs-table >}} ### Events Bootstrap's collapse class exposes a few events for hooking into collapse functionality. -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>show.bs.collapse</code></td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td><code>shown.bs.collapse</code></td> - <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td><code>hide.bs.collapse</code></td> - <td>This event is fired immediately when the <code>hide</code> method has been called.</td> - </tr> - <tr> - <td><code>hidden.bs.collapse</code></td> - <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> -</table> +{{< bs-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.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index 0bd6a4fdfe..b053955dbb 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -1065,70 +1065,16 @@ 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=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-autoClose="false"`, use `data-bs-auto-close="false"`. -<table class="table"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 100px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>boundary</code></td> - <td>string | element</td> - <td><code>'clippingParents'</code></td> - <td>Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td> - </tr> - <tr> - <td><code>reference</code></td> - <td>string | element | object</td> - <td><code>'toggle'</code></td> - <td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, an HTMLElement reference or an object providing <code>getBoundingClientRect</code>. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/constructors/#createpopper">constructor docs</a> and <a href="https://popper.js.org/docs/v2/virtual-elements/">virtual element docs</a>.</td> - </tr> - <tr> - <td><code>display</code></td> - <td>string</td> - <td><code>'dynamic'</code></td> - <td>By default, we use Popper for dynamic positioning. Disable this with <code>static</code>.</td> - </tr> - <tr> - <td><code>offset</code></td> - <td>array | string | function</td> - <td><code>[0, 2]</code></td> - <td> - <p>Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p> - <p>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: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p> - <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p> - </td> - </tr> - <tr> - <td><code>autoClose</code></td> - <td>boolean | string</td> - <td><code>true</code></td> - <td> - <p>Configure the auto close behavior of the dropdown:</p> - <ul> - <li><code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li> - <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method.</li> - <li><code>'inside'</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li> - <li><code>'outside'</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li> - </ul> - <p>The dropdown can always be closed with the <kbd>ESC</kbd> key.</p> - </td> - </tr> - <tr> - <td><code>popperConfig</code></td> - <td>null | object | function</td> - <td><code>null</code></td> - <td> - <p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p> - <p>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.</p> - </td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `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). | +| `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/). | +| `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). | +| `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 | +| `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. | +{{< /bs-table >}} #### Using function with `popperConfig` @@ -1144,110 +1090,30 @@ var dropdown = new bootstrap.Dropdown(element, { ### Methods -<table class="table"> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>toggle</code></td> - <td> - Toggles the dropdown menu of a given navbar or tabbed navigation. - </td> - </tr> - <tr> - <td><code>show</code></td> - <td> - Shows the dropdown menu of a given navbar or tabbed navigation. - </td> - </tr> - <tr> - <td><code>hide</code></td> - <td> - Hides the dropdown menu of a given navbar or tabbed navigation. - </td> - </tr> - <tr> - <td><code>update</code></td> - <td> - Updates the position of an element's dropdown. - </td> - </tr> - <tr> - <td><code>dispose</code></td> - <td> - Destroys an element's dropdown. (Removes stored data on the DOM element) - </td> - </tr> - <tr> - <td> - <code>getInstance</code> - </td> - <td> - Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: <code>bootstrap.Dropdown.getInstance(element)</code> - </td> - </tr> - <tr> - <td> - <code>getOrCreateInstance</code> - </td> - <td> - 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: <code>bootstrap.Dropdown.getOrCreateInstance(element)</code> - </td> - </tr> - </tbody> -</table> +{{< bs-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 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)`. | +{{< /bs-table >}} ### Events All dropdown events are fired at the toggling element and then bubbled up. So you can also add event listeners on the `.dropdown-menu`'s parent 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. -<table class="table"> - <thead> - <tr> - <th>Method</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <code>show.bs.dropdown</code> - </td> - <td> - Fires immediately when the show instance method is called. - </td> - </tr> - <tr> - <td> - <code>shown.bs.dropdown</code> - </td> - <td> - Fired when the dropdown has been made visible to the user and CSS transitions have completed. - </td> - </tr> - <tr> - <td> - <code>hide.bs.dropdown</code> - </td> - <td> - Fires immediately when the hide instance method has been called. - </td> - </tr> - <tr> - <td> - <code>hidden.bs.dropdown</code> - </td> - <td> - Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. - </td> - </tr> - </tbody> -</table> +{{< bs-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.1/components/list-group.md b/site/content/docs/5.1/components/list-group.md index 724210f99d..7b6574ba86 100644 --- a/site/content/docs/5.1/components/list-group.md +++ b/site/content/docs/5.1/components/list-group.md @@ -504,32 +504,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. -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>show.bs.tab</code></td> - <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td> - </tr> - <tr> - <td><code>shown.bs.tab</code></td> - <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td> - </tr> - <tr> - <td><code>hide.bs.tab</code></td> - <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td> - </tr> - <tr> - <td><code>hidden.bs.tab</code></td> - <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td> - </tr> - </tbody> -</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. | +| `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 tabElms = document.querySelectorAll('a[data-bs-toggle="list"]') diff --git a/site/content/docs/5.1/components/modal.md b/site/content/docs/5.1/components/modal.md index e591f5b9b6..6facc239c5 100644 --- a/site/content/docs/5.1/components/modal.md +++ b/site/content/docs/5.1/components/modal.md @@ -568,37 +568,14 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. -<table class="table"> - <thead> - <tr> - <th>Size</th> - <th>Class</th> - <th>Modal max-width</th> - </tr> - </thead> - <tbody> - <tr> - <td>Small</td> - <td><code>.modal-sm</code></td> - <td><code>300px</code></td> - </tr> - <tr> - <td>Default</td> - <td class="text-muted">None</td> - <td><code>500px</code></td> - </tr> - <tr> - <td>Large</td> - <td><code>.modal-lg</code></td> - <td><code>800px</code></td> - </tr> - <tr> - <td>Extra large</td> - <td><code>.modal-xl</code></td> - <td><code>1140px</code></td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| Size | Class | Modal max-width +| --- | --- | --- | +| Small | `.modal-sm` | `300px` | +| Default | <span class="text-muted">None</span> | `500px` | +| Large | `.modal-lg` | `800px` | +| Extra large | `.modal-xl` | `1140px` | +{{< /bs-table >}} Our default modal without modifier class constitutes the "medium" size modal. @@ -660,40 +637,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`. -<table class="table"> - <thead> - <tr> - <th>Class</th> - <th>Availability</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>.modal-fullscreen</code></td> - <td>Always</td> - </tr> - <tr> - <td><code>.modal-fullscreen-sm-down</code></td> - <td>Below <code>576px</code></td> - </tr> - <tr> - <td><code>.modal-fullscreen-md-down</code></td> - <td>Below <code>768px</code></td> - </tr> - <tr> - <td><code>.modal-fullscreen-lg-down</code></td> - <td>Below <code>992px</code></td> - </tr> - <tr> - <td><code>.modal-fullscreen-xl-down</code></td> - <td>Below <code>1200px</code></td> - </tr> - <tr> - <td><code>.modal-fullscreen-xxl-down</code></td> - <td>Below <code>1400px</code></td> - </tr> - </tbody> -</table> +{{< 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 >}} <div class="bd-example"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full screen</button> @@ -859,36 +812,13 @@ 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=""`. -<table class="table"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>backdrop</code></td> - <td>boolean or the string <code>'static'</code></td> - <td><code>true</code></td> - <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal when clicked.</td> - </tr> - <tr> - <td><code>keyboard</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Closes the modal when escape key is pressed</td> - </tr> - <tr> - <td><code>focus</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Puts the focus on the modal when initialized.</td> - </tr> - </tbody> -</table> +{{< bs-table "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 when clicked. | +| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. | +| `focus` | boolean | `true` | Puts the focus on the modal when initialized. | +{{< /bs-table >}} ### Methods @@ -906,105 +836,31 @@ 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() -``` - -Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). - -```js -var modalToggle = document.getElementById('toggleMyModal') // relatedTarget -myModal.show(modalToggle) -``` - -#### 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 -``` - -#### 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 - -```js -var myModalEl = document.querySelector('#myModal') -var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance -``` +{{< bs-table "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). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `var modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` | +| `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. | +| `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. | +{{< /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 `<div class="modal">`). -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>show.bs.modal</code></td> - <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td> - </tr> - <tr> - <td><code>shown.bs.modal</code></td> - <td>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 <code>relatedTarget</code> property of the event.</td> - </tr> - <tr> - <td><code>hide.bs.modal</code></td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td><code>hidden.bs.modal</code></td> - <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td><code>hidePrevented.bs.modal</code></td> - <td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the <code>keyboard</code> option is set to <code>false</code>.</td> - </tr> - </tbody> -</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. | +| `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 of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. | +{{< /bs-table >}} ```js var myModalEl = document.getElementById('myModal') diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md index 11bb28029d..7e2a20d7ac 100644 --- a/site/content/docs/5.1/components/navs-tabs.md +++ b/site/content/docs/5.1/components/navs-tabs.md @@ -646,32 +646,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. -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>show.bs.tab</code></td> - <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td> - </tr> - <tr> - <td><code>shown.bs.tab</code></td> - <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td> - </tr> - <tr> - <td><code>hide.bs.tab</code></td> - <td>This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the current active tab and the new soon-to-be-active tab, respectively.</td> - </tr> - <tr> - <td><code>hidden.bs.tab</code></td> - <td>This event fires after a new tab is shown (and thus the previous active tab is hidden). Use <code>event.target</code> and <code>event.relatedTarget</code> to target the previous active tab and the new active tab, respectively.</td> - </tr> - </tbody> -</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. | +| `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('button[data-bs-toggle="tab"]') diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md index 93ccc6f783..f1d2002ace 100644 --- a/site/content/docs/5.1/components/popovers.md +++ b/site/content/docs/5.1/components/popovers.md @@ -11,7 +11,7 @@ toc: true Things to know when using the popover plugin: - Popovers rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper. -- Popovers require the [tooltip plugin]({{< docsref "/components/tooltips" >}}) as a dependency. +- Popovers require the [popover plugin]({{< docsref "/components/popovers" >}}) as a dependency. - Popovers are opt-in for performance reasons, so **you must initialize them yourself**. - Zero-length `title` and `content` values will never show a popover. - Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc). @@ -121,7 +121,7 @@ var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), ### Disabled elements -Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`. +Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or popover). As a workaround, you'll want to trigger the popover from a wrapper `<div>` or `<span>`, ideally made keyboard-focusable using `tabindex="0"`. For disabled popover triggers, you may also prefer `data-bs-trigger="hover focus"` so that the popover appears as immediate visual feedback to your users as they may not expect to _click_ on a disabled element. @@ -172,158 +172,29 @@ 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 >}} -<table class="table"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 100px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>animation</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Apply a CSS fade transition to the popover</td> - </tr> - <tr> - <td><code>container</code></td> - <td>string | element | false</td> - <td><code>false</code></td> - <td> - <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. 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.</p> - </td> - </tr> - <tr> - <td><code>content</code></td> - <td>string | element | function</td> - <td><code>''</code></td> - <td> - <p>Default content value if <code>data-bs-content</code> attribute isn't present.</p> - <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> - </td> - </tr> - <tr> - <td><code>delay</code></td> - <td>number | object</td> - <td><code>0</code></td> - <td> - <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p> - <p>If a number is supplied, delay is applied to both hide/show</p> - <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> - </td> - </tr> - <tr> - <td><code>html</code></td> - <td>boolean</td> - <td><code>false</code></td> - <td>Insert HTML into the popover. If false, <code>innerText</code> property will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td> - </tr> - <tr> - <td><code>placement</code></td> - <td>string | function</td> - <td><code>'right'</code></td> - <td> - <p>How to position the popover - auto | top | bottom | left | right.<br>When <code>auto</code> is specified, it will dynamically reorient the popover.</p> - <p>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 <code>this</code> context is set to the popover instance.</p> - </td> - </tr> - <tr> - <td><code>selector</code></td> - <td>string | false</td> - <td><code>false</code></td> - <td>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 <a href="{{< param repo >}}/issues/4215">this</a> and <a href="https://codepen.io/team/bootstrap/pen/zYBXGwX?editors=1010">an informative example</a>.</td> - </tr> - <tr> - <td><code>template</code></td> - <td>string</td> - <td><code>'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'</code></td> - <td> - <p>Base HTML to use when creating the popover.</p> - <p>The popover's <code>title</code> will be injected into the <code>.popover-header</code>.</p> - <p>The popover's <code>content</code> will be injected into the <code>.popover-body</code>.</p> - <p><code>.popover-arrow</code> will become the popover's arrow.</p> - <p>The outermost wrapper element should have the <code>.popover</code> class.</p> - </td> - </tr> - <tr> - <td><code>title</code></td> - <td>string | element | function</td> - <td><code>''</code></td> - <td> - <p>Default title value if <code>title</code> attribute isn't present.</p> - <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p> - </td> - </tr> - <tr> - <td><code>trigger</code></td> - <td>string</td> - <td><code>'click'</code></td> - <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. <code>manual</code> cannot be combined with any other trigger.</td> - </tr> - <tr> - <td><code>fallbackPlacements</code></td> - <td>array</td> - <td><code>['top', 'right', 'bottom', 'left']</code></td> - <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to - Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td> - </tr> - <tr> - <td><code>boundary</code></td> - <td>string | element</td> - <td><code>'clippingParents'</code></td> - <td>Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td> - </tr> - <tr> - <td><code>customClass</code></td> - <td>string | function</td> - <td><code>''</code></td> - <td> - <p>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: <code>'class-1 class-2'</code>.</p> - <p>You can also pass a function that should return a single string containing additional class names.</p> - </td> - </tr> - <tr> - <td><code>sanitize</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Enable or disable the sanitization. If activated <code>'template'</code>, <code>'content'</code> and <code>'title'</code> options will be sanitized. See the <a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">sanitizer section in our JavaScript documentation</a>.</td> - </tr> - <tr> - <td><code>allowList</code></td> - <td>object</td> - <td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td> - <td>Object which contains allowed attributes and tags</td> - </tr> - <tr> - <td><code>sanitizeFn</code></td> - <td>null | function</td> - <td><code>null</code></td> - <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td> - </tr> - <tr> - <td><code>offset</code></td> - <td>array | string | function</td> - <td><code>[0, 8]</code></td> - <td> - <p>Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p> - <p>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: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p> - <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p> - </td> - </tr> - <tr> - <td><code>popperConfig</code></td> - <td>null | object | function</td> - <td><code>null</code></td> - <td> - <p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p> - <p>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.</p> - </td> - </tr> - </tbody> -</table> + +{{< bs-table "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` | 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. | +| `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. | +| `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). | +| `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. | +| `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. | +| `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. | +| `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). | +| `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). | +| `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). | +| `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, 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.| +{{< /bs-table >}} {{< callout info >}} #### Data attributes for individual popovers @@ -349,136 +220,51 @@ var popover = new bootstrap.Popover(element, { {{< partial "callout-danger-async-methods.md" >}} {{< /callout >}} +{{< bs-table "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. | +| `setContent` | Gives a way to change the popover's content after its initialization. | +| `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. | +| `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 | +{{< /bs-table >}} -#### 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() -``` - -#### setContent - -Gives a way to change the popover's content after its initialization. +// getOrCreateInstance example +var exampleTriggerEl = document.getElementById('example') +var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance -```js +// setContent example myPopover.setContent({ '.popover-header': 'another title', '.popover-body': 'another content' }) + ``` {{< callout info >}} The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null` {{< /callout >}} -#### 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 -``` - -#### 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 - -```js -var exampleTriggerEl = document.getElementById('example') -var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance -``` - ### Events -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.popover</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td>shown.bs.popover</td> - <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>hide.bs.popover</td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td>hidden.bs.popover</td> - <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>inserted.bs.popover</td> - <td>This event is fired after the <code>show.bs.popover</code> event when the popover template has been added to the DOM.</td> - </tr> - </tbody> -</table> +{{< bs-table >}} +| Event | Description | +| --- | --- | +| `show.bs.popover` | This event fires immediately when the <code>show</code> 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 <code>hide</code> 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 <code>show.bs.popover</code> 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.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md index d8a9ef5d9f..f91f75cd8d 100644 --- a/site/content/docs/5.1/components/scrollspy.md +++ b/site/content/docs/5.1/components/scrollspy.md @@ -271,11 +271,30 @@ Navbar links must have resolvable id targets. For example, a `<a href="#home">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" >}} +| 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" >}} +| 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, to get the scrollspy instance associated with a DOM element | +| `getOrCreateInstance` | *Static* method which allows, to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn't initialized. | +{{< /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 = Array.prototype.slice.call(document.querySelectorAll('[data-bs-spy="scroll"]')) @@ -285,79 +304,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 -``` - -#### 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 - -```js -var scrollSpyContentEl = document.getElementById('content') -var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(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=""`. - -<table class="table"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 100px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>offset</code></td> - <td>number</td> - <td><code>10</code></td> - <td>Pixels to offset from top when calculating position of scroll.</td> - </tr> - <tr> - <td><code>method</code></td> - <td>string</td> - <td><code>auto</code></td> - <td>Finds which section the spied element is in. <code>auto</code> will choose the best method to get scroll coordinates. <code>offset</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>Element.getBoundingClientRect()</code></a> method to get scroll coordinates. <code>position</code> will use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop"><code>HTMLElement.offsetTop</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft"><code>HTMLElement.offsetLeft</code></a> properties to get scroll coordinates.</td> - </tr> - <tr> - <td><code>target</code></td> - <td>string | jQuery object | DOM element</td> - <td></td> - <td>Specifies element to apply Scrollspy plugin.</td> - </tr> - </tbody> -</table> - ### Events -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>activate.bs.scrollspy</code></td> - <td>This event fires on the scroll element whenever a new item becomes activated by the scrollspy.</td> - </tr> - </tbody> -</table> +{{< bs-table "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.1/components/toasts.md b/site/content/docs/5.1/components/toasts.md index 531181c2f9..a982c47db3 100644 --- a/site/content/docs/5.1/components/toasts.md +++ b/site/content/docs/5.1/components/toasts.md @@ -349,38 +349,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=""`. -<table class="table"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 100px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>animation</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Apply a CSS fade transition to the toast</td> - </tr> - <tr> - <td><code>autohide</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Auto hide the toast</td> - </tr> - <tr> - <td><code>delay</code></td> - <td>number</td> - <td> - <code>5000</code> - </td> - <td>Delay hiding the toast (ms)</td> - </tr> - </tbody> -</table> +{{< 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 | +{{< /bs-table >}} ### Methods @@ -388,77 +363,26 @@ 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() -``` - -#### getInstance - -*Static* method which allows you to get the toast instance associated with a DOM element - -```js -var myToastEl = document.getElementById('myToastEl') -var 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 - -```js -var myToastEl = document.getElementById('myToastEl') -var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance -``` +{{< bs-table "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. | +| `getInstance` | *Static* method which allows you to get the scrollspy instance associated with a DOM element. <br> Par example: `var myToastEl = document.getElementById('myToastEl')` `var 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>`var myToastEl = document.getElementById('myToastEl')` `var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance | +{{< /bs-table >}} ### Events -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>show.bs.toast</code></td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td><code>shown.bs.toast</code></td> - <td>This event is fired when the toast has been made visible to the user.</td> - </tr> - <tr> - <td><code>hide.bs.toast</code></td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td><code>hidden.bs.toast</code></td> - <td>This event is fired when the toast has finished being hidden from the user.</td> - </tr> - </tbody> -</table> +{{< bs-table "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.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md index ee2808f41b..502b6b27cf 100644 --- a/site/content/docs/5.1/components/tooltips.md +++ b/site/content/docs/5.1/components/tooltips.md @@ -202,156 +202,28 @@ 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 >}} -<table class="table"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 100px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>animation</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Apply a CSS fade transition to the tooltip</td> - </tr> - <tr> - <td><code>container</code></td> - <td>string | element | false</td> - <td><code>false</code></td> - <td> - <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. 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.</p> - </td> - </tr> - <tr> - <td><code>delay</code></td> - <td>number | object</td> - <td><code>0</code></td> - <td> - <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p> - <p>If a number is supplied, delay is applied to both hide/show</p> - <p>Object structure is: <code>delay: { "show": 500, "hide": 100 }</code></p> - </td> - </tr> - <tr> - <td><code>html</code></td> - <td>boolean</td> - <td><code>false</code></td> - <td> - <p>Allow HTML in the tooltip.</p> - <p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, <code>innerText</code> property will be used to insert content into the DOM.</p> - <p>Use text if you're worried about XSS attacks.</p> - </td> - </tr> - <tr> - <td><code>placement</code></td> - <td>string | function</td> - <td><code>'top'</code></td> - <td> - <p>How to position the tooltip - auto | top | bottom | left | right.<br>When <code>auto</code> is specified, it will dynamically reorient the tooltip.</p> - <p>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 <code>this</code> context is set to the tooltip instance.</p> - </td> - </tr> - <tr> - <td><code>selector</code></td> - <td>string | false</td> - <td><code>false</code></td> - <td>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 (<code>jQuery.on</code> support). See <a href="{{< param repo >}}/issues/4215">this</a> and <a href="https://codepen.io/team/bootstrap/pen/zYBXGwX?editors=1010">an informative example</a>.</td> - </tr> - <tr> - <td><code>template</code></td> - <td>string</td> - <td><code>'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'</code></td> - <td> - <p>Base HTML to use when creating the tooltip.</p> - <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p> - <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p> - <p>The outermost wrapper element should have the <code>.tooltip</code> class and <code>role="tooltip"</code>.</p> - </td> - </tr> - <tr> - <td><code>title</code></td> - <td>string | element | function</td> - <td><code>''</code></td> - <td> - <p>Default title value if <code>title</code> attribute isn't present.</p> - <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p> - </td> - </tr> - <tr> - <td><code>trigger</code></td> - <td>string</td> - <td><code>'hover focus'</code></td> - <td> - <p>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</p> - <p><code>'manual'</code> indicates that the tooltip will be triggered programmatically via the <code>.show()</code>, <code>.hide()</code> and <code>.toggle()</code> methods; this value cannot be combined with any other trigger.</p> - <p><code>'hover'</code> 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.</p> - </td> - </tr> - <tr> - <td><code>fallbackPlacements</code></td> - <td>array</td> - <td><code>['top', 'right', 'bottom', 'left']</code></td> - <td>Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to - Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements">behavior docs</a></td> - </tr> - <tr> - <td><code>boundary</code></td> - <td>string | element</td> - <td><code>'clippingParents'</code></td> - <td>Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td> - </tr> - <tr> - <td><code>customClass</code></td> - <td>string | function</td> - <td><code>''</code></td> - <td> - <p>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: <code>'class-1 class-2'</code>.</p> - <p>You can also pass a function that should return a single string containing additional class names.</p> - </td> - </tr> - <tr> - <td><code>sanitize</code></td> - <td>boolean</td> - <td><code>true</code></td> - <td>Enable or disable the sanitization. If activated <code>'template'</code> and <code>'title'</code> options will be sanitized. See the <a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">sanitizer section in our JavaScript documentation</a>.</td> - </tr> - <tr> - <td><code>allowList</code></td> - <td>object</td> - <td><a href="{{< docsref "/getting-started/javascript#sanitizer" >}}">Default value</a></td> - <td>Object which contains allowed attributes and tags</td> - </tr> - <tr> - <td><code>sanitizeFn</code></td> - <td>null | function</td> - <td><code>null</code></td> - <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td> - </tr> - <tr> - <td><code>offset</code></td> - <td>array | string | function</td> - <td><code>[0, 0]</code></td> - <td> - <p>Offset of the tooltip relative to its target. You can pass a string in data attributes with comma separated values like: <code>data-bs-offset="10,20"</code></p> - <p>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: <code>[<a href="https://popper.js.org/docs/v2/modifiers/offset/#skidding-1">skidding</a>, <a href="https://popper.js.org/docs/v2/modifiers/offset/#distance-1">distance</a>]</code>.</p> - <p>For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/offset/#options">offset docs</a>.</p> - </td> - </tr> - <tr> - <td><code>popperConfig</code></td> - <td>null | object | function</td> - <td><code>null</code></td> - <td> - <p>To change Bootstrap's default Popper config, see <a href="https://popper.js.org/docs/v2/constructors/#options">Popper's configuration</a>.</p> - <p>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.</p> - </td> - </tr> - </tbody> -</table> + +{{< bs-table "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 | `'<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. | +| `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. | +| `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, 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). | +| `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. | +| `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). | +| `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, 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.| +{{< /bs-table >}} {{< callout info >}} #### Data attributes for individual tooltips @@ -377,131 +249,47 @@ var tooltip = new bootstrap.Tooltip(element, { {{< 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. +{{< bs-table "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. | +| `setContent` | Gives a way to change the tooltip's content after its initialization. | +| `toggleEnabled` | Toggles the ability for an element's tooltip to be shown or hidden. | +| `update` | Updates the position of an element's tooltip. | +| `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 | +{{< /bs-table >}} ```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 +// getOrCreateInstance example +var exampleTriggerEl = document.getElementById('example') +var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance -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. +// setContent example +tooltip.setContent({ '.tooltip-inner': 'another title' }) -```js -tooltip.disable() ``` -#### setContent - -Gives a way to change the tooltip's content after its initialization. - -```js -tooltip.setContent({ '.tooltip-inner': 'another title' }) -``` {{< callout info >}} The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null` {{< /callout >}} -#### 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() -``` - -#### getInstance - -*Static* method which allows you to get the tooltip instance associated with a DOM element - -```js -var exampleTriggerEl = document.getElementById('example') -var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance -``` - -#### 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 - -```js -var exampleTriggerEl = document.getElementById('example') -var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance -``` - ### Events -<table class="table"> - <thead> - <tr> - <th style="width: 150px;">Event type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>show.bs.tooltip</code></td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td><code>shown.bs.tooltip</code></td> - <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td><code>hide.bs.tooltip</code></td> - <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td> - </tr> - <tr> - <td><code>hidden.bs.tooltip</code></td> - <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td><code>inserted.bs.tooltip</code></td> - <td>This event is fired after the <code>show.bs.tooltip</code> event when the tooltip template has been added to the DOM.</td> - </tr> - </tbody> -</table> +{{< bs-table >}} +| Event | Description | +| --- | --- | +| `show.bs.tooltip` | This event fires immediately when the <code>show</code> 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 <code>hide</code> 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 <code>show.bs.tooltip</code> event when the tooltip template has been added to the DOM. | +{{< /bs-table >}} ```js var myTooltipEl = document.getElementById('myTooltip') diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md index 04c4cdebf7..7d00e42c64 100644 --- a/site/content/docs/5.1/content/reboot.md +++ b/site/content/docs/5.1/content/reboot.md @@ -84,52 +84,16 @@ This `font-family` is applied to the `<body>` and automatically inherited global All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing. -<table class="table"> - <thead> - <tr> - <th>Heading</th> - <th>Example</th> - </tr> - </thead> - <tbody> - <tr> - <td> - {{< markdown >}}`<h1></h1>`{{< /markdown >}} - </td> - <td><span class="h1">h1. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h2></h2>`{{< /markdown >}} - </td> - <td><span class="h2">h2. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h3></h3>`{{< /markdown >}} - </td> - <td><span class="h3">h3. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h4></h4>`{{< /markdown >}} - </td> - <td><span class="h4">h4. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h5></h5>`{{< /markdown >}} - </td> - <td><span class="h5">h5. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h6></h6>`{{< /markdown >}} - </td> - <td><span class="h6">h6. Bootstrap heading</span></td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| Heading | Example | +| --- | --- | +| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> | +| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> | +| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> | +| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> | +| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> | +| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> | +{{< /bs-table >}} ## Horizontal rules @@ -227,41 +191,41 @@ For indicating sample output from a program use the `<samp>` tag. Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}). -<div class="bd-example"> - <table> - <caption> - This is an example table, and this is its caption to describe the contents. - </caption> - <thead> - <tr> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - <th>Table heading</th> - </tr> - </thead> - <tbody> - <tr> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - <tr> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - <td>Table cell</td> - </tr> - </tbody> - </table> -</div> +{{< example >}} +<table> + <caption> + This is an example table, and this is its caption to describe the contents. + </caption> + <thead> + <tr> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + <th>Table heading</th> + </tr> + </thead> + <tbody> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + <tr> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + <td>Table cell</td> + </tr> + </tbody> +</table> +{{< /example >}} ## Forms diff --git a/site/content/docs/5.1/content/typography.md b/site/content/docs/5.1/content/typography.md index 44c65252da..3c71df7d11 100644 --- a/site/content/docs/5.1/content/typography.md +++ b/site/content/docs/5.1/content/typography.md @@ -22,52 +22,16 @@ These styles can be found within `_reboot.scss`, and the global variables are de All HTML headings, `<h1>` through `<h6>`, are available. -<table class="table"> - <thead> - <tr> - <th>Heading</th> - <th>Example</th> - </tr> - </thead> - <tbody> - <tr> - <td> - {{< markdown >}}`<h1></h1>`{{< /markdown >}} - </td> - <td><span class="h1">h1. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h2></h2>`{{< /markdown >}} - </td> - <td><span class="h2">h2. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h3></h3>`{{< /markdown >}} - </td> - <td><span class="h3">h3. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h4></h4>`{{< /markdown >}} - </td> - <td><span class="h4">h4. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h5></h5>`{{< /markdown >}} - </td> - <td><span class="h5">h5. Bootstrap heading</span></td> - </tr> - <tr> - <td> - {{< markdown >}}`<h6></h6>`{{< /markdown >}} - </td> - <td><span class="h6">h6. Bootstrap heading</span></td> - </tr> - </tbody> -</table> +{{< bs-table >}} +| Heading | Example | +| --- | --- | +| `<h1></h1>` | <span class="h1">h1. Bootstrap heading</span> | +| `<h2></h2>` | <span class="h2">h2. Bootstrap heading</span> | +| `<h3></h3>` | <span class="h3">h3. Bootstrap heading</span> | +| `<h4></h4>` | <span class="h4">h4. Bootstrap heading</span> | +| `<h5></h5>` | <span class="h5">h5. Bootstrap heading</span> | +| `<h6></h6>` | <span class="h6">h6. Bootstrap heading</span> | +{{< /bs-table >}} ```html <h1>h1. Bootstrap heading</h1> diff --git a/site/content/docs/5.1/getting-started/browsers-devices.md b/site/content/docs/5.1/getting-started/browsers-devices.md index bdda154a30..41885feaad 100644 --- a/site/content/docs/5.1/getting-started/browsers-devices.md +++ b/site/content/docs/5.1/getting-started/browsers-devices.md @@ -26,68 +26,23 @@ We use [Autoprefixer](https://github.com/postcss/autoprefixer) to handle intende Generally speaking, Bootstrap supports the latest versions of each major platform's default browsers. Note that proxy browsers (such as Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk) are not supported. -<table class="table"> - <thead> - <tr> - <th scope="col"></th> - <th scope="col">Chrome</th> - <th scope="col">Firefox</th> - <th scope="col">Safari</th> - <th scope="col">Android Browser & WebView</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Android</th> - <td>Supported</td> - <td>Supported</td> - <td class="text-muted">—</td> - <td>v6.0+</td> - </tr> - <tr> - <th scope="row">iOS</th> - <td>Supported</td> - <td>Supported</td> - <td>Supported</td> - <td class="text-muted">—</td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| | 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> | +{{< /bs-table >}} ### Desktop browsers Similarly, the latest versions of most desktop browsers are supported. -<table class="table"> - <thead> - <tr> - <th scope="col"></th> - <th scope="col">Chrome</th> - <th scope="col">Firefox</th> - <th scope="col">Microsoft Edge</th> - <th scope="col">Opera</th> - <th scope="col">Safari</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">Mac</th> - <td>Supported</td> - <td>Supported</td> - <td>Supported</td> - <td>Supported</td> - <td>Supported</td> - </tr> - <tr> - <th scope="row">Windows</th> - <td>Supported</td> - <td>Supported</td> - <td>Supported</td> - <td>Supported</td> - <td class="text-muted">—</td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| | Chrome | Firefox | Microsoft Edge | Opera | Safari | +| --- | --- | --- | --- | --- | --- | +| **Mac** | Supported | Supported | Supported | Supported | Supported | +| **Windows** | Supported | Supported | Supported | Supported | <span class="text-muted">—</span> | +{{< /bs-table >}} For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox. diff --git a/site/content/docs/5.1/getting-started/contents.md b/site/content/docs/5.1/getting-started/contents.md index 07f6bdb980..b9b92506ca 100644 --- a/site/content/docs/5.1/getting-started/contents.md +++ b/site/content/docs/5.1/getting-started/contents.md @@ -68,96 +68,25 @@ This is the most basic form of Bootstrap: precompiled files for quick drop-in us Bootstrap includes a handful of options for including some or all of our compiled CSS. -<table class="table"> - <thead> - <tr> - <th scope="col">CSS files</th> - <th scope="col">Layout</th> - <th scope="col">Content</th> - <th scope="col">Components</th> - <th scope="col">Utilities</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row"> - <div><code class="fw-normal text-nowrap">bootstrap.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap.rtl.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap.min.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap.rtl.min.css</code></div> - </th> - <td>Included</td> - <td>Included</td> - <td>Included</td> - <td>Included</td> - </tr> - <tr> - <th scope="row"> - <div><code class="fw-normal text-nowrap">bootstrap-grid.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap-grid.rtl.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap-grid.min.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap-grid.rtl.min.css</code></div> - </th> - <td><a class="link-secondary" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td> - <td class="text-muted">—</td> - <td class="text-muted">—</td> - <td><a class="link-secondary" href="{{< docsref "/utilities/flex" >}}">Only flex utilities</a></td> - </tr> - <tr> - <th scope="row"> - <div><code class="fw-normal text-nowrap">bootstrap-utilities.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap-utilities.rtl.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap-utilities.min.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap-utilities.rtl.min.css</code></div> - </th> - <td class="text-muted">—</td> - <td class="text-muted">—</td> - <td class="text-muted">—</td> - <td>Included</td> - </tr> - <tr> - <th scope="row"> - <div><code class="fw-normal text-nowrap">bootstrap-reboot.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap-reboot.rtl.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap-reboot.min.css</code></div> - <div><code class="fw-normal text-nowrap">bootstrap-reboot.rtl.min.css</code></div> - </th> - <td class="text-muted">—</td> - <td><a class="link-secondary" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td> - <td class="text-muted">—</td> - <td class="text-muted">—</td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| CSS files | Layout | Content | Components | Utilities | +| --- | --- | --- | --- | --- | +| `bootstrap.css`<br> `bootstrap.min.css`<br> `bootstrap.rtl.css`<br> `bootstrap.rtl.min.css` | Included | Included | Included | Included | +| `bootstrap-grid.css`<br> `bootstrap-grid.rtl.css`<br> `bootstrap-grid.min.css`<br> `bootstrap-grid.rtl.min.css` | [Only grid system]({{< docsref "/layout/grid" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | +| `bootstrap-utilities.css`<br> `bootstrap-utilities.rtl.css`<br> `bootstrap-utilities.min.css`<br> `bootstrap-utilities.rtl.min.css` | — | — | — | Included | +| `bootstrap-reboot.css`<br> `bootstrap-reboot.rtl.css`<br> `bootstrap-reboot.min.css`<br> `bootstrap-reboot.rtl.min.css` | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — | [Only flex utilities]({{< docsref "/utilities/flex" >}}) | +{{< /bs-table >}} ## JS files Similarly, we have options for including some or all of our compiled JavaScript. -<table class="table"> - <thead> - <tr> - <th scope="col">JS files</th> - <th scope="col">Popper</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row"> - <div><code class="fw-normal text-nowrap">bootstrap.bundle.js</code></div> - <div><code class="fw-normal text-nowrap">bootstrap.bundle.min.js</code></div> - </th> - <td>Included</td> - </tr> - <tr> - <th scope="row"> - <div><code class="fw-normal text-nowrap">bootstrap.js</code></div> - <div><code class="fw-normal text-nowrap">bootstrap.min.js</code></div> - </th> - <td class="text-muted">—</td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| JS Files | Popper | +| --- | --- | +| `bootstrap.bundle.js`<br> `bootstrap.bundle.min.js`<br> | Included | +| `bootstrap.js`<br> `bootstrap.min.js`<br> | – | +{{< /bs-table >}} ## Bootstrap source code diff --git a/site/content/docs/5.1/getting-started/contribute.md b/site/content/docs/5.1/getting-started/contribute.md index 337bb2a43c..67fe67f94f 100644 --- a/site/content/docs/5.1/getting-started/contribute.md +++ b/site/content/docs/5.1/getting-started/contribute.md @@ -23,48 +23,14 @@ 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:** -<table class="table"> - <thead> - <tr> - <th>Task</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <code>npm start</code> - </td> - <td> - Compiles CSS and JavaScript, builds the documentation, and starts a local server. - </td> - </tr> - <tr> - <td> - <code>npm run dist</code> - </td> - <td> - Creates the <code>dist/</code> directory with compiled files. Requires <a href="https://sass-lang.com/">Sass</a>, <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>, and <a href="https://github.com/terser/terser">terser</a>. - </td> - </tr> - <tr> - <td> - <code>npm test</code> - </td> - <td> - Runs tests locally after running <code>npm run dist</code> - </td> - </tr> - <tr> - <td> - <code>npm run docs-serve</code> - </td> - <td> - Builds and runs the documentation locally. - </td> - </tr> - </tbody> -</table> +{{< 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 >}} {{< callout info >}} {{< partial "callout-info-npm-starter.md" >}} @@ -78,7 +44,7 @@ Dart Sass uses a rounding precision of 10 and for efficiency reasons does not al ## 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. @@ -99,5 +65,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.1/layout/breakpoints.md b/site/content/docs/5.1/layout/breakpoints.md index 568bbfeebd..772cd60e1c 100644 --- a/site/content/docs/5.1/layout/breakpoints.md +++ b/site/content/docs/5.1/layout/breakpoints.md @@ -19,47 +19,17 @@ toc: true Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files. -<table class="table"> - <thead> - <tr> - <th>Breakpoint</th> - <th>Class infix</th> - <th>Dimensions</th> - </tr> - </thead> - <tbody> - <tr> - <td>Extra small</td> - <td><em>None</em></td> - <td><576px</td> - </tr> - <tr> - <td>Small</td> - <td><code>sm</code></td> - <td>≥576px</td> - </tr> - <tr> - <td>Medium</td> - <td><code>md</code></td> - <td>≥768px</td> - </tr> - <tr> - <td>Large</td> - <td><code>lg</code></td> - <td>≥992px</td> - </tr> - <tr> - <td>Extra large</td> - <td><code>xl</code></td> - <td>≥1200px</td> - </tr> - <tr> - <td>Extra extra large</td> - <td><code>xxl</code></td> - <td>≥1400px</td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| Breakpoint | Class infix | Dimensions | +| --- | --- | --- | +| Extra small | <em>None</em> |<576px | +| Small | `sm` | ≥576px | +| Medium | `md` | ≥768px | +| Large | `lg` | ≥992px | +| Extra large | `xl` | ≥1200px | +| Extra extra large | <code>xxl</code> | ≥1400px | +{{< /bs-table >}} + Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device. diff --git a/site/content/docs/5.1/layout/containers.md b/site/content/docs/5.1/layout/containers.md index 456225b942..6557bea4e6 100644 --- a/site/content/docs/5.1/layout/containers.md +++ b/site/content/docs/5.1/layout/containers.md @@ -20,102 +20,17 @@ The table below illustrates how each container's `max-width` compares to the ori See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}). -<table class="table"> - <thead> - <tr> - <td class="border-dark"></td> - <th scope="col"> - Extra small<br> - <span class="fw-normal"><576px</span> - </th> - <th scope="col"> - Small<br> - <span class="fw-normal">≥576px</span> - </th> - <th scope="col"> - Medium<br> - <span class="fw-normal">≥768px</span> - </th> - <th scope="col"> - Large<br> - <span class="fw-normal">≥992px</span> - </th> - <th scope="col"> - X-Large<br> - <span class="fw-normal">≥1200px</span> - </th> - <th scope="col"> - XX-Large<br> - <span class="fw-normal">≥1400px</span> - </th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row" class="fw-normal"><code>.container</code></th> - <td class="text-muted">100%</td> - <td>540px</td> - <td>720px</td> - <td>960px</td> - <td>1140px</td> - <td>1320px</td> - </tr> - <tr> - <th scope="row" class="fw-normal"><code>.container-sm</code></th> - <td class="text-muted">100%</td> - <td>540px</td> - <td>720px</td> - <td>960px</td> - <td>1140px</td> - <td>1320px</td> - </tr> - <tr> - <th scope="row" class="fw-normal"><code>.container-md</code></th> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td>720px</td> - <td>960px</td> - <td>1140px</td> - <td>1320px</td> - </tr> - <tr> - <th scope="row" class="fw-normal"><code>.container-lg</code></th> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td>960px</td> - <td>1140px</td> - <td>1320px</td> - </tr> - <tr> - <th scope="row" class="fw-normal"><code>.container-xl</code></th> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td>1140px</td> - <td>1320px</td> - </tr> - <tr> - <th scope="row" class="fw-normal"><code>.container-xxl</code></th> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td>1320px</td> - </tr> - <tr> - <th scope="row" class="fw-normal"><code>.container-fluid</code></th> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - <td class="text-muted">100%</td> - </tr> - </tbody> -</table> +{{< bs-table "table" >}} +| | Extra small<div class="fw-normal"><576px</div> | Small<div class="fw-normal">≥576px</div> | Medium<div class="fw-normal">≥768px</div> | Large<div class="fw-normal">≥992px</div> | X-Large<div class="fw-normal">≥1200px</div> | XX-Large<div class="fw-normal">≥1400px</div> | +| --- | --- | --- | --- | --- | --- | --- | +| `.container` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px | +| `.container-sm` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px | +| `.container-md` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 720px | 960px | 1140px | 1320px | +| `.container-lg` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 960px | 1140px | 1320px | +| `.container-xl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1140px | 1320px | +| `.container-xxl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1320px | +| `.container-fluid` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | +{{< /bs-table >}} ## Default container diff --git a/site/content/docs/5.1/utilities/display.md b/site/content/docs/5.1/utilities/display.md index 9e5a5dfb2d..65eb333c7b 100644 --- a/site/content/docs/5.1/utilities/display.md +++ b/site/content/docs/5.1/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. -<table class="table"> - <thead> - <tr> - <th>Screen size</th> - <th>Class</th> - </tr> - </thead> - <tbody> - <tr> - <td>Hidden on all</td> - <td><code>.d-none</code></td> - </tr> - <tr> - <td>Hidden only on xs</td> - <td><code>.d-none .d-sm-block</code></td> - </tr> - <tr> - <td>Hidden only on sm</td> - <td><code>.d-sm-none .d-md-block</code></td> - </tr> - <tr> - <td>Hidden only on md</td> - <td><code>.d-md-none .d-lg-block</code></td> - </tr> - <tr> - <td>Hidden only on lg</td> - <td><code>.d-lg-none .d-xl-block</code></td> - </tr> - <tr> - <td>Hidden only on xl</td> - <td><code>.d-xl-none .d-xxl-block</code></td> - </tr> - <tr> - <td>Hidden only on xxl</td> - <td><code>.d-xxl-none</code></td> - </tr> - <tr> - <td>Visible on all</td> - <td><code>.d-block</code></td> - </tr> - <tr> - <td>Visible only on xs</td> - <td><code>.d-block .d-sm-none</code></td> - </tr> - <tr> - <td>Visible only on sm</td> - <td><code>.d-none .d-sm-block .d-md-none</code></td> - </tr> - <tr> - <td>Visible only on md</td> - <td><code>.d-none .d-md-block .d-lg-none</code></td> - </tr> - <tr> - <td>Visible only on lg</td> - <td><code>.d-none .d-lg-block .d-xl-none</code></td> - </tr> - <tr> - <td>Visible only on xl</td> - <td><code>.d-none .d-xl-block .d-xxl-none</code></td> - </tr> - <tr> - <td>Visible only on xxl</td> - <td><code>.d-none .d-xxl-block</code></td> - </tr> - </tbody> -</table> +{{< bs-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 .d-xxl-block` | +| 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 >}} <div class="d-lg-none">hide on lg and wider screens</div> diff --git a/site/layouts/shortcodes/bs-table.html b/site/layouts/shortcodes/bs-table.html index 42a18d5782..9eec109cb8 100644 --- a/site/layouts/shortcodes/bs-table.html +++ b/site/layouts/shortcodes/bs-table.html @@ -4,5 +4,6 @@ {{- $css_class := .Get 0 | default "table" -}} {{- $html_table := .Inner | markdownify -}} -{{- $html_table = replace $html_table "<table>" (printf `<table class="%s">` $css_class) -}} +{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive"><table class="%s">` $css_class) -}} +{{- $html_table = replace $html_table "</table>" "</table></div>" -}} {{- $html_table | safeHTML -}} |