基本表格

基本表格

在表格上添加 .table 即可

ID 用户名 登录时间 登录IP 角色
1 teagan 2016/12/12 01:56 23.125.112.0 管理员
2 andy 2016/12/13 02:12 204.145.9.109 会员
3 veronica 2016/09/02 13:09 231.1.8.187 开发者
4 bruce 2016/11/15 11:56 120.121.0.1 技术支持
5 carolina 2016/10/11 09:54 90.80.132.1 会员
6 madaline 2016/09/10 12:34 108.119.90.121 技术支持

鼠标悬停

在添加 <tbody> 内的任一行添加 .table-hover 启用鼠标悬停状态

编号 产品 价格走势 销量
1 手机 5,3,2,-1,-3,-2,2,3,4,1 28.76%
2 平板电脑 1,-1,-2,1,2,1,0,1,3,2 8.55%
3 台式机 3,2,3,-1,-3,-1,0,2,4,5 58.56%
4 内存 1,-2,0,2,4,5,3,2,3,5 35.76%
5 充电宝 1,-1,0,2,3,1,-1,1,4,2 21.13%
6 U盘 4,2,-1,-3,-2,1,3,5,2,4 26.88%

带边框的表格

添加 .table-bordered 可为所有单元格添加边框

任务 进度 计划完成时间 操作
月球探测项目
2019/12/05
接见法国总理
2017/01/09
人造太阳计划
2018/03/23
购买F22战机
2019/12/01
去好莱坞演大片
2018/09/08
乖乖写代码
2016/12/10

条纹表格

通过添加 .table-striped 在 <tbody> 内显示斑马线形式的条纹效果

订单编号 用户名 付款方式 共计
2569 @Jessica 信用卡 ¥256.10
4582 @William 支付宝 ¥96.75
2563 @Jennifer 微信 ¥458.00
4378 @Rolando 百度钱包 ¥30.25
8465 @Katelin 银行卡 ¥158.50
1526 @Richard 支付宝 ¥58.80

简洁表格

添加 .table-sm 减少单元格的padding，从而使表格更加紧凑。

订单编号 用户名 付款价格 日期
#53451 Adams ¥24.98 2016/7/26
#53452 Richards ¥564.00 2016/7/15
#53453 Lane ¥58.87 2016/7/01
#53454 Bates ¥97.50 2016/6/26
#53455 Harper ¥249.99 2016/6/09
#53456 Willard ¥24.98 2016/6/01

折叠表格

项目 进度 日期
项目 #25369 已取消 2016-10-17
## 模块-1111 完成 2016-12-01
## 模块-723 完成 2016-09-15
## 模块-4200c 完成 2016-10-12
项目 #28686 测试中 2016-10-23
## 模块-3100c 进行中 2016-10-13
## 模块-6400 完成 2016-11-21
## 模块-2210 已完成 2016-12-01
项目 #29587 开发中 2016-11-12
## 模块-7400 已完成 2016-12-21
## 模块-510c 已完成 2016-11-12
## 模块-3a00 已完成 2016-12-15

表格选中

编号 项目 状态 进度
619 月球探测项目 幻想中 5,3,2,-1,-3,-2,2,3,5,2
620 接见法国总理 待安排 1,-1,0,2,3,1,-1,1,4,2
621 人造太阳计划 测试中 2,3,-1,-3,-1,0,2,4,5,3
622 购买F22战机 已取消 1,-2,0,2,4,5,3,2,4,2
623 去好莱坞演大片 等待答复 4,2,-1,-3,-2,1,3,5,2,4

响应式

创建响应式表格需要在 .table 外面加一层包含 .table-responsive 的元素，在小屏幕设备(屏幕宽度小于768px)上会显示横向的滚动条。

表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据

上下文类

可以通过 .table-active, .table-success, .table-info, .table-warning, .table-danger, .table-disabled 来改变单元格的的背景颜色

表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 表格标题
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据
表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据 表格数据