Bootstrap3 和 Bootrap4的区别

Bootstrap3 和 Bootrap4都试试用来做响应式布局的他们会有区别呢？
bootstrap3
bootstrap4
这是bootstrap3 和 bootstrap4的官网可以去看看。

一.栅格类：
说起 Bootstrap，栅格系统一定不能少，bootstrap3 和 boostrap4的栅格类有了一点区别

bootstrap3四种栅格：

1. col-xs- 超小屏幕（手机） <768px
2. col-sm- 小屏幕 （平板） ≥768px
3. col-md- 中等屏幕 （电脑） ≥992pxs
4. col-lg- 大屏幕 （大屏） ≥1200px

bootstrap4五种栅格

1. col-xs- 超小屏幕 分辨率 <576px
2. col-sm- 小屏幕 分辨率 ≥576px
3. col-md- 中等屏幕 ≥786px
4. col-lg- 大屏幕 ≥992px
5. col-xl- 超大屏幕 ≥1200px

bootstrap4的栅格对屏幕划分更详细了。

二.列偏移方法不同
bootstrap3 用push和 pull 来调整左右的位置偏移
bootstrap4 用offset-* 来移动，像右移动多少个

三. 编写语言不同
bootstrap3 采用Less编写
bootstrap4 采用 Sass编写

四.布局方式不同
bootstrap3 使用float布局
bootstrap4 使用flex弹性布局

四.单位使用不同
bootstrap3 以px为单位
bootstrap4 全部用rem为单位,除了部分的margin和padding使用px

五.隐藏和显示不同
bootstrap3 用 hidden- 来隐藏 visible- 来显示
bootstrap4 用 d-*-none 来影藏 d-block 来显示
还有一点 bootstrap3的 hidden-md 只会在平等屏幕时隐藏其他屏幕会显示，bootstrap4的d-md-none
会在中等屏幕以上也隐藏。

六.img类改变
bootstrap3 的img-circle只 对图片
boostrap4 的roundde-circle对所有元素全部生效

bootstrap4 不在支持IE8和IOS6。
css文件也减少了40%

这些都是一些比较显著的区别，在boostrsp4 ——版本迁移 里面都有详细说明。

至于说哪个好呢，看个人情况吧，不能说升级改进之后就是最好的。