<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="tabe-responsive">
<!--table class为引入表格框架，table-striped class为引入斑马线样式 tabe-bordered为每个单元格增加边框 tabe-hover增加悬停效果 table-sm让表格更加紧凑-->
<table class="table table-striped table-bordered table-hover table-sm table-bordered" >
<thead class="thead-dark"> <!--声明表头 thead-dark class设表头为黑色背景-->
<tr class="table-success"> <!--table rows 按行排列-->
<!--table head表标题，即字段名-->
<th scope="col">姓名</th>
<th scope="col">学号</th>
<th scope="col">年龄</th>
<th scope="col">身高</th>
<th scope="col">成绩</th>
<th scope="col">英语</th>
<th scope="col">数学</th>
<th scope="col">语文</th>
<th scope="col">生物</th>
<th scope="col">化学</th>
</tr>
</thead>
<!--主体-->
<tbody>
<tr class="table-warring"> <!--行-->
<td scope="col">001</td> <!--序号设为一例子-->
<!--剩下的默认按行排列-->
<td>60</td>
<td>50</td>
<td>40</td>
<td>30</td>
<td>20</td>
<td>60</td>
<td>50</td>
<td>40</td>
<td>30</td>
</tr>
<tr> <!--行-->
<td scope="col">001</td> <!--序号设为一例子-->
<!--剩下的默认按行排列-->
<td class="table-info">60</td>
<td>50</td>
<td>40</td>
<td>30</td>
<td>20</td>
<td>60</td>
<td>50</td>
<td>40</td>
<td>30</td>
</tr>
<tr> <!--行-->
<td scope="col">001</td> <!--序号设为一例子-->
<!--剩下的默认按行排列-->
<td>60</td>
<td>50</td>
<td>40</td>
<td>30</td>
<td>20</td>
<td class="table-danger">60</td><!--背景设为红色-->
<td>50</td>
<td>40</td>
<td>30</td>
</tr>
<tr> <!--行-->
<td scope="col">001</td> <!--序号设为一例子-->
<!--剩下的默认按行排列-->
<td>60</td>
<td>50</td>
<td>40</td>
<td class="table-success">30</td>
<td>20</td>
<td>60</td>
<td>50</td>
<td>40</td>
<td>30</td>
</tr>
<tr> <!--行-->
<td scope="col">001</td> <!--序号设为一例子-->
<!--剩下的默认按行排列-->
<td>60</td>
<td>50</td>
<td>40</td>
<td>30</td>
<td>20</td>
<td>60</td>
<td>50</td>
<td>40</td>
<td class="table-dark">30</td>
</tr>
<tr> <!--行-->
<td scope="col">001</td> <!--序号设为一例子-->
<!--剩下的默认按行排列-->
<td>60</td>
<td>50</td>
<td class="table-secondary">40</td>
<td>30</td>
<td>20</td>
<td >60</td>
<td>50</td>
<td>40</td>
<td>30</td>
</tr>
<tr> <!--行-->
<td scope="col" class="table-primary">001</td> <!--序号设为一例子-->
<!--剩下的默认按行排列-->
<td >60</td>
<td>50</td>
<td>40</td>
<td>30</td>
<td>20</td>
<td>60</td>
<td>50</td>
<td>40</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn-btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secndary">次要按钮</button>
<button type="button" class="btn btn-warring">警告</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-success">基本按钮</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>
</body>
</html>
