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, 13: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 | |||