Bootstrap迁移到v4版本

Bootstrap是一个流行的前端框架，它提供了许多有用的工具和组件来帮助开发人员快速构建响应式网站。然而，随着时间的推移，Bootstrap的版本不断更新，旧版本可能会不再得到支持或存在一些已知的问题。本教程将介绍如何把BootStrap迁移到v4版本。

一、稳定变化

从Bootstrap 3发展到稳定的v4.0版本，没有发生重大变化，但有一些显着的变化。

1、打印

• 修复了损坏的打印工具以前，使用 .d-print-* 的class会意外地影响任何其他的 .d-* 的class. 现在，它们与Bootstrap的其他显示实用程序相匹配，仅适用于该媒体 (@media print)；
• 扩展可用的打印显示实用程序以匹配其他实用程序 迁移到BootStrap 3和更早版本只有 block, inline-block, inline, 和 none。 稳定的v4增加了 flex, inline-flex, table, table-row, 和 table-cell；
• 使用指定 @page size的新打印样式修复了浏览器中的打印预览呈现。

二、Bootstrap 3变化

虽然Bootstrap 2在测试阶段看到了大部分突破性变化，但仍然有一些需要在Bootstrap 3版本中解决的问题。 如果从Bootstrap 2更新到Bootstrap 3或更新版本的Bootstrap，则适用这些更改。

1、其他

• 删除了未使用的 $thumbnail-transition 变量。 没有转换任何东西，所以它只是额外的代码；
• npm软件包不再包含除源文件和dist文件以外的任何文件; 如果依赖它们并通过 node_modules 文件夹运行脚本，则应该调整工作流程。

2、形式

• 重写了自定义和默认复选框和音频。 现在，两者都具有匹配的HTML结构 (外部 <div> 与兄弟 <input> 和 <label>) 以及相同的布局样式（堆叠默认，内联修饰符类）。 这允许根据输入的状态来设置标签的样式，简化对 disabled 属性的支持（以前需要父类），并更好地支持表单验证；
• 作为其中的一部分，更改了用于管理自定义表单复选框和音频上的多个 background-image的CSS。以前, 现在移除的 .custom-control-indicator 元素具有背景颜色， 渐变和SVG图标。 定制背景渐变意味着每次只需要更换一个就可以替换所有这些。 现在有 .custom-control-label::before 用于填充和渐变，并且..custom-control-label::after 处理图标。要进行内联自定义检查，请添加.custom-control-inline。
• 更新了基于输入的按钮组的选择器。 样式和行为不是[data-toggle=”buttons”] { }只使用JS属性的 data 属性， 并依赖一个新的 .btn-group-toggle 的class进行样式设计；
• 删除 .col-form-legend，稍微改进.col-form-label。这样 .col-form-label-sm 和 .col-form-label-lg 可以轻松地用于 <legend> 元素；
• 自定义文件输入接收到对其 $custom-file-text Sass 变量的更改。 它不再是一个嵌套的Sass地图， 现在只支持一个字符串 -Browse 按钮，因为这是现在从Sass生成的唯一的伪元素。 选择 Choose file 文本现在来自 .custom-file-label。

3、输入组

• 输入组插件现在特定于它们相对于输入的位置。 Bootstrap已经为两个新类，即.input-group-addon 和 .input-group-btn 删除了， .input-group-prepend 和 .input-group-append。 现在必须明确地使用append或prepend， 这简化了Bootstrap大部分CSS。在append或prepend中，将按钮放置在任何其他地方，但将文本包装在.input-group-text；
• 现在支持验证样式，如多个输入（虽然只能验证每个组的一个输入）；
• 调整大小的类必须位于父代 .input-group 中， 而不是单个的表单元素。

三、Bootstrap 2变化

而在测试版中，Bootstrap的目标是没有突破性的变化。然而，事情并不总是按计划进行。下面是从Bootstrap 1到Bootstrap 2时要牢记的突破性变化。

1、突破

• 删除了 $badge-color 变量及其在.badge上的用法。使用color 对比功能根据 background-color选择颜色, 因此变量是不必要的；
• 将 grayscale() 函数重命名为 gray() 以避免与CSS原生 .grayscale 发生冲突；
• 将 .table-inverse， .thead-inverse， 和 .thead-default 重命名为 .*-dark 和 .*-light， 与其他地方使用的颜色方案相匹配；
• 响应表现在为每个网格断点生成类。 这从Bootstrap 1开始，因为你一直使用的 .table-responsive 更像 .table-responsive-md。 现在可以根据需要使用.table-responsive 或 .table-responsive-{sm,md,lg,xl} 自由选择；
• 由于软件包管理器已被弃用以替代（例如Yarn或npm），因此丢弃了Bower支持；
• Bootstrap仍然需要jQuery 1.9.1或更高版本，但建议使用3.x版本，因为v3.x支持的浏览器是Bootstrap支持的浏览器，而v3.x具有一些安全修复程序；
• 删除了未使用的 .form-control-label 的class。 如果确实使用了这个class, 那么它就是.col-form-label class的副本，它将垂直居中放置在水平表单布局中的相关输入 <label> ；
• 将 color-yiq 从包含 color 属性的mixin更改为返回值的函数, 从而允许将它用于任何CSS属性。例如，可以使用color-yiq(#000);而不是 color: color-yiq(#000);。

2、强调

• 在模态声明 pointer-events 用法。 外部的 .modal-dialog 对话框通过带有指针事件的事件 pointer-events: none 用于自定义点击处理 (使得可以在任何点击的 .modal-backdrop 上监听)， 然后使用指针抵消实际的 .modal-content 同 pointer-events: auto。

四、总结

以下是从v3移至v4时需要注意的关键要点。

1、浏览器支持

• 放弃IE8，IE9和iOS 6的支持。 v4现在只有IE10 +和iOS 7+。 对于需要其中任何一个的网站，请使用v3；
• 增加了对Android v5.0 Lollipop的浏览器和WebView的官方支持。 Android浏览器和WebView的早期版本仅保留非正式支持。

2、全局变化

• Flexbox默认启用。 一般来说，这意味着要从浮筒和更多的组件上移开；
• Bootstrap的源CSS文件从Less 切换到 Sass ；
• 从px 切换到 rem 作为主要CSS单元， 但像素仍然用于媒体查询和网格行为，因为设备视口不受字体大小的影响；
• 全局字体大小从14px 增加到 16px；
• 修改网格层以添加第五个选项 (解决576px 及更低的较小设备)， 并从这些类中移除 -xs 中缀。例如：.col-6.col-sm-4.col-md-3；
• 用可配置选项通过SCSS变量替换单独的可选主题（例如，$enable-gradients: true)；
• 修改系统以使用一系列npm脚本代替Grunt。 查看所有脚本的 package.json，或者项目自述文件以了解本地开发需求；
• 不再支持Bootstrap的无响应使用；
• 放弃了在线Customizer，转而使用更广泛的安装文档和定制版本；
• 为常见的CSS属性 – 值对和边距/填充间距快捷方式添加了许多新的实用程序类。

3、栅格系统

移至flexbox：

• 增加了对网格mixins和预定义类中的flexbox的支持；
• 作为flexbox的一部分，包括对垂直和水平对齐类的支持。

更新了网格类名称和新的网格层：

• 在768px以下添加了一个新的sm 用于更精细的控制。 现在有 xs, sm, md, lg, 和 xl。 这也意味着每一层都被提升了一个层次 (所以v3中的 .col-md-6 现在是v4中的 .col-lg-6)；
• xs 网格类已被修改为不需要中缀来更准确地表示他们开始 min-width: 0 而不是设置像素值。 而不是.col-xs-6, 它现在是 .col-6。 所有其他网格层都需要中缀 (例如: sm)。

更新了网格大小，混合和变量：

• 网格间距现在有一个Sass地图，因此可以在每个断点处指定特定的间距宽度；
• 更新的网格混合使用 make-col-ready 混合 make-col 设置 flex 和 max-width 来设置单个列大小的弯曲和最大宽度；
• 将网格系统媒体查询断点和容器宽度更改为新的网格层，并确保列在其最大宽度处可以被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) { … }。

4、组件

（1）放置面板，缩略图 用于新的全面组件——卡片；

（2）丢弃了Glyphicons图标字体。 如果你需要图标，一些选项是：

• Glyphicons及以上的版本；
• Octicons；
• Font Awesome。

（3）删除了Affix jQuery插件。

建议使用 position: sticky 代替。有关详细信息和特定的polyfill建议，请参阅 HTML5请参阅条目。 一个建议是使用@supports 规则来实现它 (例如， @supports (position: sticky) { … })/
如果使用Affix来应用其他非位置样式， non-position 样式， 那么polyfills可能不支持用例。 这种用途的一个选择是第三方 ScrollPos-Styler 库。

（4）丢弃了pager 组件， 因为它本质上是微小定制的按钮；

（5）重构几乎所有的组件 以使用更多的非嵌套类选择器而不是超特定的子选择器。

五、按钮组

此列表突出显示了v3.x.x和v4.0.0之间组件的关键更改。

1、重构

Bootstrap 4的新功能是重构, 这是一种新的样式表，它基于自己的一些自定义的重置样式进行规范化。 出现在这个文件中的选择器只使用元素 – 这里没有类。 这将重置样式与组件样式隔离开来， 以实现更模块化的方法 其中最重要的一些重置包括 box-sizing: border-box 的更改, 从许多元素上的 em 到 rem 单位, 以及许多表单元素重置。

2、排版

• 将所有 .text- utilities 移至 _utilities.scss 文件；
• Dropped .page-header 除了边框之外， 其所有样式都可以通过实用工具应用；
• .dl-horizontal 已被删除。 相反， 在<dl>上使用 .row， 并在其<dt> 和 <dd> 子级上使用网格列类（或mixins）；
• 自定义 <blockquote> 样式已移至 classes—.blockquote 和 .blockquote-reverse 修饰符；
• .list-inline 现在要求其子项列表项具有应用于它们的新的 .list-inline-item 类。

3、图片

• 修改 .img-responsive 为 .img-fluid
• 修改 .img-rounded 为 .rounded
• 修改 .img-circle 为 .rounded-circle

4、表格

• 几乎所有 > 选择器的实例都被删除， 这意味着css在会自动从父母继承样式。 这极大地简化了我们的选择器和潜在的定制；
• 响应表不再需要包装元素。 相反，只需将 .table-responsive 类放在 <table>上即可；
• 将 .table-condensed 重命名为 .table-sm 以保持一致性；
• 添加了一个新的 .table-inverse 属性；
• 增加了表头修饰符：.thead-default 和 .thead-inverse；
• 将上下文类重命名为具有 .table–前缀。 因此 .active, .success, .warning， .danger 和 .info 和 .table-success, .table-warning, .table-danger 和 .table-info转化为.table-active。

5、表单

（1）移动元素重置为_reboot.scss 文件；

（2）将 .control-label 重命名为 .col-form-label；

（3）将 .input-lg 和 .input-sm 重命名为 .form-control-lg 和 .form-control-sm；

（4）为了简单起见，丢弃了 .form-group-* 类。 现在使用 .form-control-* 类；

（5）删除 .help-block 并用 .form-text 替换为块级帮助文本。 对于内联帮助文本和其他灵活选项， 请使用实用程序类 ，如.text-muted；

（6）丢弃 .radio-inline 和 .checkbox-inline；

（7）将 .checkbox 和 .radio 合并为 .form-check 和各种 .form-check-* 类；

（8）水平形式修改：

• 放弃了 .form-horizontal 类的要求；
• .form-group 不再通过mixin从 .row 中应用样式， 所以 .row 现在需要用于水平网格布局 (例如， <div class=”form-group row”>)；
• 使用 .col-form-label 添加新的 .form-control类来垂直居中标注；
• 使用网格类为紧凑表单布局添加新的 .form-row (将 .row 替换为 .form-row 并继续使用)。
• 添加了自定义表单支持 (用于 复选框, 音频, 选择框, 和 选择文件 输入框)；
• 使用CSS的HTML5表单验证替换 .has-error, .has-warning, 和 .has-success 类 :invalid 和 :valid 伪类；
• 将 .form-control-static 重命名为 .form-control-plaintext。

6、按钮

• 将 .btn-default 重命名为 .btn-secondary；
• 放弃 .btn-xs 这个类， 因为 .btn-sm 的比例要比v3小得多；
• 将 stateful button button.js 插件的状态按钮功能删除。这包括$().button(string) 和 $().button(‘reset’) 方法。建议使用一小部分自定义JavaScript代替， 这样做的好处是可以按照希望的方式进行操作。请注意，插件的其他功能（按钮复选框，按钮收音频，单切换按钮）已保留在v4中；
• 将按钮 [disabled] 改为 :disabled 因为IE9 +支持 :disabled。 然而 fieldset[disabled] 仍然是必要的， 因为IE11中原生的禁用字段仍然是bug。

7、按钮组

• 用flexbox重写组件；
• 删除了 .btn-group-justified。 作为替换，你可以使用 <div class=”btn-group d-flex” role=”group”></div> 作为包含.w-100；
• 完全放弃了 .btn-group-xs 类， 并删除了 .btn-xs；
• 删除按钮工具栏中按钮组之间的显式间距; 现在使其它类；
• 改进了与其他组件一起使用的文档。

8、下拉菜单

• 从父选择器切换到所有组件，修饰符等的单数类；
• 简化的下拉样式不再随附在下拉菜单上的朝上或朝下箭头方向；
• 下拉菜单现在可以用 <div>s 或 <ul>建立；
• 重建下拉式样和标记，为基于 <a> 和 <button> 的下拉项目提供简单的内置支持；
• 将 .divider 重命名为 .dropdown-divider；
• 下拉项目现在需要 .dropdown-item中建立；
• 下拉式切换不再需要明确的 <span class=”caret”></span>; 这现在通过CSS ::after on .dropdown-toggle自动提供。

9、栅格系统

• 以 sm增加了一个新的 576px 网格断点， 这意味着现在有五个总层 (xs, sm, md, lg, 和 xl)；
• 更简单的网格类将 .col-{断点}-{修饰符}-{大小} 的响应网格修饰符类重命名为。 .{修饰符}-{断点}-{大小} ；
• 为新的弹性布局提供 order 类。例如，可以使用 .col-8.push-4 和 .col-4.pull-8, 而不是 .col-8.order-2 和 .col-4.order-1；
• 为网格系统和组件添加了flexbox实用程序类。

10、列表组

• 用flexbox重写组件；
• 用明确的类，a.list-group-item 替换 .list-group-item-action, 以便为列表组项的链接和按钮版本进行样式设置；
• 添加了 .list-group-flush 类以用于卡片。

11、资本

• 用flexbox重写组件；
• 鉴于移动到flexbox，标题中排除图标的对齐可能会被破坏，因为不再使用浮动。 浮动内容是第一位的，但对于不再是这种情况的Flexbox。 更新你的解雇图标来模式标题来解决；
• 选项 remote (可用于自动加载和注入外部内容到模式中) 和相应的 loaded.bs.modal 事件被删除。建议使用客户端模板或数据绑定框架， 或者自己调用 jQuery.load 。

12、导航

• 用flexbox重写组件；
• 通过非嵌套类删除几乎所有 > 选择器以实现更简单的样式；
• 对.nav, .nav-item, 和 .nav-link使用单独的类， 而不是像.nav > li > a这样的HTML特定选择器，这使得HTML更加灵活，同时增加了可扩展性。

13、导航栏

• 导航栏已经在flexbox中完全重写，改进了对齐，响应和定制支持；
• 响应式导航栏行为现在通过所需的.navbar-expand-{断点} 应用于.navbar 类， 可以在其中选择折叠导航栏的位置。 以前这是一个较少变量的修改重新编译；
• .navbar-default 现在是 .navbar-light， 但 .navbar-dark 保持不变。 其中一个是每个导航栏上都需要的。 但是，这些类不再设置 background-color； 相反，它们基本上只影响 color；
• Navbar现在需要某种背景声明。 从背景实用程序(.bg-*)中选择， 或者使用上面的轻/反类来设置自己的 疯狂自定义；
• 鉴于flexbox的风格，navbars现在可以使用flexbox工具来轻松对齐选项；
• .navbar-toggle 现在是 .navbar-toggler ，具有不同的样式和内部标记 (不再有 <span>；
• 完全抛弃了 .navbar-form 这个类. 它不再是必要的; 相反，只需使用 .form-inline 并根据需要应用实用程序；
• 默认情况下Navbar不再包含 margin-bottom 或 border-radius必要时使用实用程序；
• 所有以导航栏为特色的示例已更新为包含新标记。

14、分页

• 用flexbox重写组件；
• 显式类 (.page-item, .page-link) 现在需要在 .pagination的后代中使用；
• 完全丢弃了.pager组件 ，因为它不过是自定义轮廓按钮。

15、面包屑

.breadcrumb的后代现在需要添加类.breadcrumb-item。

16、标签和徽章

• 将 .label 重命名为 .badge ，从而<label> 元素消除歧义；
• 放弃 .badge 组件， 因为它几乎与标签相同。将 .badge-pill 修饰符与标签组件一起使用，以代替该圆形外观；
• 徽章不再自动在列表组和其他组件中自动浮动；
• 实用程序类现在需要.badge-default 已被删除，并添加了 .badge-secondary 以匹配别处使用的组件修饰符类。

17、面板/缩略图

• 完全丢弃新卡组件。

18、面板

• .panel 改为 .card，现在用flexbox构建；
• .panel-default 被删除并且没有替换；
• .panel-group 被移除并且没有替换。 .card-group 不是替代品，它是不同的；
• .panel-heading 改为了 .card-header；
• .panel-title 改为了 .card-title。 可能还想使用 heading elements or classes (例如： <h3>, .h3) 或粗体元素或类 (例如： <strong>, <b>, .font-weight-bold)。 请注意， .card-title标题虽然具有相同的名称，但产生与.panel-title标题不同的外观；
• .panel-body 改为 .card-body；
• .panel-footer 改为 .card-footer；
• .panel-primary, .panel-success, .panel-info, .panel-warning, 和 .panel-danger 已被放弃 .bg-, .text-, 和 .border 被列为公共样式 $theme-colors Sass 地图。

19、进度条

使用.bg-*实用程序替换 .progress-bar-*类 。 例如, class=”progress-bar progress-bar-danger” 变为 class=”progress-bar bg-danger”。

20、轮放组件

• 彻底改变了整个组件以简化设计和样式。Bootstrap有更少的款式可供覆盖，新指标和新图标；
• 所有的CSS都被取消嵌套和重命名，确保每个类的前缀都是 .carousel-；
• 对于轮放组件, .next, .prev, .left, 和 .right 现在改成 .carousel-item-next, .carousel-item-prev, .carousel-item-left, 和 .carousel-item-right；
• .item 现在改成 .carousel-item.；
• 对于 prev/next 控件, .carousel-control.right 和 .carousel-control.left 改成了 .carousel-control-next 和 .carousel-control-prev 这意味着他们不再需要特定的基类；
• 删除所有响应式样式，并根据需要推迟使用实用工具（例如，在某些视口上显示字幕）和自定义样式；
• 删除图像覆盖轮放组件项目中的图像，推迟到实用程序；
• 调整了Carousel示例以包含新的标记和样式。

21、仪表盘

• 删除了对样式化嵌套表的支持。 所有表格样式现在都在v4中继承，用于更简单的选择器；
• 添加了反向表格变体。

22、公用样式

（1）显示，隐藏等等：

• 使显示实用程序响应 (例如, .d-none 和 d-{sm,md,lg,xl}-none)；
• 删除了新的显示实用程序的大部分 .hidden-* 实用程序。 display utilities。而不是 .hidden-sm-up， 请使用 .d-sm-none。 将 .hidden-print 实用程序重命名为使用显示实用程序命名方案；
• 添加 .float-{sm,md,lg,xl}-{left,right,none} 类， 为响应浮动和删除 .pull-left 和 .pull-right 因为它们是多余的 .float-left 和 .float-right。

（2）类型:

• 为文本对齐类添加了响应式变体 .text-{sm,md,lg,xl}-{left,center,right}。

（3）对齐和间距:

• 为所有增加了新的 响应性边距和填充工具，以及垂直和水平的短手；
• 增加了 flexbox实用程序的容器；
• 删除 .center-block 类，添加 .mx-auto 类。

23、提供前缀混合

Bootstrap 3的 vendor prefix mixins, 在v3.2.0中已弃用, 已在Bootstrap 4中删除。由于使用 Autoprefixer， 因此不再需要它们。

删除了以下mixin：

animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

24、文档

Bootstrap的文档也获得了全面升级。 这是最重要的一点：

（1）我们仍在使用Jekyll，但是我们有插件：

• bugify.rb用于有效地列出 浏览器错误 页面上的条目；
• example.rb 是默认 highlight.rb 插件的自定义分支，允许更简单的示例代码处理
• callout.rb 是一个类似的自定义分支，但为我们的特殊文档标注而设计；
• markdown-block.rb 用于在表格中呈现HTML元素内的Markdown片段；
• jekyll-toc 用于生成我们的目录。

（2）所有文档内容都已在Markdown（而不是HTML）中重写，以便于编辑；

（3）页面已被重新组织，以获得更简单的内容和更平易近人的层次结构

（4）从常规CSS转移到SCSS，充分利用Bootstrap的变量，mixins等等。

25、响应式实用程序

• 所有 @screen- 变量已在v4.0.0中删除。 改为使用 media-breakpoint-up()， media-breakpoint-down()， 或 media-breakpoint-only() 或 $grid-breakpoints；
• 响应式实用程序类在很大程度上已被删除，以支持显式 display 实用程序；
• 其中 .hidden 和 .show 类已被删除，因为它们与jQuery的 $(…).hide() 和 $(…).show() 方法冲突。相反，尝试切换 [hidden] 属性或使用内联样式，style=”display: none;” 和 style=”display: block;”；
• 除了已重命名的打印实用程序外，所有 .hidden- 类都被删除。
• 从v3中删除： .hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
• 从v4 alphas中删除： .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• 打印实用程序不再以此开头.hidden- 或 .visible-, 但是 .d-print-原来的类：

.visible-print-block, .visible-print-inline, .visible-print-inline-block, .hidden-print

• 新的类 ：

.d-print-block, .d-print-inline, .d-print-inline-block, .d-print-none

• 而不是使用明确的 .visible-* 类, 而是通过将该元素隐藏在该屏幕尺寸上来使元素可见。可以将一个 .d-*-none 类与一个 .d-*-block 类组合在一起，仅在给定的屏幕大小间隔内显示一个元素 (例如： .d-none.d-md-block.d-xl-none 仅在中型和大型设备上显示元素)；

注意：对v4中的网格断点的更改意味着需要增大一个断点才能达到相同的结果。 新的响应式实用程序类别不会尝试适应不常见的情况，即元素的可见性无法表示为视口大小的单个连续范围; 将需要在这种情况下使用自定义CSS。