mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/layout/breakpoints.md
+11 -41
View File
@@ -19,47 +19,17 @@ toc: true
Bootstrap includes six default breakpoints, sometimes referred to as _grid tiers_, for building responsively. These breakpoints can be customized if you're using our source Sass files.
<table class="table">
<thead>
<tr>
<th>Breakpoint</th>
<th>Class infix</th>
<th>Dimensions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Extra small</td>
<td><em>None</em></td>
<td>&lt;576px</td>
</tr>
<tr>
<td>Small</td>
<td><code>sm</code></td>
<td>&ge;576px</td>
</tr>
<tr>
<td>Medium</td>
<td><code>md</code></td>
<td>&ge;768px</td>
</tr>
<tr>
<td>Large</td>
<td><code>lg</code></td>
<td>&ge;992px</td>
</tr>
<tr>
<td>Extra large</td>
<td><code>xl</code></td>
<td>&ge;1200px</td>
</tr>
<tr>
<td>Extra extra large</td>
<td><code>xxl</code></td>
<td>&ge;1400px</td>
</tr>
</tbody>
</table>
{{< bs-table "table" >}}
| Breakpoint | Class infix | Dimensions |
| --- | --- | --- |
| Extra small | <em>None</em> |&lt;576px |
| Small | `sm` | &ge;576px |
| Medium | `md` | &ge;768px |
| Large | `lg` | &ge;992px |
| Extra large | `xl` | &ge;1200px |
| Extra extra large | <code>xxl</code> | &ge;1400px |
{{< /bs-table >}}
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.
site/content/docs/5.1/layout/containers.md
+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