前言:在bootstrap4出現之后修改了bootstrap3的不方便之處,讓使用框架的前端開發者更加便捷.。(bootstrap下文中簡稱為bs)
一.柵格系統
相對於原來的bs3,bs4具有了范圍更大的適應區間.在過去的bs3中的xs sm md lg 中,bs4又增加了一個xl這個區間,為超大屏幕做出了適應。
超小 <576px |
小 ≥576px |
中等 ≥768px |
大 ≥992px |
超大 ≥1200px |
|
---|---|---|---|---|---|
最大容器寬度 | 無(自動) | 540px | 720像素 | 960像素 | 1140px |
類前綴 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
列數 | 12 | ||||
天溝寬度 | 30px(每列15px) | ||||
嵌套 | 是 | ||||
列排序 | 是 |
原來的版本中 全部都是使用了float布局,在新版本中使用了flex布局
而且在新版本中柵格系統col不用添加指定的列數 比如一個row里有2個col 自動分為-6 -6
如果其中三個col 中有個指定了它的列數 而其他兩個沒有 那就是 (12-x/)2
二.img-circle與新版本中的rounded-circle
老版本中img-circle只對圖片 而新版本中rounded-circle對所有元素全部生效,至於好不好用了才知道。
三.媒體對象
去除了media-left media-right 只有media-body 在其中會自適應 在body前寫一個圖片即使left,在body之后便是right
四.display系列 / 偏移 / 外邊距 / 內邊距
偏移 不再使用 col-[尺寸]-offset-[x] 而是 offset-[尺寸]-[x]
外邊距 : ml 左外邊距 mr 右外 ,mt 上外 , mb 下外 mx-水平方向 my- 垂直方向
ml-1
內邊距 : pl,pr,pt,pb, px ,py
五.顏色
primary secondary info success warning danger light dark
bg- [顏色]
text -[顏色]
btn -[]
badge - [] 對應 bs3 label