rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert more tables to Markdown

Browse source
This commit is contained in:
XhmikosR 2020-11-02 15:45:25 +02:00
parent 020fa66ec2
commit e65de02404
6 changed files with 63 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

34
site/content/docs/5.0/components/list-group.md
View file

@ -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-bs-toggle="list"]')

44
site/content/docs/5.0/components/modal.md
View file

@ -655,40 +655,16 @@ Our default modal without modifier class constitutes the "medium" size modal.
Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
<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>

34
site/content/docs/5.0/components/navs-tabs.md
View file

@ -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-bs-toggle="tab"]')

56
site/content/docs/5.0/content/typography.md
View file

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

54
site/content/docs/5.0/getting-started/build-tools.md
View file

@ -22,52 +22,18 @@ When completed, you'll be able to run the various commands provided from the com
Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes numerous tasks for developing the project. Run `npm run` to see all the npm scripts in your terminal. **Primary tasks include:**
<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 >}}
## Autoprefixer
Bootstrap uses [Autoprefixer][autoprefixer] (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
Bootstrap uses [Autoprefixer](https://github.com/postcss/autoprefixer) (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins like those found in v3.
We maintain the list of browsers supported through Autoprefixer in a separate file within our GitHub repository. See [.browserslistrc]({{< param repo >}}/blob/v{{< param current_version >}}/.browserslistrc) for details.
@ -84,5 +50,3 @@ Learn more about using Hugo by reading its [documentation](https://gohugo.io/doc
## Troubleshooting
Should you encounter problems with installing dependencies, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
[autoprefixer]: https://github.com/postcss/autoprefixer

84
site/content/docs/5.0/utilities/display.md
View file

@ -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</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>