使用步驟
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這個區(qū)間給個盒子占4份 所以就是col-lg-4
md代表在768-992這個區(qū)間給個盒子占6份 所以就是col-md-6
sm代表在768-576這個區(qū)間給個盒子占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
