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) { @media (max-width: 768px) {
.bs-table-scrollable { .bs-table-scrollable {
width: 100%; width: 100%;
margin-bottom: 15px;
overflow-y: hidden; overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
.bs-table-scrollable .bs-table { .bs-table-scrollable .table {
margin-bottom: 0; margin-bottom: 0;
border: 0; border: 0;
} }
.bs-table-scrollable .bs-table th, .bs-table-scrollable .table th,
.bs-table-scrollable .bs-table td { .bs-table-scrollable .table td {
white-space: nowrap; white-space: nowrap;
} }
.bs-table-scrollable .bs-table th:first-child, .bs-table-scrollable .table th:first-child,
.bs-table-scrollable .bs-table td:first-child { .bs-table-scrollable .table td:first-child {
border-left: 0; border-left: 0;
} }
.bs-table-scrollable .bs-table th:last-child, .bs-table-scrollable .table th:last-child,
.bs-table-scrollable .bs-table td:last-child { .bs-table-scrollable .table td:last-child {
border-right: 0; border-right: 0;
} }
.bs-table-scrollable .bs-table tr:last-child th, .bs-table-scrollable .table tr:last-child th,
.bs-table-scrollable .bs-table tr:last-child td { .bs-table-scrollable .table tr:last-child td {
border-bottom: 0; border-bottom: 0;
} }
} }
@ -608,7 +609,7 @@ body {
------------------------- */ ------------------------- */
.responsive-utilities-test { .responsive-utilities-test {
margin-top: 5px; margin-top: 5px;
margin-left: 0; padding-left: 0;
list-style: none; list-style: none;
overflow: hidden; /* clear floats */ 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> <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> <h3>Responsive classes</h3>
<div class="hidden-sm"> <div class="bs-scrollable-table">
<table class="table table-bordered table-striped responsive-utilities"> <table class="table table-bordered table-striped responsive-utilities">
<thead> <thead>
<tr> <tr>
@ -2138,27 +2138,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</div> </div>
<h3>Print classes</h3> <h3>Print classes</h3>
<table class="table table-bordered table-striped responsive-utilities"> <div class="bs-scrollable-table">
<thead> <table class="table table-bordered table-striped responsive-utilities">
<tr> <thead>
<th>Class</th> <tr>
<th>Browser</th> <th>Class</th>
<th>Print</th> <th>Browser</th>
</tr> <th>Print</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<th><code>.visible-print</code></th> <tr>
<td class="is-hidden">Hidden</td> <th><code>.visible-print</code></th>
<td class="is-visible">Visible</td> <td class="is-hidden">Hidden</td>
</tr> <td class="is-visible">Visible</td>
<tr> </tr>
<th><code>.hidden-print</code></th> <tr>
<td class="is-visible">Visible</td> <th><code>.hidden-print</code></th>
<td class="is-hidden">Hidden</td> <td class="is-visible">Visible</td>
</tr> <td class="is-hidden">Hidden</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
<h3>When to use</h3> <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> <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>