Bootstrap 3 与 Bootstrap 4 – 概述
已发表: 2017-10-06Bootstrap 一直是最受信任的开源前端框架，用于开发响应式、移动优先的网站。 Bootstrap是一个著名的框架，为什么？？？ 因为它所需要的只是 HTML 和 CSS 的基本知识，我们可以通过使用预定义的引导类来构建一个有吸引力且功能强大的网站，这些引导类负责不同设备上的响应。
Bootstrap 3 于 2013 年发布，最后一个稳定版本 Bootstrap 3.3.7 于 2016 年 7 月发布。2014 年 10 月，Twitter 宣布 Bootstrap 4 正在开发中。 Bootstrap 4 的第一个 alpha 版本于 2015 年 8 月发布。现在在 2017 年 8 月，Bootstrap 4.0.0-beta 版本发布。 如果您想从 0 开始学习，可以查看这个深入的 Bootstrap 教程。
这篇文章的重点将是从版本 3 到新发布的版本 4.0.0-beta 的关键差异、添加和减少。
第 4 版有什么不同：
现在我们可以开始讨论 Bootstrap 4 的新功能了。随着技术的快速发展，更新和更智能的语言被开发出来，以使构建干净、快速的网站变得更加简单。 最新版本的 Bootstrap 就是这种情况。 该团队表示，这个“版本 4 是对几乎整个项目的重大改写”。 我们将总结此改进的一些关键变化。
全球变化：
- 将源 CSS 文件从Less切换到Sass 。
- 从
pxrem作为 Bootstrap 的主要 CSS 单元切换，尽管像素仍用于媒体查询和网格行为，因为设备视口不受类型大小的影响。 - 全局字体大小从14px增加到16px 。
- 为 ~480px 及以下添加了一个新的网格层。
网格系统：
Bootstrap 4 改进的主要步骤是采用 Flexbox。 作为 flexbox 的一部分，包括对垂直和水平对齐类的支持。 Bootstrap 4 非常重视定制。 它的新网格层系统让 Bootstrap 4 享受多达 5 个网格层的存在（5 层的示例：.col-4、.col-sm-4、.col-md-4、.col-lg-4、 .col-xl-4 ）。 可以轻松地说，Bootstrap 4 提供了对改进的网格系统的访问。
- 在 768px 以下添加了一个新的 sm 网格层，以实现更精细的控制。 现在有 xs、sm、md、lg 和 xl。 这也意味着每一层都提升了一个级别（因此 v3 中的 .col-md-6 现在是 v4 中的 .col-lg-6）。
- 更改了网格系统媒体查询断点和容器宽度以考虑新的网格层并确保列在其最大宽度处可被 12 整除。
- 网格断点和容器宽度现在通过 Sass 映射（$grid-breakpoints 和 $container-max-widths）而不是少数单独的变量来处理。 这些完全替换了 @screen-* 变量，并允许您完全自定义网格层。
- 媒体查询也发生了变化。 而不是每次都使用相同的值重复媒体查询声明，现在有@include media-breakpoint-up/down/only。 现在，不用写@media (min-width: @screen-sm-min) { ... }，您可以写成@include media-breakpoint-up(sm) { ... }。
浏览器支持：
- 放弃 IE8 和 iOS 6 支持。 v4 现在只有 IE9+ 和 iOS 7+。 对于需要其中任何一个的站点，请使用 v3。
实用程序类：
在 Bootstrap 4 中，包含了新的实用程序类，而不会妨碍任何现有功能。 这些重要的附加功能包括响应式文本对齐类、响应式浮动和响应式嵌入。 除了提供许多快捷方式外，它们还分别允许更改文本的对齐方式、元素的浮动以及任何嵌入式媒体的纵横比的缩放。 （例如： .hidden-md-up在中、大和超大视口上隐藏元素。现在，使用.d-md-none代替.hidden-md-up ）。
图片：
- 将
.img-responsive重命名为.img-fluid。 - 将
.img-rounded重命名为.rounded - 将
.img-circle重命名为.rounded-circle
表：
- 响应式表格不再需要包装元素。 简单来说，在Bootstrap 3 中，应该将
.table-responsive类添加到父 <div> 中。 但是在 Bootstrap 4 中，.table-responsive类添加到<table>元素中。 - 添加了一个新的
.table-inverse选项。 - 添加了表头修饰符：
.thead-default和。.thead-inverse - 将上下文类重命名为具有
.table-前缀。 因此，.active.success、.warning、.danger和.table-info到.table-active、.table-success、.table-warning、.table-danger和.table-info.
导航：
在 Bootstrap 4 中，Navigation 组件在很大程度上得到了简化。 需要使用最新的导航基类创建一个新的元素列表。 还有一些最近添加的内容，例如 nav-link 类、nav-item 类和导航栏样式。
- 用 flexbox 重写了组件。
-
.navbar-default现在是.navbar-light，但.navbar-dark保持不变。 但是，这些类不再设置background-color； 相反，它们基本上只影响color。 -
.navbar-toggle现在是.navbar-toggler并且具有不同的样式和内部标记（不再有三个<span>）。 - 完全删除了
.navbar-form类。 不再需要了； 相反，只需使用.form-inline并根据需要应用边距实用程序。 - 默认情况下，导航栏不再包含
margin-bottom或border-radius。
Bootstrap 第 3 版和第 4 版对比表
| 参数 | 引导程序 3 | 引导程序 4 |
| 源 CSS 文件 | 较少的 | SASS |
| 网格层 | 4网格层系统 | 5 gid 层系统 |
| 下拉结构 | 可以用 <ul> 和 <li> 创建 | 可以用 <ul> 或 <div> 创建 |
| 默认分页 | .pagination 需要添加到 <ul> 元素 | .page-item 必须添加到每个 <li> 元素和 .page-link 到每个 <a> 元素 |
| 响应式图像 | 应用 .img-responsive 类 | 应用 .img-fluid 类 |
| 响应表 | .table-responsive 类应该添加到父 <div> 元素 | .table-responsive 类被添加到 <table> 元素 |
| 导航栏对齐 | 使用 .navbar-right、.navbar-left 来对齐组件 | 使用间距实用程序，例如 .mr-auto，或 flexbox 对齐实用程序 |
| 字形 | 支持的 | 不支持 |
| 媒体对象 | 包括许多不同的媒体对象类，包括 .media、.media-body .media-object、.media-heading、.media-right、.media-left 以及 .media-list 和 .media-body。 | 仅使用 .media 类。 可以使用间隔实用程序应用边距。 媒体对象在 Bootstrap 4 中启用了 flexbox，因此也可以应用各种 flexbox 类（例如重新排序等）。 |
| 进度条 | 不使用进度条的进度。 相反，将进度条类应用于嵌套的 div 元素。 | 在 Alpha 6 中放弃使用 progress 元素。Bootstrap 4 现在再次使用 div 元素。 |
正如我们已经说过的，Bootstrap 团队已经重写了框架。 所以上面的改动只是我们在这里写的关键改动。 要深入阅读，请点击链接 Bootstrap 4。
我们应该迁移到 Bootstrap 4 还是继续使用 Bootstrap 3
我们已经讨论了 Bootstrap 4 提供的功能。 我们可以看到，在整个框架中，在优化和清理不必要的元素和类方面做了很多工作。 Bootstrap 4 承诺在创建出色的移动友好型网站时更快、更精简，从而提供更大的灵活性和易用性。
Bootstrap 4，移至 flexbox。 这可以被认为是最大和最重要的成就之一。 这将提供以下好处：
- 基于 Flexbox 的网格
- 新的 XLl 网格层
- 最新的自动布局网格
- 导航栏自定义选项
- 新的间距实用程序
- Sans Glyphicons 配置（无膨胀区）
- 响应式尺寸
- 响应浮动
- 自动边距
- 垂直居中
结论
Bootstrap 一直在简化开发人员的生活，并且通过版本的更新，现在 bootstrap 具有更多新功能和选项，可以让开发人员更轻松地做事，这就是人们从 Bootstrap 3 迁移到 Bootstrap 的原因4，因为它比以前的版本更方便和易于访问。