テーブル
テーブルのすべてのBootstrapクラスがサポートされ、改善されています。
例
アクションを含む単純なテーブル
# | 名 | 仕事内容 | 以来 | 給料 | actions |
---|---|---|---|---|---|
1 | Andrew Mike | 開発する | 2013 | € 99,225 | |
2 | John Doe | 設計 | 2012 | € 89,241 | |
3 | Alex Mike | 設計 | 2010 | € 92,144 |
<table class="table">
<thead>
<tr>
<th class="text-center">#</th>
<th>名</th>
<th>仕事内容</th>
<th>以来</th>
<th class="text-right">給料</th>
<th class="text-right">actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Andrew Mike</td>
<td>開発する</td>
<td>2013</td>
<td class="text-right">€ 99,225</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info">
<i class="material-icons">person</i>
</button>
<button type="button" rel="tooltip" class="btn btn-success">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>John Doe</td>
<td>設計</td>
<td>2012</td>
<td class="text-right">€ 89,241</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-round">
<i class="material-icons">person</i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-round">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-round">
<i class="material-icons">close</i>
</button>
</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Alex Mike</td>
<td>設計</td>
<td>2010</td>
<td class="text-right">€ 92,144</td>
<td class="td-actions text-right">
<button type="button" rel="tooltip" class="btn btn-info btn-simple">
<i class="material-icons">person</i>
</button>
<button type="button" rel="tooltip" class="btn btn-success btn-simple">
<i class="material-icons">edit</i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-simple">
<i class="material-icons">close</i>
</button>
</td>
</tr>
</tbody>
</table>
ショッピングカートのテーブル
製品 | 色 | size | 価格 | qty | 量 | ||
---|---|---|---|---|---|---|---|
|
Spring Jacket
by Dolce&Gabbana |
Red | M | €549 |
1
|
€549 |
<div class="table-responsive">
<table class="table table-shopping">
<thead>
<tr>
<th class="text-center"></th>
<th>製品</th>
<th class="th-description">色</th>
<th class="th-description">size</th>
<th class="text-right">価格</th>
<th class="text-right">qty</th>
<th class="text-right">量</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="img-container">
<img src="https://images.thenorthface.com/is/image/TheNorthFace/NF0A2VFL_619_hero" alt="...">
</div>
</td>
<td class="td-name">
<a href="#jacket">Spring Jacket</a>
<br><small>by Dolce&Gabbana</small>
</td>
<td>
Red
</td>
<td>
M
</td>
<td class="td-number">
<small>€</small>549
</td>
<td class="td-number">
1
<div class="btn-group">
<button class="btn btn-round btn-info btn-sm"> <i class="material-icons">remove</i> </button>
<button class="btn btn-round btn-info btn-sm"> <i class="material-icons">add</i> </button>
</div>
</td>
<td class="td-number">
<small>€</small>549
</td>
<td class="td-actions">
<button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-simple">
<i class="material-icons">close</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>