kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

mo tables mo responsive or whatever the hell that means

This commit is contained in:
Mark Otto 2013-07-26 21:35:56 -07:00
parent 572174652e
commit 2967cc1d60
2 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
assets/css/docs.css
View File

@ -549,28 +549,29 @@ body {
@media (max-width: 768px) {
.bs-table-scrollable {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid #ddd;
}
.bs-table-scrollable .bs-table {
.bs-table-scrollable .table {
margin-bottom: 0;
border: 0;
}
.bs-table-scrollable .bs-table th,
.bs-table-scrollable .bs-table td {
.bs-table-scrollable .table th,
.bs-table-scrollable .table td {
white-space: nowrap;
}
.bs-table-scrollable .bs-table th:first-child,
.bs-table-scrollable .bs-table td:first-child {
.bs-table-scrollable .table th:first-child,
.bs-table-scrollable .table td:first-child {
border-left: 0;
}
.bs-table-scrollable .bs-table th:last-child,
.bs-table-scrollable .bs-table td:last-child {
.bs-table-scrollable .table th:last-child,
.bs-table-scrollable .table td:last-child {
border-right: 0;
}
.bs-table-scrollable .bs-table tr:last-child th,
.bs-table-scrollable .bs-table tr:last-child td {
.bs-table-scrollable .table tr:last-child th,
.bs-table-scrollable .table tr:last-child td {
border-bottom: 0;
}
}
@ -608,7 +609,7 @@ body {
------------------------- */
.responsive-utilities-test {
margin-top: 5px;
margin-left: 0;
padding-left: 0;
list-style: none;
overflow: hidden; /* clear floats */
}

46
css.html
View File

@ -2086,7 +2086,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.</p>
<h3>Responsive classes</h3>
<div class="hidden-sm">
<div class="bs-scrollable-table">
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
@ -2138,27 +2138,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div>
<h3>Print classes</h3>
<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</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</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 class="bs-scrollable-table">
<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</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</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>
<h3>When to use</h3>
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. Responsive utilities are currently only available for block-level toggling, meaning <code>display: none;</code> or <code>display: block;</code>. Use with inline and table elements is currently not supported.</p>