mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
Move .table-responsive from wrapper to .table
This commit is contained in:
Quy
+70
-72
@@ -57,78 +57,76 @@ While Bootstrap uses `em`s or `rem`s for defining most sizes, `px`s are used for
|
||||
|
||||
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="text-center">
|
||||
Extra small<br>
|
||||
<small><576px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Small<br>
|
||||
<small>≥576px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Medium<br>
|
||||
<small>≥768px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Large<br>
|
||||
<small>≥992px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Extra large<br>
|
||||
<small>≥1200px</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Grid behavior</th>
|
||||
<td>Horizontal at all times</td>
|
||||
<td colspan="4">Collapsed to start, horizontal above breakpoints</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Max container width</th>
|
||||
<td>None (auto)</td>
|
||||
<td>540px</td>
|
||||
<td>720px</td>
|
||||
<td>960px</td>
|
||||
<td>1140px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Class prefix</th>
|
||||
<td><code>.col-</code></td>
|
||||
<td><code>.col-sm-</code></td>
|
||||
<td><code>.col-md-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
<td><code>.col-xl-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row"># of columns</th>
|
||||
<td colspan="5">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Gutter width</th>
|
||||
<td colspan="5">30px (15px on each side of a column)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Nestable</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Offsets</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Column ordering</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table table-bordered table-striped table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="text-center">
|
||||
Extra small<br>
|
||||
<small><576px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Small<br>
|
||||
<small>≥576px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Medium<br>
|
||||
<small>≥768px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Large<br>
|
||||
<small>≥992px</small>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
Extra large<br>
|
||||
<small>≥1200px</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Grid behavior</th>
|
||||
<td>Horizontal at all times</td>
|
||||
<td colspan="4">Collapsed to start, horizontal above breakpoints</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Max container width</th>
|
||||
<td>None (auto)</td>
|
||||
<td>540px</td>
|
||||
<td>720px</td>
|
||||
<td>960px</td>
|
||||
<td>1140px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Class prefix</th>
|
||||
<td><code>.col-</code></td>
|
||||
<td><code>.col-sm-</code></td>
|
||||
<td><code>.col-md-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
<td><code>.col-xl-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row"># of columns</th>
|
||||
<td colspan="5">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Gutter width</th>
|
||||
<td colspan="5">30px (15px on each side of a column)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Nestable</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Offsets</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Column ordering</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Auto-layout columns
|
||||
|
||||
|
||||
+140
-144
@@ -22,153 +22,149 @@ Try to use these on a limited basis and avoid creating entirely different versio
|
||||
* You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless.
|
||||
* These classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
Extra small devices
|
||||
<small>Portrait phones (<544px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Small devices
|
||||
<small>Landscape phones (≥544px - <768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Medium devices
|
||||
<small>Tablets (≥768px - <992px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Large devices
|
||||
<small>Desktops (≥992px - <1200px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Extra large devices
|
||||
<small>Desktops (≥1200px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xs-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-sm-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-md-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-lg-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xl-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xs-up</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-sm-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-md-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-lg-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xl-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table table-bordered table-striped responsive-utilities table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
Extra small devices
|
||||
<small>Portrait phones (<544px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Small devices
|
||||
<small>Landscape phones (≥544px - <768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Medium devices
|
||||
<small>Tablets (≥768px - <992px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Large devices
|
||||
<small>Desktops (≥992px - <1200px)</small>
|
||||
</th>
|
||||
<th>
|
||||
Extra large devices
|
||||
<small>Desktops (≥1200px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xs-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-sm-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-md-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-lg-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xl-down</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xs-up</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-sm-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-md-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-lg-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row"><code>.hidden-xl-up</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2 id="responsive-utilities-print">Print classes</h2>
|
||||
<p>Similar to the regular responsive classes, use these for toggling content for print.</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped responsive-utilities">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Browser</th>
|
||||
<th>Print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-print-block</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: block</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-print-inline</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: inline</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-print-inline-block</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-print</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="table table-bordered table-striped responsive-utilities table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Browser</th>
|
||||
<th>Print</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>.visible-print-block</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: block</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-print-inline</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: inline</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.visible-print-inline-block</code></th>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
<td class="is-visible">Visible<br>(as <code>display: inline-block</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.hidden-print</code></th>
|
||||
<td class="is-visible">Visible</td>
|
||||
<td class="is-hidden">Hidden</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Test cases
|
||||
|
||||
|
||||
Reference in New Issue
Block a user