表格
1. 基础表格（.table）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
2. 条纹表格（.table-striped）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
注：条纹只出现在 < tbody > 内的行上，不出现在表头。
3. 带边框表格（.table-bordered）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
4. 鼠标悬停状态表格（.table-hover）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
注：鼠标悬停在哪一行，哪一行的背景颜色就变成灰色(表头除外)。
5. 带有背景颜色的表格（.table-颜色）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-info">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
6. 带有背景颜色的条纹表格(.table-颜色 .table-striped)
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-dark table-striped">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
7. 带有背景颜色的鼠标悬停效果表格(.table-颜色 .table-hover)
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
8. 指定意义的颜色类
通过指定意义的颜色类可以为表格的行或者单元格设置颜色：
代码如下：部分颜色示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr class="table-success">
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr class="table-danger">
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr class="table-info">
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
9. 表头颜色(.thead-dark / .thead-light)
. thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead class="thead-dark">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead class="thead-light">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
10. 较小的表格( .table-sm )
通过减少内边距来设置较小的表格:
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>22</td>
<td>Java工程师</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>25</td>
<td>数据工程师</td>
</tr>
<tr>
<td>赵一</td>
<td>女</td>
<td>21</td>
<td>前端开发</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
<td>测试工程师</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
运行结果：
原来的表格如下：
11. 响应式表格(.table-responsive)
你可以通过以下类设定在指定屏幕宽度下显示滚动条：
代码如下：.table-responsive 类用于创建响应式表格，在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则没有滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>年龄</th><th>偶像</th>
<th>籍贯</th><th>爱好</th><th>职位</th><th>血型</th><th>星座</th>
<th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th>
<th>1</th><th>1</th><th>1</th><th>1</th><th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>钟离</td><td>男</td><td>21</td><td>zzn</td>
<td>山东</td><td>看书</td><td>前端工程师</td><td>A</td><td>双子座</td>
<th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th>
<th>1</th><th>1</th><th>1</th><th>1</th><th>1</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
运行结果：
