什么是BootStrap？：是一个别人写好的javascript和css的代码，如果在开发项目的时候省点事，就可以在它的基础上来修改使用
使用教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
下载：https://getbootstrap.net/
下载之后解压，解压之后可以随意打开一个文件，比如css文件，带min字样的是压缩版， 不带的是生产版， 他们之间的区别就是文件大小不同
然后将解压目录放到项目路径下， 任何路径都行
引入：
<!DOCTYPE html>
<html>
<head>
<title>初识：JavaScript</title>
<meta charset="UTF-8">
<!--css引入方法：引入min版本或非min版本都行-->
<link rel="stylesheet" href="../file/bootstrap-4.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!--js引入方法： 因为bootstrap 依赖于jquery， 所以需要提前引入jquery才能使用bootstrap-->
<script src="../file/jquery-3.7.1.min.js"></script>
<script src="../file/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
使用：在使用之前， 需要看一下官方文档
常见的BootStrap样式：
1. 容器：
1.1： class="container" 容器居中
1.2 ：class="container-fluid" 平铺， 就是不加任何样式
1.3：导航效果
2. 栅格：将页面分为12份。
BootStrap提供了一下4种栅格方式， 效果是一样的， 那为什么要4种呢？不同的栅格方式， 有不同的范围值，也就是当屏幕小于多少像素时， 栅格会重叠，相当于失效
lg：小于1200像素失效
<div class="col-sm-1"></div>
<div class="col-sm-3"></div>
md：小于960像素失效
<div class="col-md-1"></div>
<div class="col-md-3"></div>
sm：小于768像素失效
<div class="col-sm-1"></div>
<div class="col-sm-3"></div>
xs：根据屏幕自适应，永不失效
<div class="col-xs-1"></div>
<div class="col-xs-3"></div>
补充，占位：也叫列偏移，也就是可以实现左边占3份， 右边9份给我空着类似的效果
<div class="offset-md-9 col-md-3" style="background: yellow">div2</div>
3. 面板和应用
<body>
<div class="panel panel-default">
<div class="panel-heading">
不带 title 的面板标题
</div>
<div class="panel-body">
面板内容1
</div>
<div class="panel-body">
面板内容2
</div>
<div class="panel-body">
面板内容3
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
带有 title 的面板标题
</h3>
</div>
<div class="panel-body">
面板内容1
</div>
<div class="panel-body">
面板内容2
</div>
<div class="panel-body">
面板内容3
</div>
</div>
</body>
4. 表格和按钮
<body>
<table class="table table-hover">
<caption>悬停表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>小红</td>
<td>上海</td>
<td>
<!--btn-sm 是调节大小的作用-->
<a class="btn btn-warning btn-sm">删除</a>
<a class="btn btn-info btn-sm">修改</a>
</td>
</tr>
<tr>
<td>小明</td>
<td>深圳</td>
<td>
<a class="btn btn-warning btn-sm">删除</a>
<a class="btn btn-info btn-sm">修改</a>
</td>
</tr>
<tr>
<td>小兰</td>
<td>广西</td>
<td>
<a class="btn btn-warning btn-sm">删除</a>
<a class="btn btn-info btn-sm">修改</a>
</td>
</tr>
</tbody>
</table>
</body>
标签：解压,python,BootStrap,像素,栅格,016,失效,面板 From： https://www.cnblogs.com/FBGG/p/17964082