bootstrap基础

BootStrap实质上是别人的已经编辑好的CSS根文件,所以我们需要首先下载Bootstrap.使用的时候需要首先引入Bootstrap.
最好在pycharm的同HTML文件下的根目录下建立一个plugins文件夹，再把bootstrap文件夹拖动到plugins文件夹下
bootstrap网站https://v3.bootcss.com/
然后在head中
<link rel="stylesheet" href="plugins/bootstrap-3.4.1/css/bootstrap.css">
再在HTML中使用bootstrap的时候就可以直接class=""
例如,写入一个button
<input typr="button" value="123" class="btn btn-primary">
这个时候就是调用了bootsrap中的button的css

提示:
    <link rel="stylesheet" href="plugins/bootstrap-3.4.1/css/bootstrap.css"><!--这个是开发者css,文件包比较大-->
    <link rel="stylesheet" href="plugins/bootstrap-3.4.1/css/bootstrap.min.css"><!--这个是实际运行使用的css封装包,体量比较小适合节省运存-->

可以使用bootstrap的已经写好的css文件,例如导航栏
首先找到全局CSS样式,然后找到导航栏,寻找合适的喜欢的样式,然后在运行link bootsrtrap的前提下复制到HTML中,reform重构
假设导入的导航栏是圆角导航栏,可以在head中输入border-radius="0"

栅格
<div class="col-xs-?"></div>
其中的?代表数字,几个数字代表占据多宽,栅格就是将一行分为十二格,输入多少数字就代表占据了多少格子.
栅格分类
响应式:col-lg-? ; col-sm-? ; col-md-?
非响应式:col-xs-?
响应式就是栅格会随着页面的缩放而改变,不管缩放大小是多少,栅格永远是按照页面进行等比缩放
非响应式是不会随着页面缩放而改变,如果网页缩放,栅格可能会被遮盖住.
响应式类之间的支持的最小缩放是有差距的:lg最大,为1170px;md,970px;sm,750px;
即如果是col-lg,只有大于1170px的时候才能生效,如果小于1170px,原本的一行的栅格就会变成两行;同理md只有大于970px才能生效,如果小于970px则处于同一行的栅格就会被挤压为两行.

栅格默认是占据最左边的位置,如果需要让栅格向右平移的话,可以写
<div style="col-sm-offset-2 col-sm-6"></div>
这个的意思就是向右挤压了两个栅格,将sm-6的栅格向右平移了两个格子.
sm也可以改为其它类型的栅格,md,lg都可以.

如果需要在class里面清除float效果,可以在class里加入 clearfix
bootstrap中可以直接调用写好的页面平铺class,为container,如果需要减少两边空白区域可以选择container-fluid,为加入padding外边框来实现两边缩小空白,这两个居中都是使用的margin-auto来实现的,自己写也可以
 

使用图表可以在fontawesome上找,同样是使用link使用fontawesome的css然后倒入到html中

如果想要在HTML中应用可以使用动态效果的bootstrap,可以调用jQuery.jQuery实质上是一个JavaScript的类库,里面包含了可以被调用的css封装包.
注:现在的bootstrap已经可以不依赖jQuery来实现交互式反应标签了,即不调用jQuery的CSS也可以实现交互.
首先下载一个jQuery,然后<script src="jQuery的下载地址/.min.js "></script>
然后再调用bootstrap的js
<script src="Bootstrap的地址/js/bootstrap.js"></script>
注:一定要先调用jQuery的类库,然后再调用bootstrap的js类库.