Skip to content

Commit

Permalink
Covert more tables to Markdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@XhmikosR
XhmikosR committed Nov 2, 2020
1 parent 13482eb commit 9d65d9c
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 118 deletions.
34 changes: 8 additions & 26 deletions site/content/docs/5.0/components/list-group.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,32 +436,14 @@ When showing a new tab, the events fire in the following order:

If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.

<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 "table" >}}
| Event type | Description |
| --- | --- |
| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
{{< /bs-table >}}

```js
var tabEl = document.querySelector('a[data-toggle="list"]')
Expand Down
34 changes: 8 additions & 26 deletions site/content/docs/5.0/components/navs-tabs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -629,32 +629,14 @@ When showing a new tab, the events fire in the following order:

If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events will not be fired.

<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 "table" >}}
| Event type | Description |
| --- | --- |
| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
{{< /bs-table >}}

```js
var tabEl = document.querySelector('a[data-toggle="tab"]')
Expand Down
84 changes: 18 additions & 66 deletions site/content/docs/5.0/utilities/display.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,72 +55,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</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 "table" >}}
| Screen size | Class |
| --- | --- |
| Hidden on all | `.d-none` |
| Hidden only on xs | `.d-none .d-sm-block` |
| Hidden only on sm | `.d-sm-none .d-md-block` |
| Hidden only on md | `.d-md-none .d-lg-block` |
| Hidden only on lg | `.d-lg-none .d-xl-block` |
| Hidden only on xl | `.d-xl-none` |
| Hidden only on xxl | `.d-xxl-none` |
| Visible on all | `.d-block` |
| Visible only on xs | `.d-block .d-sm-none` |
| Visible only on sm | `.d-none .d-sm-block .d-md-none` |
| Visible only on md | `.d-none .d-md-block .d-lg-none` |
| Visible only on lg | `.d-none .d-lg-block .d-xl-none` |
| Visible only on xl | `.d-none .d-xl-block .d-xxl-none` |
| Visible only on xxl | `.d-none .d-xxl-block` |
{{< /bs-table >}}

{{< example >}}
<div class="d-lg-none">hide on lg and wider screens</div>
Expand Down

0 comments on commit 9d65d9c

Please sign in to comment.