使用步骤

1.打开HTML引入jQuery
2.引入bootstrap.css
3.引入bootstrap.js

image.png

新版介绍

早一些版本的bootstrap使用的是浮动，而新版本用的是弹性盒。
早版本浮动是如果子级盒子宽度超过父级盒子宽度会被挤下来，而弹性盒是平分父级剩余空间。
早版本的媒体查询只有屏幕分辩只有四个值，新版本多了一个<=576px。

image.png

使用方法

新版分为xl lg md sm
新版还是一样将盒子分为12份，row代表行，col代表列
xl代表大于等于1200时每个盒子占3份 所以就是col-xl-3
lg代表在992-1200这个区间给个盒子占4份 所以就是col-lg-4
md代表在768-992这个区间给个盒子占6份 所以就是col-md-6
sm代表在768-576这个区间给个盒子占12份 所以就是col-sm-12
剩下就是576以下的也是占12份

image.png

image.png

还可以使用一些弹性盒的属性

align-items-center 让元素y轴居中

image.png

image.png

align-items-start 让元素y轴靠上排列

image.png

align-items-end 让元素y轴靠下排列

image.png

justify-content-around 元素在x轴上平分父级剩余空间

image.png

justify-content-between 元素在x轴上两边靠边排列

image.png

justify-content-start 元素在x轴上靠前排列

image.png

justify-content-end 元素在x轴上靠后排列

image.png

justify-content-center 元素在x轴上居中

image.png

以上全部都是给父元素row（行）所加