Bootstrap3和Bootstrap4区别
一、总结
一句话总结:
a、新增网格层适配了移动端;
b、全面引入ES6新特性(重写所有JavaScript插件);
c、css文件减少了至少40%;
d、所有文档都用Markdown编辑器重写;
1、初学者应该学bootstrap3还是学bootstrap4?
推荐bootstrap4,版本也稳定了,而且bootstrap4对移动端的支持更加好,而且新版本肯定有新版本的很多好处
二、Bootstrap3和Bootstrap4区别
转自或参考:Bootstrap3和Bootstrap4区别_JavaScript_miaomiao_1024的博客-CSDN博客
https://blog.csdn.net/miaomiao_1024/article/details/83418352
首先引入Bootstrap3和4官网连接; Bootstrap3 VS Bootstrap4.
不同点
Bootstrap3 | Bootstrap4 |
---|---|
Less | Sass语言编写 |
4种栅格类 | 5种栅格类 |
使用px为单位 | 使用rem和em为单位(除部分margin和padding使用px) |
使用push和pull向左右移动 | 偏移列通过offset-类设置 |
使用float的布局方式 | 选择弹性盒模型(flexbox) |
注:Bootstrap3的4种栅格:
- 特小(col-xs-) 适配手机(<768px)
- 小(col-sm-) 适配平板(≥768px)
- 中(col-md-) 适配电脑(≥992px)
- 大(col-lg-) 适配宽屏电脑(≥1200px)
Bootstrap4的5种栅格:
- 特小(col-)(<576px)
- 小(col-sm-)(≥576px)
- 中(col-md-)(≥768px)
- 大(col-lg-) (≥992px)
- 特大(col-xl-)(≥1200px)
Bootstrap4特点
- 新增网格层适配了移动端;
- 全面引入ES6新特性(重写所有JavaScript插件);
- css文件减少了至少40%;
- 所有文档都用Markdown编辑器重写;
- 放弃对IE8的支持