Bootstrap 表格

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

Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

标签描述
),用来标识表格列。)。 内使用。
为表格添加基础样式。
表格标题行的容器元素(

表格主体中的表格行的容器元素(

一组出现在单行上的表格单元格的容器元素(

)。
默认的表格单元格。
特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在

关于表格存储内容的描述或总结。

表格类

下表样式可用于表格中:

,

描述实例
.table为任意

添加基本样式 (只有横向分隔线)
.table-striped

内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered为所有表格的单元格添加边框
.table-hover

内的任一行启用鼠标悬停状态
.table-condensed让表格更加紧凑
联合使用所有表格类

下表的类可用于表格的行或者单元格:

描述实例
.active将悬停的颜色应用在行或者单元格上
.success表示成功的操作
.info表示信息变化的操作
.warning表示一个警告的操作
.danger表示一个危险的操作

基本的表格

如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

实例

 

基本的表格布局
名称城市
TanmayBangalore
SachinMumbai


结果如下所示:

基本的表格

可选的表格类

除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格

相关文章 大家在看