一、安装
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrapt</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css">
</head>
<body>
<!-- 常规写法 -->
<input type="button" value="按钮测试">
<br>
<br>
<input type="button" value="按键测试" class="btn btn-dafault">
</body>
</html>
二、Bootstrapt的基本用法
Bootstrap 的样式在线展示 ： https://www.runoob.com/try/try.php?filename=trybs_default1
Bootstrap3 官方文档 ： https://v3.bootcss.com/css/#type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap的基本用法</title>
<script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./js/bootstrap.min.css">
</head>
<body>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<!-- <hr> -->
<br>
<br><br><br>
<table class="table table-striped table-bordere ">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<th>1</th>
<th>张三</th>
<th>21</th>
<th>河北保定</th>
</tr>
<tr>
<th>2</th>
<th>王龙</th>
<th>54</th>
<th>大兴</th>
</tr>
<tr>
<th>3</th>
<th>王小波</th>
<th>34</th>
<th>北京</th>
</tr>
<tr>
<th>3</th>
<th>王波</th>
<th>34</th>
<th>北京</th>
</tr>
</table>
</body>
</html>