表格

一、示例

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

你可使用.table-darkclass选择器来产生颜色反转对比效果，即深色背景和浅色文本。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

二、Head表头处理

与预设的反转样式相似，使用.thead-light 或.thead-dark 中的一个样式，就能使 <thead>区显示出浅黑或深灰。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

三、条纹状表格

使用 .table-striped 样式定义 <tbody>，可以产生逐行颜色强烈对比的表格样式（以及增加反转）。

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

四、表格边框处理

添加 .table-bordered 类可以产生表格边框与间隙系统。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

五、无边框

添加.table-borderless无边界表格

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

六、行悬停效果

将 .table-hover 定义到 <tbody>上，可以产生行悬停效果（鼠标移到行上会出现状态提示）。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

七、紧缩表格

添加 .table-sm 可以将表格的padding值缩减一半，使表格更加紧凑。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

八、语义状态化

使用语义状态样式对表格逐行或单个单元格进行着色表达。

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

九、Captions表格辅助标题

<caption> 标签如同一个表格的标题，它默认是隐藏的，可以协助屏幕阅读器用户找到表格、了解表格内容，且决定是否需要阅读它。

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

十、响应式表格

当表格想要始终呈现水平滚动，可在.table上加入.table-responsive获得响应式表现，从而支持任何viewport窗口。也可以在.table上，加 .table-responsive{-sm|-md|-lg|-xl}属性来定义多屏幕尺寸响应支持。

1，总是响应

为兼容各个屏幕规格断点，添加 .table-responsive 选择器使表格支持水平响应。

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

2，多屏幕断点设定

使用 .table-responsive{-sm|-md|-lg|-xl}可以根据需要对不同屏幕尺寸断点表格进行响应式设计，在中断点之上该表格会正常显示，而不是水平滚动（没有水平条）。

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell