使用步骤
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
意思就是每行分成12份，每个占4份，又将第一个盒子分为了12份，每个又占了6份
还可以使用一些弹性盒的属性
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
