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種柵格：

1. 特小（col-xs-） 適配手機(<768px)
2. 小（col-sm-） 適配平板(≥768px)
3. 中（col-md-） 適配電腦(≥992px)
4. 大（col-lg-） 適配寬屏電腦(≥1200px)

Bootstrap4的5種柵格：

1. 特小（col-）(<576px)
2. 小（col-sm-）(≥576px)
3. 中（col-md-）(≥768px)
4. 大（col-lg-） (≥992px)
5. 特大（col-xl-）（≥1200px）

Bootstrap4特點

1. 新增網格層適配了移動端；
2. 全面引入ES6新特性（重寫所有JavaScript插件）；
3. css文件減少了至少40%；
4. 所有文檔都用Markdown編輯器重寫；
5. 放棄對IE8的支持