Skip to content

Commit

Permalink
Rewrite docs tables in Markdown with table shortcode (#31337)
Browse files Browse the repository at this point in the history 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: GeoSot <geo.sotis@gmail.com>
  • Loading branch information
@mdo @XhmikosR @GeoSot
3 people committed Mar 14, 2022
1 parent 8fe82c7 commit a9a89de
Show file tree
Hide file tree
Showing 22 changed files with 467 additions and 1,955 deletions.
8 changes: 3 additions & 5 deletions site/assets/scss/_content.scss
View file
Expand Up @@ -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;
}
Expand All @@ -61,6 +58,7 @@
}

// Prevent breaking of code
// stylelint-disable-next-line selector-max-compound-selectors
td:first-child > code {
white-space: nowrap;
}
Expand Down
92 changes: 26 additions & 66 deletions site/content/docs/5.1/components/alerts.md
View file
Expand Up @@ -209,82 +209,42 @@ 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()
```

### Events

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')
Expand Down
51 changes: 8 additions & 43 deletions site/content/docs/5.1/components/buttons.md
View file
Expand Up @@ -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

Expand Down
151 changes: 29 additions & 122 deletions site/content/docs/5.1/components/carousel.md
View file
Expand Up @@ -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

Expand All @@ -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

Expand All @@ -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')
Expand Down

0 comments on commit a9a89de

Please sign in to comment.