1.导入相关jquery的夹包,导入bootstrap的夹包,具体什么夹包请看后面测试代码
2.测试代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格和按钮</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin:50px" class="table-responsive">
<!--<table class="table table-striped">-->
<!--<table class="table table-striped table-bordered">-->
<!--<tr class="sr-only">-->
<table class="table table-hover">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>50</td>
</tr>
<tr class="info">
<td>2</td>
<td>李四</td>
<td>女</td>
<td>30</td>
</tr>
<tr class="success">
<td>3</td>
<td>王五</td>
<td>男</td>
<td>20</td>
</tr>
<tr class="active">
<td>4</td>
<td>马六</td>
<td>男</td>
<td>27</td>
</tr>
<tr class="danger">
<td>5</td>
<td>马2</td>
<td>男</td>
<td>29</td>
</tr>
</tbody>
</table>
<a href="###" class="btn btn-default">link</a>
<input type="button" class="btn btn-default" value="input"/>
<!-- 按钮的预定义样式,default默认样式,success成功样式,info一般信息样式,
warning警告样式,danger危险样式,primary首选项样式,link链接样式-->
<button class="btn btn-default">button1</button>
<button class="btn btn-success">button2</button>
<button class="btn btn-info">button3</button>
<button class="btn btn-warning">button9</button>
<button class="btn btn-danger">button10</button>
<button class="btn btn-primary">button11</button>
<button class="btn btn-link">button12</button>
<!-- 尺寸大小,下面是从大到小的尺寸-->
<button class="btn btn-info btn-lg">button4</button>
<button class="btn btn-info btn-sm">button5</button>
<button class="btn btn-info btn-xs">button6</button>
<!--激活状态-->
<button class="btn btn-info btn-block active">button7</button>
<!-- 按钮禁用状态-->
<button class="btn btn-info btn-block disabled">button8</button>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>