前端之Bootstrap框架
别人已经提前写好了一大堆css和js，我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能。
Bootstrap下载
点击下载Bootstrap进入下方页面
这里我们下载v3的版本，如果需要使用别的版本，在上方更换即可。
文件结构
bootstrap.css
bootstrap.js
ps:如果我们想要在js中使用Bootstrap是需要依赖于jQuery的
CDN的导入
网址：https://www.bootcdn.cn/twitter-bootstrap/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" > <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
pycharm自动提示问题
一些老版本的pycharm在第一次使用Bootstrap的时候，pycharm对Bootstrap不熟悉，是不知道Bootstrap中的哪些关键字的，在编写代码的时候就不会出现自动提示。
解决方法就是先在pycharm中导入本地文件，然后引入一下bootstrap的样式，之后在使用的时候就会出现自动提示了。
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css"> <script src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
我们在使用Bootstrap的时候其实就是给需要添加样式的标签添加class类，添加了对应的类，就可以产生对应的美化效果。
官网教学文档：https://v3.bootcss.com/css/#forms-horizontal
其他文档也在官网
布局容器
class = "container"
// 网页两侧有留白
class = "container-fluid"
// 网页两侧没有留白
栅格系统
class = "row" // 一行最多12份（或是把所占空间分成十二份）
<div class="container">
<div class="row">
<div class="col-md-6 c1"></div>
<div class="col-md-6 c1"></div>
</div>
</div>
// 把一行进行均分（各6份）
屏幕参数
针对不同的屏幕尺寸，可以设置不同的划分方式，也叫响应式布局
col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
col-md-offset-3
// 右移三个栅格空间
<table class="table table-hover table-striped"> 颜色 <tr class="success">
2.表单标签
class = "form-control"
3.按钮组
class = "btn btn-primary btn-block"
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
如果想要获取更多的图标可以从下方的网站获取https://fontawesome.com.cn/
2. 导航条
class="navbar navbar-inverse"
3.其他
