Bootstrap 3和Bootstrap 4之间的区别

Bootstrap是极受欢迎的前端框架之一，它涉及的领域包括页面布局、表单、按钮、导航、车轮、提示、模态框等等。目前，Bootstrap已经更新了第四个版本，本文主要介绍 Bootstrap 3和Bootstrap 4之间的区别。

总体改进和更新

• Bootstrap 4引入了flexbox布局。 Flexbox是一种响应式的网格系统，使得开发者可以轻松地创建更加灵活和灵活的布局。
• Bootstrap 4具有更好的浏览器兼容性。 Bootstrap 4抛弃了Internet Explorer 8及以下版本的兼容性，因此，更多的新特性可以在更多的现代浏览器中使用。
• 新增了更多的CSS变量。 开发人员现在可以利用CSS变量自定义各种样式。
• JavaScript插件现在可以被单独导入。 Bootstrap 3将所有的JavaScript插件打包在一起，但在Bootstrap 4中，开发人员可以根据自己的需求单独导入所需的插件。

栅格系统

网格系统在 Bootstrap 中是非常重要的，它用于在提供响应式布局时进行元素对其和清晰的过程。Bootstrap 4在栅格系统方面有以下改进:

• Bootstrap 4的网格系统是基于flexbox的。
• 增加了新的屏幕宽度阈值。 为了适应移动设备的屏幕大小，Bootstrap 4增加了两个新的媒体查询范围：576px和1200px。
• 容器现在默认是“满宽度”。 Bootstrap 3的容器有固定的宽度，而在Bootstrap 4中，容器默认设置为100%的宽度。

Typography

Bootstrap4在Typography方面有以下改进：

• Bootstrap 4默认字体现在是rem单位。 在Bootstrap 3中，字体大小使用的是像素单位，但在Bootstrap 4中，字体大小使用的是rem单位，这使得元素更具有可伸缩性。
• Bootstrap 4中增加了一个新的display属性类。 display属性类用于更改元素的dispaly属性，如：'d-none'类可以隐藏元素。

表单组件与控件

Bootstrap4 在表单组件和控件方面有以下改进：

• Bootstrap 4增加了新的表单控件，如：switches和ranges。
• 在 Bootstrap 4中，表单控件库被重新设计。 控件外观得到改进，并与之前的版本不同，改为使用自定义CSS而非JS来编辑样式。

模态框

Bootstrap 4中的模态框也有改进，如下：

• Bootstrap 4引入了新的'xl'宽度选项。 这使得开发人员可以创建较大的模态框，这在Bootstrap 3中不太容易实现。
• Bootstrap 4中的模态框使用的是flexbox。 这提供了更加灵活的布局机会并易于居中元素。

以上便是Bootstrap 3和Bootstrap 4之间的区别，需要注意的是，如果在开发和设计过程中使用Bootstrap，请考虑您的项目需要/目标和预期的浏览器支持情况。