Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

JS docs formatting tweaks #31337

Merged
merged 2 commits into from Mar 14, 2022
Merged

JS docs formatting tweaks #31337

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c383bfc
Rewrite docs tables in Markdown with table shortcode
mdo Jul 14, 2020
733e0de
Merge branch 'main' into js-docs-tweaks
XhmikosR Mar 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 3 additions & 5 deletions site/assets/scss/_content.scss
View file
Open in desktop
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);
mdo marked this conversation as resolved.
Show resolved Hide resolved

@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
Open in desktop
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
Open in desktop
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
Open in desktop
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