bootstrap4

臨時接手個bootstrap4的項目 ，做下筆記

一.柵格系統

相對於原來的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