Skip to content

B
bootstrap
Commit 70fa8ef4 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Responsivey docs table for grid section

parent 8349236f
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 50 deletions
assets/css/docs.css
View file @ 70fa8ef4
...@@ -545,6 +545,36 @@ body { ...@@ -545,6 +545,36 @@ body {
/* Responsive docs /* Responsive docs
-------------------------------------------------- */ -------------------------------------------------- */
/* Responsive (scrollable) doc tables */
@media (max-width: 768px) {
.bs-table-scrollable {
width: 100%;
overflow-y: hidden;
overflow-x: scroll;
border: 1px solid #ddd;
}
.bs-table-scrollable .bs-table {
margin-bottom: 0;
border: 0;
}
.bs-table-scrollable .bs-table th,
.bs-table-scrollable .bs-table td {
white-space: nowrap;
}
.bs-table-scrollable .bs-table th:first-child,
.bs-table-scrollable .bs-table td:first-child {
border-left: 0;
}
.bs-table-scrollable .bs-table th:last-child,
.bs-table-scrollable .bs-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 {
border-bottom: 0;
}
}
/* Related: responsive utilities tables */ /* Related: responsive utilities tables */
.table code { .table code {
font-size: 13px; font-size: 13px;
......
css.html
View file @ 70fa8ef4
...@@ -78,56 +78,58 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e ...@@ -78,56 +78,58 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<h3 id="grid-options">Grid options</h3> <h3 id="grid-options">Grid options</h3>
<p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p> <p>See how aspects of the Bootstrap grid system work across multiple devices with a handy table.</p>
<table class="table table-bordered table-striped bs-table"> <div class="bs-table-scrollable">
<thead> <table class="table table-bordered table-striped bs-table">
<tr> <thead>
<th></th> <tr>
<th> <th></th>
Tiny grid <th>
<small>Phones (&lt;480px)</small> Tiny grid
</th> <small>Phones (&lt;480px)</small>
<th> </th>
Small grid <th>
<small>Tablets (&lt;768px)</small> Small grid
</th> <small>Tablets (&lt;768px)</small>
<th> </th>
Medium-large grid <th>
<small>Destkops (&gt;768px)</small> Medium-large grid
</th> <small>Destkops (&gt;768px)</small>
</tr> </th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<th>Grid behavior</th> <tr>
<td>Horizontal at all times</td> <th>Grid behavior</th>
<td colspan="2">Collapsed to start, horizontal above breakpoints</td> <td>Horizontal at all times</td>
</tr> <td colspan="2">Collapsed to start, horizontal above breakpoints</td>
<tr> </tr>
<th>Class prefix</th> <tr>
<td><code>.col-</code></td> <th>Class prefix</th>
<td><code>.col-sm-</code></td> <td><code>.col-</code></td>
<td><code>.col-lg-</code></td> <td><code>.col-sm-</code></td>
</tr> <td><code>.col-lg-</code></td>
<tr> </tr>
<th># of columns</th> <tr>
<td colspan="3">12</td> <th># of columns</th>
</tr> <td colspan="3">12</td>
<tr> </tr>
<th>Nestable</th> <tr>
<td colspan="3">Yes</td> <th>Nestable</th>
</tr> <td colspan="3">Yes</td>
<tr> </tr>
<th>Offsets</th> <tr>
<td colspan="2" class="text-muted">N/A</td> <th>Offsets</th>
<td>Yes</td> <td colspan="2" class="text-muted">N/A</td>
</tr> <td>Yes</td>
<tr> </tr>
<th>Column ordering</th> <tr>
<td class="text-muted">N/A</td> <th>Column ordering</th>
<td colspan="2">Yes</td> <td class="text-muted">N/A</td>
</tr> <td colspan="2">Yes</td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
<h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3> <h3 id="grid-example-basic">Example: Stacked-to-horizontal</h3>
<p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p> <p>Using a single set of grid classes, you can create a basic grid system that starts out stacked on mobile and tablet devices before becoming horizontal on desktop devices.</p>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment