在 GitHub 上查看

迁移至 v4

Bootstrap 4 是整个项目的重大重写。最显著的变更汇总如下，随后是相关组件的更具体变更。

稳定变更

从 Beta 3 迁移至稳定的 v4.x 版本，没有重大变更，但有一些显著的变更。

打印

  • 修复了损坏的打印实用工具。以前，使用 .d-print-* 类会意外地覆盖任何其他 .d-* 类。现在，它们与我们的其他显示实用工具相匹配，并且仅适用于该媒体（@media print）。

  • 扩展了可用的打印显示实用程序，以匹配其他实用程序。Beta 3 及更早版本只有 block、inline-block、inline 和 none。Stable v4 添加了 flex、inline-flex、table、table-row 和 table-cell。

  • 通过指定 @page size 的新打印样式修复了跨浏览器的打印预览渲染。

Beta 3 变更

虽然 Beta 2 在 beta 阶段看到了我们的大部分重大更改，但我们仍然有一些需要在 Beta 3 版本中解决的问题。如果你从 Beta 2 或任何更旧版本的 Bootstrap 更新到 Beta 3，则应用这些更改。

其他

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

表单

  • 重写了自定义和默认复选框和单选按钮。现在，两者都有匹配的 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"] { } 来设置样式和行为，而是仅将 data 属性用于 JS 行为，并依赖新的 .btn-group-toggle 类来设置样式。

  • 删除了 .col-form-legend，转而使用稍有改进的 .col-form-label。这样，.col-form-label-sm 和 .col-form-label-lg 可以轻松地用于 <legend> 元素。

  • 自定义文件输入对其 $custom-file-text Sass 变量进行了更改。它不再是嵌套的 Sass 映射，现在只提供一个字符串——“浏览”按钮，因为这是我们 Sass 生成的唯一伪元素。现在，“选择文件”文本来自 .custom-file-label。

输入组

  • 输入组附加组件现在专门针对它们相对于输入的位置。我们已放弃.input-group-addon和.input-group-btn，转而使用两个新类，.input-group-prepend和.input-group-append。您现在必须明确使用附加或前置，这样可以简化我们的大部分 CSS。在附加或前置中，将按钮放在它们在其他任何地方存在的位置，但将文本包装在.input-group-text中。

  • 现在支持验证样式，也支持多个输入（尽管您只能对每个组验证一个输入）。

  • 调整大小的类必须在父.input-group上，而不是各个表单元素上。

Beta 2 变更

在测试阶段，我们的目标是没有重大更改。但是，事情并不总是按计划进行。以下是从 Beta 1 迁移到 Beta 2 时需要牢记的重大更改。

重大变更

  • 移除了$badge-color变量及其在.badge上的用法。我们使用颜色对比函数根据background-color挑选color，因此该变量是不必要的。
  • 将grayscale()函数重命名为gray()，以避免与 CSS 原生grayscale过滤器发生冲突。
  • 将.table-inverse、.thead-inverse和.thead-default重命名为.*-dark和.*-light，与我们在其他地方使用的配色方案相匹配。
  • 响应式表格现在为每个网格断点生成类。这与 Beta 1 不同，因为您一直在使用的.table-responsive更像是.table-responsive-md。您现在可以根据需要使用.table-responsive或.table-responsive-{sm,md,lg,xl}。
  • 放弃了 Bower 支持，因为该包管理器已被弃用，转而使用其他方案（例如 Yarn 或 npm）。有关详细信息，请参阅 bower/bower#2298。
  • Bootstrap 仍然需要 jQuery 1.9.1 或更高版本，但建议您使用版本 3.x，因为 v3.x 的受支持浏览器是 Bootstrap 支持的浏览器，此外 v3.x 还有某些安全修复。
  • 移除了未使用的 .form-control-label 类。如果您确实使用了此类，则它与 .col-form-label 类重复，后者在水平表单布局中垂直居中 <label> 及其关联输入。
  • 将 color-yiq 从包含 color 属性的混合类更改为返回一个值的函数，允许您将其用于任何 CSS 属性。例如，您将编写 color: color-yiq(#000);，而不是 color-yiq(#000)。

亮点

  • 在模态框中引入了新的 pointer-events 用法。外部 .modal-dialog 通过 pointer-events: none 传递事件以进行自定义点击处理（使其可以仅侦听 .modal-backdrop 上的任何点击），然后使用 pointer-events: auto 对实际 .modal-content 进行抵消。

摘要

以下是您在从 v3 迁移到 v4 时需要了解的重要事项。

浏览器支持

  • 放弃了对 IE8、IE9 和 iOS 6 的支持。v4 现在仅支持 IE10+ 和 iOS 7+。对于需要其中任何一个的网站，请使用 v3。
  • 添加了对 Android v5.0 Lollipop 的浏览器和 WebView 的官方支持。Android 浏览器和 WebView 的早期版本仍然仅获得非官方支持。

全局变更

  • 默认启用 Flexbox。总体而言，这意味着不再使用浮动，而更多地跨越我们的组件。
  • 将源 CSS 文件从 Less 切换到 Sass。
  • 将我们的主要 CSS 单位从 px 切换到 rem，尽管像素仍然用于媒体查询和网格行为，因为设备视口不受类型大小的影响。
  • 全局字体大小从 14px 增加到 16px。
  • 改造网格层以添加第五个选项（在 576px 及以下位置解决较小的设备），并从这些类中删除了 -xs 内缀。示例：.col-6.col-sm-4.col-md-3。
  • 通过 SCSS 变量（例如，$enable-gradients: true）用可配置选项替换了单独的可选主题。
  • 对构建系统进行了大修，以使用一系列 npm 脚本而不是 Grunt。请参阅 package.json 以了解所有脚本，或参阅我们的项目自述文件以了解本地开发需求。
  • 不再支持 Bootstrap 的非响应式使用。
  • 放弃在线定制器，转而使用更全面的设置文档和定制构建。
  • 添加了数十个用于常见 CSS 属性值对和边距/内边距间距快捷方式的新实用程序类。

网格系统

  • 迁移到 flexbox。
    • 在网格混合和预定义类中添加了对 flexbox 的支持。
    • 作为 flexbox 的一部分，包括对垂直和水平对齐类的支持。
  • 更新了网格类名和新的网格层级。
    • 在768px以下添加了一个新的sm网格层级，以实现更精细的控制。我们现在有xs、sm、md、lg和xl。这也意味着每个层级都向上提升了一级（因此 v3 中的.col-md-6现在在 v4 中是.col-lg-6）。
    • xs网格类已被修改，不再需要中缀，以更准确地表示它们从min-width: 0开始应用样式，而不是一个固定的像素值。现在是.col-6，而不是.col-xs-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，而不是每次都用相同的值重复我们的媒体查询声明。现在，你可以写@include media-breakpoint-up(sm) { ... }，而不是写@media (min-width: @screen-sm-min) { ... }。

组件

  • 放弃了面板、缩略图和井，转而使用一个新的包罗万象的组件，卡片。
  • 放弃了 Glyphicons 图标字体。如果你需要图标，一些选项是
  • 放弃了 Affix jQuery 插件。
    • 我们建议改用 position: sticky。 查看 HTML5 Please 条目，了解详细信息和具体的 polyfill 建议。一个建议是使用 @supports 规则来实现它（例如，@supports (position: sticky) { ... }）
    • 如果您使用 Affix 来应用其他非 position 样式，则 polyfill 可能不支持您的用例。对于此类用途，一个选择是第三方 ScrollPos-Styler 库。
  • 删除了分页组件，因为它本质上是经过略微自定义的按钮。
  • 重构了几乎所有组件，以使用更多非嵌套类选择器，而不是过于具体的子选择器。

按组件

此列表重点介绍了 v3.x.x 和 v4.0.0 之间按组件划分的关键更改。

重置

Bootstrap 4 的新功能是 Reboot，这是一个新的样式表，它以 Normalize 为基础，并带有我们自己颇具主见的重置样式。此文件中出现的选择器仅使用元素，这里没有类。这将我们的重置样式与我们的组件样式隔离开来，以实现更模块化的方法。其中包括的一些最重要的重置是 box-sizing: border-box 更改，从许多元素上的 em 单位移至 rem 单位，链接样式以及许多表单元素重置。

排版

  • 将所有 .text- 实用工具移至 _utilities.scss 文件。
  • 删除了 .page-header，因为其样式可以通过实用工具应用。
  • .dl-horizontal 已被删除。相反，在 <dl> 上使用 .row，并在其 <dt> 和 <dd> 子元素上使用网格列类（或混合）。
  • 重新设计了块引用，将其样式从 <blockquote> 元素移至单个类 .blockquote。删除了用于文本实用工具的 .blockquote-reverse 修饰符。
  • .list-inline 现在要求其子列表项应用新的 .list-inline-item 类。

图像

  • 将 .img-responsive 重命名为 .img-fluid。
  • 将 .img-rounded 重命名为 .rounded
  • 将 .img-circle 重命名为 .rounded-circle

表格

  • > 选择器的几乎所有实例都已移除，这意味着嵌套表格现在将自动继承其父级的样式。这极大地简化了我们的选择器和潜在的自定义。
  • 为一致性将 .table-condensed 重命名为 .table-sm。
  • 添加了一个新的 .table-inverse 选项。
  • 添加了表格标题修饰符：.thead-default 和 .thead-inverse。
  • 将上下文类重命名为带有 .table- 前缀。因此 .active、.success、.warning、.danger 和 .info 变为 .table-active、.table-success、.table-warning、.table-danger 和 .table-info。

表单

  • 将元素重置移动到 _reboot.scss 文件。
  • 将 .control-label 重命名为 .col-form-label。
  • 将 .input-lg 和 .input-sm 分别重命名为 .form-control-lg 和 .form-control-sm。
  • 为了简单起见，删除了 .form-group-* 类。现在改为使用 .form-control-* 类。
  • 删除了 .help-block，并用 .form-text 替换了它，以获得块级帮助文本。对于内联帮助文本和其他灵活选项，请使用实用程序类，如 .text-muted。
  • 删除了 .radio-inline 和 .checkbox-inline。
  • 将 .checkbox 和 .radio 合并到 .form-check 和各种 .form-check-* 类中。
  • 水平表单已全面检修
    • 删除了 .form-horizontal 类要求。
    • .form-group 不再通过混合应用 .row 的样式，因此现在需要 .row 才能进行水平网格布局（例如 <div class="form-group row">）。
    • 添加了新的 .col-form-label 类，以使用 .form-control 垂直居中标签。
    • 添加了新的 .form-row，以使用网格类获得紧凑的表单布局（将 .row 换成 .form-row 即可）。
  • 添加了自定义表单支持（用于复选框、单选按钮、选择框和文件输入）。
  • 用 HTML5 表单验证（通过 CSS 的 :invalid 和 :valid 伪类）替换了 .has-error、.has-warning 和 .has-success 类。
  • 将 .form-control-static 重命名为 .form-control-plaintext。

按钮

  • 将 .btn-default 重命名为 .btn-secondary。
  • 完全删除了 .btn-xs 类，因为 .btn-sm 比 v3 的比例小得多。
  • button.js jQuery 插件的 有状态按钮 功能已删除。这包括 $().button(string) 和 $().button('reset') 方法。我们建议改为使用一小段自定义 JavaScript，这样可以按您想要的方式准确执行。
    • 请注意，该插件的其他功能（按钮复选框、按钮单选按钮、单切换按钮）已保留在 v4 中。
  • 将按钮的 [disabled] 更改为 :disabled，因为 IE9+ 支持 :disabled。但是 fieldset[disabled] 仍然是必需的，因为 本机禁用字段集在 IE11 中仍然存在缺陷。

按钮组

  • 使用 flexbox 重写组件。
  • 已移除 .btn-group-justified。作为替代，您可以在元素周围使用 <div class="btn-group d-flex" role="group"></div> 作为包装器，并使用 .w-100。
  • 由于已移除 .btn-xs，因此完全放弃了 .btn-group-xs 类。
  • 已移除按钮工具栏中按钮组之间的显式间距；现在使用边距实用工具。
  • 改进了与其他组件配合使用的文档。
  • 对于所有组件、修饰符等，已从父选择器切换到单一类。
  • 简化下拉样式，不再随附连接到下拉菜单的向上或向下箭头。
  • 现在可以使用 <div> 或 <ul> 构建下拉菜单。
  • 已重建下拉样式和标记，以轻松提供对基于 <a> 和 <button> 的下拉项的内置支持。
  • 已将 .divider 重命名为 .dropdown-divider。
  • 下拉项现在需要 .dropdown-item。
  • 下拉切换不再需要显式的 <span class="caret"></span>；现在通过 .dropdown-toggle 上的 CSS 的 ::after 自动提供此功能。

网格系统

  • 已添加一个新的 576px 网格断点作为 sm，这意味着现在共有五个总层（xs、sm、md、lg 和 xl）。
  • 已将响应式网格修饰符类从 .col-{breakpoint}-{modifier}-{size} 重命名为 .{modifier}-{breakpoint}-{size}，以获得更简单的网格类。
  • 已放弃推送和拉动修饰符类，以支持新的基于 flexbox 的 order 类。例如，您将使用 .col-8.order-2 和 .col-4.order-1，而不是 .col-8.push-4 和 .col-4.pull-8。
  • 已为网格系统和组件添加 flexbox 实用工具类。

列表组

  • 使用 flexbox 重写组件。
  • 已使用显式类 .list-group-item-action 替换 a.list-group-item，以设置列表组项的链接和按钮版本的样式。
  • 已添加 .list-group-flush 类，以与卡片配合使用。
  • 使用 flexbox 重写组件。
  • 鉴于已转向 flexbox，标头中关闭图标的对齐方式可能已损坏，因为我们不再使用浮动。浮动内容排在第一位，但对于 flexbox 而言，情况不再如此。更新您的关闭图标，使其出现在模态标题之后以修复此问题。
  • 已移除 remote 选项（可用于自动加载和将外部内容注入模态）和相应的 loaded.bs.modal 事件。我们建议改用客户端模板或数据绑定框架，或自行调用 jQuery.load。
  • 使用 flexbox 重写组件。
  • 已放弃几乎所有 > 选择器，以通过非嵌套类实现更简单的样式。
  • 我们为 .nav、.nav-item 和 .nav-link 使用单独的类，而不是使用 HTML 特定的选择器，如 .nav > li > a。这使您的 HTML 更灵活，同时带来更高的可扩展性。

导航栏已完全重写为 flexbox，改进了对对齐、响应和自定义的支持。

  • 响应式导航栏行为现在通过必需的 .navbar-expand-{breakpoint} 应用到 .navbar 类，其中可以选择在何处折叠导航栏。以前，这是一个 Less 变量修改，需要重新编译。
  • .navbar-default 现在是 .navbar-light，而 .navbar-dark 保持不变。每个导航栏都需要其中之一。但是，这些类不再设置 background-color；相反，它们基本上只影响 color。
  • 导航栏现在需要某种背景声明。从我们的背景实用程序 (.bg-*) 中选择，或使用上述 light/inverse 类设置自己的背景，以进行疯狂的自定义。
  • 鉴于 flexbox 样式，导航栏现在可以使用 flexbox 实用程序轻松对齐。
  • .navbar-toggle 现在是 .navbar-toggler，并且具有不同的样式和内部标记（不再有三个 <span>）。
  • 完全删除了 .navbar-form 类。它不再是必需的；相反，只需使用 .form-inline 并根据需要应用边距实用程序。
  • 导航栏默认不再包含 margin-bottom 或 border-radius。根据需要使用实用程序。
  • 所有包含导航栏的示例都已更新为包含新标记。

分页

  • 使用 flexbox 重写组件。
  • 现在需要在 .pagination 的后代上使用显式类 (.page-item、.page-link)。
  • 完全删除了 .pager 组件，因为它只不过是自定义的外框按钮。
  • 现在需要在 .breadcrumb 的后代上使用显式类 .breadcrumb-item。

标签和徽章

  • 合并 .label 和 .badge 以消除与 <label> 元素的歧义并简化相关组件。
  • 添加 .badge-pill 作为圆形“药丸”外观的修饰符。
  • 徽章不再在列表组和其他组件中自动浮动。现在需要为此使用实用程序类。
  • 已删除 .badge-default，并添加了 .badge-secondary 以匹配其他地方使用的组件修饰符类。

面板、缩略图和井

完全删除以支持新的卡片组件。

面板

  • .panel 改为 .card，现在使用 flexbox 构建。
  • 删除了 .panel-default，没有替换。
  • 删除了 .panel-group，没有替换。.card-group 不是替换，它是不同的。
  • .panel-heading 改为 .card-header
  • .panel-title 改为 .card-title。根据所需的外观，你可能还想使用标题元素或类（例如 <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 映射中生成。

进度

  • 用 .bg-* 实用程序替换了上下文 .progress-bar-* 类。例如，class="progress-bar progress-bar-danger" 变为 class="progress-bar bg-danger"。
  • 用 .progress-bar-animated 替换了动画进度条的 .active。
  • 彻底修改了整个组件，以简化设计和样式。我们减少了您需要覆盖的样式，添加了新的指示器和新的图标。
  • 所有 CSS 已取消嵌套并重命名，确保每个类都以 .carousel- 为前缀。
    • 对于轮播项，.next、.prev、.left 和 .right 现在分别是 .carousel-item-next、.carousel-item-prev、.carousel-item-left 和 .carousel-item-right。
    • .item 现在也变为 .carousel-item。
    • 对于上一个/下一个控件，.carousel-control.right 和 .carousel-control.left 现在分别是 .carousel-control-next 和 .carousel-control-prev，这意味着它们不再需要特定的基础类。
  • 删除了所有响应式样式，根据需要推迟到实用程序（例如，在特定视口中显示标题）和自定义样式。
  • 删除了轮播项中图像的图像覆盖，推迟到实用程序。
  • 调整了轮播示例，以包括新的标记和样式。

表格

  • 删除了对样式嵌套表的支持。现在，所有表样式都继承自 v4，以使用更简单的选择器。
  • 添加了反转表变体。

实用工具

  • 显示、隐藏等
    • 使显示实用程序响应式（例如，.d-none 和 d-{sm,md,lg,xl}-none）。
    • 删除了大部分 .hidden-* 实用程序，以获取新的 显示实用程序。例如，不要使用 .hidden-sm-up，而要使用 .d-sm-none。使用显示实用程序命名方案重命名了 .hidden-print 实用程序。有关更多信息，请参阅本页的 响应式实用程序 部分。
    • 添加了 .float-{sm,md,lg,xl}-{left,right,none} 类，用于响应式浮动，并删除了 .pull-left 和 .pull-right，因为它们与 .float-left 和 .float-right 重复。
  • 类型
    • 为我们的文本对齐类 .text-{sm,md,lg,xl}-{left,center,right} 添加了响应式变体。
  • 对齐和间距
  • Clearfix 已更新，以删除对较旧浏览器版本的支持。

供应商前缀混合

Bootstrap 3 的 供应商前缀 混合，在 v3.2.0 中已弃用，在 Bootstrap 4 中已移除。由于我们使用 Autoprefixer，它们不再必要。

已移除以下混合：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

文档

我们的文档也全面升级了。以下是详细说明

  • 我们仍在使用 Jekyll，但我们混合使用了插件
    • bugify.rb 用于高效列出我们 浏览器错误 页面上的条目。
    • example.rb 是默认 highlight.rb 插件的自定义分支，允许更轻松地处理示例代码。
    • callout.rb 是它的类似自定义分支，但专为我们的特殊文档标注而设计。
    • jekyll-toc 用于生成我们的目录。
  • 所有文档内容已用 Markdown（而非 HTML）重写，以便于编辑。
  • 页面已重新组织，以实现更简单的内容和更易于理解的层次结构。
  • 我们从常规 CSS 转移到 SCSS，以充分利用 Bootstrap 的变量、混合等。

响应式实用工具

所有 @screen- 变量已在 v4.0.0 中移除。请改用 media-breakpoint-up()、media-breakpoint-down() 或 media-breakpoint-only() Sass 混合或 $grid-breakpoints Sass 映射。

我们的响应式实用程序类已基本移除，取而代之的是明确的 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 alpha 版中移除：.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。