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