Skip to content

Commit

Permalink
Wrap some more tables to make them responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@GeoSot
GeoSot committed Mar 12, 2022
1 parent 13deba6 commit ac68bd7
Show file tree
Hide file tree
Showing 7 changed files with 267 additions and 357 deletions.
2 changes: 1 addition & 1 deletion site/content/docs/5.1/components/dropdowns.md
View file
Expand Up @@ -1072,7 +1072,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
| `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"` <br> 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). <br>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> <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></br> Note: the dropdown can always be closed with the <kbd>ESC</kbd> key
| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown: <ul> <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><br> 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) <br>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 >}}
Expand Down
39 changes: 8 additions & 31 deletions site/content/docs/5.1/components/modal.md
View file
Expand Up @@ -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 bs-js-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.

Expand Down
94 changes: 48 additions & 46 deletions site/content/docs/5.1/content/reboot.md
View file
Expand Up @@ -84,52 +84,54 @@ 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>
<div class="table-responsive">
<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>
</div>

## Horizontal rules

Expand Down
69 changes: 12 additions & 57 deletions site/content/docs/5.1/getting-started/browsers-devices.md
View file
Expand Up @@ -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 &amp; WebView</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Android</th>
<td>Supported</td>
<td>Supported</td>
<td class="text-muted">&mdash;</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">&mdash;</td>
</tr>
</tbody>
</table>
{{< bs-table "table bs-js-table" >}}
| | Chrome | Firefox | Safari | Android Browser &amp; WebView |
| --- | --- | --- | --- | --- |
| **Android** | Supported | Supported | <span class="text-muted">&mdash;</span> | v6.0+ |
| **Windows** | Supported | Supported | Supported | <span class="text-muted">&mdash;</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">&mdash;</td>
</tr>
</tbody>
</table>
{{< bs-table "table bs-js-table" >}}
| | Chrome | Firefox | Microsoft Edge | Opera | Safari |
| --- | --- | --- | --- | --- | --- |
| **Mac** | Supported | Supported | Supported | Supported | Supported |
| **Windows** | Supported | Supported | Supported | Supported | <span class="text-muted">&mdash;</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.

Expand Down

0 comments on commit ac68bd7

Please sign in to comment.