青衣 发表于 2021-7-30 18:22:00

bootstrap4的出现(或这篇文章可以叫做bs4与bs3的区别)

前言:在bootstrap4出现之后修改了bootstrap3的不方便之处,让使用框架的前端开发者更加便捷.。(bootstrap下文中简称为bs)
一.栅格系统
相对于原来的bs3,bs4具有了范围更大的适应区间.在过去的bs3中的xs sm md lg 中,bs4又增加了一个xl这个区间,为超大屏幕做出了适应。
超小
<576px小
≥576px中等
≥768px大
≥992px超大
≥1200px最大容器宽度无(自动)540px720像素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- 而是 offset-[尺寸]-
外边距 : 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 - []   对应bs3label


文档来源:51CTO技术博客https://blog.51cto.com/u_15316096/3209788
页: [1]
查看完整版本: bootstrap4的出现(或这篇文章可以叫做bs4与bs3的区别)