• 技术文章 >web前端 >Bootstrap教程

    bootstrap3和bootstrap4的区别

    爱喝马黛茶的安东尼爱喝马黛茶的安东尼2019-07-17 16:52:43原创3001

    前言:在bootstrap4出现之后修改了bootstrap3的不方便之处,让使用框架的前端开发者更加便捷。(bootstrap下文中简称为bs)

    一.栅格系统

    相对于原来的bs3,bs4具有了范围更大的适应区间。在过去的bs3中的xs sm md lg 中,bs4又增加了一个xl这个区间,为超大屏幕做出了适应。  

    1563352852714807.png

    原来的版本中全部都是使用了float布局,在新版本中使用了flex布局。而且在新版本中栅格系统col不用添加指定的列数。比如一个row里有2个col,自动分为-6,-6。如果其中三个col中有个指定了它的列数,而其他两个没有,那就是(12-x/)2。

    二.img-circle与新版本中的rounded-circle

    老版本中img-circle只对图片生效而新版本中rounded-circle对所有元素全部生效,至于好不好用了才知道。

    相关推荐:《bootstrap入门教程

    三.媒体对象

    去除了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

    以上就是bootstrap3和bootstrap4的区别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:bootstrap4如何设置图像形状 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • bootstrap如何给div设置边框颜色• 如何使用bootstrap快速实现登录页面• 如何用bootstrap定义上弹菜单• bootstrap4如何设置表格
    1/1

    PHP中文网