Bootstrap 表格

2020-06-18 05:59:46易采站长站整理

通过添加 .table-striped class,您将在

内的行上看到条纹,如下面的实例所示:

实例

 

条纹表格布局
名称城市邮编
TanmayBangalore560001
SachinMumbai400003
UmaPune411027


结果如下所示:

条纹表格

边框表格

通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:

实例

 

边框表格布局
名称城市邮编
TanmayBangalore560001
SachinMumbai400003
UmaPune411027


结果如下所示:

边框表格

悬停表格

通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:

实例

 

悬停表格布局
名称城市邮编
TanmayBangalore560001
SachinMumbai400003
UmaPune411027


结果如下所示:

悬停表格

精简表格

通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

实例

 

精简表格布局
名称城市邮编
TanmayBangalore560001
SachinMumbai400003
UmaPune411027


结果如下所示:

精简表格

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

相关文章 大家在看