2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00

Rewrite docs tables in Markdown with table shortcode (#31337)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: GeoSot <geo.sotis@gmail.com>
This commit is contained in:
Mark Otto
2022-03-14 00:38:04 -07:00
committed by GitHub
parent 8fe82c7176
commit a9a89debc7
22 changed files with 468 additions and 1956 deletions
+11 -96
View File
@@ -20,102 +20,17 @@ The table below illustrates how each container's `max-width` compares to the ori
See them in action and compare them in our [Grid example]({{< docsref "/examples/grid#containers" >}}).
<table class="table">
<thead>
<tr>
<td class="border-dark"></td>
<th scope="col">
Extra small<br>
<span class="fw-normal">&lt;576px</span>
</th>
<th scope="col">
Small<br>
<span class="fw-normal">&ge;576px</span>
</th>
<th scope="col">
Medium<br>
<span class="fw-normal">&ge;768px</span>
</th>
<th scope="col">
Large<br>
<span class="fw-normal">&ge;992px</span>
</th>
<th scope="col">
X-Large<br>
<span class="fw-normal">&ge;1200px</span>
</th>
<th scope="col">
XX-Large<br>
<span class="fw-normal">&ge;1400px</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="fw-normal"><code>.container</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="fw-normal"><code>.container-sm</code></th>
<td class="text-muted">100%</td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="fw-normal"><code>.container-md</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="fw-normal"><code>.container-lg</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>960px</td>
<td>1140px</td>
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="fw-normal"><code>.container-xl</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>1140px</td>
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="fw-normal"><code>.container-xxl</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td>1320px</td>
</tr>
<tr>
<th scope="row" class="fw-normal"><code>.container-fluid</code></th>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
<td class="text-muted">100%</td>
</tr>
</tbody>
</table>
{{< bs-table "table" >}}
| | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;992px</div> | X-Large<div class="fw-normal">&ge;1200px</div> | XX-Large<div class="fw-normal">&ge;1400px</div> |
| --- | --- | --- | --- | --- | --- | --- |
| `.container` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
| `.container-sm` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
| `.container-md` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 720px | 960px | 1140px | 1320px |
| `.container-lg` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 960px | 1140px | 1320px |
| `.container-xl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1140px | 1320px |
| `.container-xxl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1320px |
| `.container-fluid` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> |
{{< /bs-table >}}
## Default container