浅谈Bootstrap3和Bootstrap4的差异

1. Bootstrap简介

Bootstrap是一个流行的前端开发框架，最初是由Twitter推出的，旨在为Web应用程序提供一致的UI组件和工具。Bootstrap为设计师和开发人员提供了快速开发网站和Web应用程序的工具。

1.1 Bootstrap3和Bootstrap4的区别

Bootstrap4是Bootstrap3的更新版本，它包括所有新的特性和组件，并优化了旧组件的功能。以下是Bootstrap3和Bootstrap4之间的一些主要区别：

Bootstrap4不支持IE8和IE9，而Bootstrap3支持这些版本的浏览器。

Bootstrap4采用Flexbox作为其默认布局模型，而Bootstrap3使用的是float。

Bootstrap4引入了全新的类名，以更清晰地定义特定的规则。

Bootstrap4的表格类名已更改，更符合语义，为表格相关的元素和行添加了类名。

Bootstrap4的响应式断点已更新，并通过添加新的断点来更好地适应移动设备。

Bootstrap4没有Glyphicons字体库，而是提供了一组新的图标。

2. Bootstrap3和Bootstrap4的CSS和组件差异

2.1 布局

在Bootstrap3中，.container类用于定义一个固定宽度的容器，并将其居中。而在Bootstrap4中，.container类已被重命名为.container-fluid，并且新添加了.container类，用于定义一个自适应宽度的容器。

此外，在Bootstrap4中，使用Flexbox作为默认布局模型可以创建更灵活的布局。以下是一个通过Flexbox创建的简单布局代码：

<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

2.2 色彩类和工具

Bootstrap4提供了大量的颜色类，使开发人员可以更轻松地定义自定义颜色。在Bootstrap4中，颜色类以.bg-和.text-为前缀。例如，以下代码将元素背景设置为蓝色：

<div class="bg-primary">Background Blue</div>

Bootstrap4还引入了一些新的CSS辅助工具，包括重新设置轮廓、text-wrap和text-truncate。

2.3 图像

Bootstrap4包含用于处理图像的新类。其中一个新类是.img-fluid，它可以使一个图像响应式，并填充其父级容器的宽度。

<img src="image.jpg" class="img-fluid" alt="Responsive image">

2.4 Modal 功能

在Bootstrap4中，modal的构建方式与Bootstrap3有所不同。在3中，我们使用.modal，.modal-header，.modal-body，.modal-footer等组件来构建模态。但在Bootstrap4中，我们可以使用.modal-dialog，.modal-content，.modal-header，.modal-body，.modal-footer等组件创建模态。

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">Modal content</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

3. 总结

在Bootstrap4中引入了许多新的特性和组件，普及和使用广泛。如果您正在学习Bootstrap或正在升级到Bootstrap4，那么这些差异可能会对您的开发过程产生影响。

通过学习其新的CSS规则和组件，您可以更容易地开发响应式站点并更好地控制其外观和行为。