Bausteintest: Unterschied zwischen den Versionen
Zeile 1: | Zeile 1: | ||
− | <table class="table"> | + | <div class="table-responsive"> |
+ | <table class="table table-bordered table-striped"> | ||
<thead> | <thead> | ||
<tr> | <tr> | ||
− | <th> | + | <th></th> |
− | <th> | + | <th> |
− | <th> | + | Extra small devices |
− | <th> | + | <small>Phones (<768px)</small> |
+ | </th> | ||
+ | <th> | ||
+ | Small devices | ||
+ | <small>Tablets (≥768px)</small> | ||
+ | </th> | ||
+ | <th> | ||
+ | Medium devices | ||
+ | <small>Desktops (≥992px)</small> | ||
+ | </th> | ||
+ | <th> | ||
+ | Large devices | ||
+ | <small>Desktops (≥1200px)</small> | ||
+ | </th> | ||
</tr> | </tr> | ||
</thead> | </thead> | ||
<tbody> | <tbody> | ||
− | <tr | + | <tr> |
− | <th scope="row"> | + | <th class="text-nowrap" scope="row">Grid behavior</th> |
− | <td> | + | <td>Horizontal at all times</td> |
− | + | <td colspan="3">Collapsed to start, horizontal above breakpoints</td> | |
− | <td> | + | |
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <th scope="row"> | + | <th class="text-nowrap" scope="row">Container width</th> |
− | <td> | + | <td>None (auto)</td> |
− | <td> | + | <td>750px</td> |
− | <td> | + | <td>970px</td> |
+ | <td>1170px</td> | ||
</tr> | </tr> | ||
− | <tr | + | <tr> |
− | <th scope="row"> | + | <th class="text-nowrap" scope="row">Class prefix</th> |
− | <td> | + | <td><code>.col-xs-</code></td> |
− | <td> | + | <td><code>.col-sm-</code></td> |
− | <td> | + | <td><code>.col-md-</code></td> |
+ | <td><code>.col-lg-</code></td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <th scope="row"> | + | <th class="text-nowrap" scope="row"># of columns</th> |
− | <td> | + | <td colspan="4">12</td> |
− | + | ||
− | + | ||
</tr> | </tr> | ||
− | <tr | + | <tr> |
− | <th scope="row"> | + | <th class="text-nowrap" scope="row">Column width</th> |
− | <td> | + | <td class="text-muted">Auto</td> |
− | <td> | + | <td>~62px</td> |
− | <td> | + | <td>~81px</td> |
+ | <td>~97px</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <th scope="row"> | + | <th class="text-nowrap" scope="row">Gutter width</th> |
− | <td> | + | <td colspan="4">30px (15px on each side of a column)</td> |
− | + | ||
− | + | ||
</tr> | </tr> | ||
− | <tr | + | <tr> |
− | <th scope="row"> | + | <th class="text-nowrap" scope="row">Nestable</th> |
− | <td> | + | <td colspan="4">Yes</td> |
− | + | ||
− | + | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
− | <th scope="row"> | + | <th class="text-nowrap" scope="row">Offsets</th> |
− | <td> | + | <td colspan="4">Yes</td> |
− | + | ||
− | + | ||
</tr> | </tr> | ||
− | <tr | + | <tr> |
− | <th scope="row"> | + | <th class="text-nowrap" scope="row">Column ordering</th> |
− | <td> | + | <td colspan="4">Yes</td> |
− | + | ||
− | + | ||
</tr> | </tr> | ||
</tbody> | </tbody> | ||
</table> | </table> | ||
+ | </div> |
Version vom 25. August 2015, 12:30 Uhr
Extra small devices Phones (<768px) |
Small devices Tablets (≥768px) |
Medium devices Desktops (≥992px) |
Large devices Desktops (≥1200px) |
|
---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
Container width | None (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
# of columns | 12 | |||
Column width | Auto | ~62px | ~81px | ~97px |
Gutter width | 30px (15px on each side of a column) | |||
Nestable | Yes | |||
Offsets | Yes | |||
Column ordering | Yes |