1. 介绍
Bootstrap是一个流行的HTML、CSS和JavaScript框架，它能快速助力开发人员构建美观、响应式和可靠的Web应用程序。Bootstrap由Twitter开发，并经过数年的演变。当前，Bootstrap的最新版本是Bootstrap 5。但在Bootstrap 5出现之前，Bootstrap 3和Bootstrap 4是最为广为使用的版本，这两个版本之间存在着一些重要的区别。
2. 栅格系统
2.1 栅格系统的变化
Bootstrap的栅格系统是Web开发者最常用的功能之一。Bootstrap 3使用的栅格系统基于12个列，其中每列的宽度为相同的尺寸。但是，Bootstrap 4修复了Bootstrap 3的一些问题，并添加了五个不同大小的网格，分别是extrasmall、small、medium、large和extra large。
<div class="col-sm-4 col-md-3 col-lg-2 col-xl-1"> ... </div>在上述示例代码中，我们可以看到Bootstrap 4新的栅格系统可以同时定义多个列的大小，我们可以为不同的视口大小指定不同的列宽度。
2.2 偏移和填充的变化
除了栅格系统本身的变化之外，Bootstrap 4还对偏移和填充进行了处理。Bootstrap 3使用的是.col- ** -offset- **格式，而Bootstrap 4使用的是.offset- ** - **格式。Bootstrap 3中的内边距相关样式使用的是.padding- ** - ** ，而Bootstrap 4的填充变成了py- ** 和px- **的形式。
3. 响应类型
3.1 断点名称的变化
Bootstrap 3中有四个响应级别，分别是xs、sm、md和lg，其中xs是最小的级别，lg是最大的级别。然而，在Bootstrap 4中，这些级别被重命名为极小的级别为xs、小的级别为sm、中的级别为md和大的级别为lg。此外，Bootstrap 4还添加了一个全新的级别，称为xl。
<div class="col-sm-4 col-md-3 col-lg-2 col-xl-1"> ... </div>在上述示例代码中，我们可以看到Bootstrap 4中新的响应类型可以为不同的视口大小定义不同的列尺寸。
3.2 被移除的类
在Bootstrap 4中，.panel类被移除了，取而代之的是.card类。此外，Bootstrap 4还删除了.glyphicon类并将其替换为.icon类和SVG图标。
4. 表单
4.1 标题的变化
Bootstrap 3中，表单标题使用的是<legend>标签，然而，在Bootstrap 4中，表单标题改用<h>标签表示。
4.2 字段的变化
在Bootstrap 4中，表单字段标签通过一个新的外部类.form-control来定义。
<input type="text "class="form-control">上述示例代码中，表单字段使用的是Bootstrap 4中新的样式。
5. 结论
总的来说，Bootstrap 4是Bootstrap 3的更新版本，引入了一些新的功能和更改。Bootstrap 4引入了响应类型的改进，使用新的栅格系统通过为列指定多个宽度。此外，Bootstrap 4还对填充和偏移进行了一些调整，并且它消除了. panel类和.glyphicon类，使SVG图标变得更加流行。表单标题与Bootstrap 3不同，表单字段标记现在使用.form-control样式类。不管你使用的是哪个版本，Bootstrap是一个优秀的开源工具，可以帮助你构建优秀的Web应用程序。