Bootstrap 4教程-Bootstrap 4 Tables - 书目录

Bootstrap 4教程-Bootstrap 4 Tables

Bootstrap 4添加了一些新的表类,可以帮助构建一致的样式表和响应表。

基本表格

对于具有轻微填充单元格和水平分隔符的基本表格,将Bootstrap的.table类应用于<table>元素。

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

运行示例

黑色表格

您可以使用.table-dark类反转颜色,使其在深色背景上具有浅色文字。

<table class=”table table-dark”>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

运行示例

Bootstrap新增功能4

Bootstrap 4中新增了暗表。

条纹的表

对于行上交替的背景颜色,添加Bootstrap的.table-striped类(同时保留.table类)。

<table class="table table-striped">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

运行示例

边框表

对于桌子周围的边框,使用Bootstrap的.table-bordered类(同时保持.table类)。

<table class="table table-bordered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

运行示例

悬停行

为了在鼠标移动到表格行时实现这种“悬停”效果,请使用Bootstrap的.table-hover类(同时保留.table类)。

<table class="table table-hover">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

运行示例

表头样式

您可以使用.thead-default或.thead-inverse 向<thead>元素添加背景颜色。

light

使用.thead-light类。

<table class="table">
<thead class="thead-light">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

运行示例

dark

使用.thead-dark类。

<table class="table">
<thead class="thead-dark">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

运行示例

Bootstrap新增功能4

表头样式在Bootstrap 4中是新的。

小/冷凝表

如果你发现一个表有太多的填充,你可以通过使用Bootstrap的.table-sm类来填充一半(同时保持.table类)。

<table class="table table-sm">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer 1</th>
<th>Footer 2</th>
<th>Footer 3</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>

运行示例

Bootstrap 4 vs Bootstrap 3

请注意,尽管Bootstrap 4使用.table-sm来压缩表,但Bootstrap 3使用.table-condensed。两者都将细胞填充减半。

上下文类

您可以使用Bootstrap的上下文类将颜色应用于单个行或单元格。

5个上下文类是:.table-active,.table-success,.table-info,.table-warning和.table-danger。

<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="table-active">Active</td>
<td class="table-success">Success</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="table-info">Info</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="table-danger">Danger</td>
<td>&nbsp;</td>
<td class="table-warning">Warning</td>
</tr>
</tbody>
</table>

运行示例

Bootstrap 4 vs Bootstrap 3

引导程序3不为其上下文类使用.table-前缀。

例如,Bootstrap 3使用.active,而Bootstrap 4使用.table-active。除此之外,两个版本都使用相同的5个上下文关键字(主动,成功,信息,警告,危险)。

响应表

在小于给定断点的设备上查看时,响应表会自动创建水平滚动条。

要创建一个响应表,请将该表放入一个具有.table响应类(或.table-responsive- *类之一)的<div>元素中。

<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
</div>

运行示例

.table-responsive- *类可用于指定特定的断点。它们是.table-responsive-sm,.table-responsive-md,.table-responsive-lg和.table-responsive-xl。

从该断点开始,表格将正常运行并且不会水平滚动。

.table-responsive-class相当于.table-responsive-md。

 

133621

 

英语原文:https://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_tables.cfm 由工具自动翻译,由书目录整理