Source

迁移到 v4

Bootstrap 4 是对整个项目的重大改写。下面总结了最显着的变化，然后是对相关组件的更具体的变化。

稳定的变化

从 Beta 3 迁移到我们稳定的 v4.0 版本，没有重大变化，但有一些值得注意的变化。

印刷

  • 修复了损坏的打印实用程序。以前，使用一个.d-print-*类会意外地推翻任何其他.d-*类。现在，它们与我们的其他显示实用程序相匹配，并且仅适用于该媒体 ( @media print)。

  • 扩展了可用的打印显示实用程序以匹配其他实用程序。Beta 3 和更早版本只有block, inline-block,inline和none. 稳定版 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自定义表单复选框和单选框上的多个 s 的 CSS。以前，现在移除的.custom-control-indicator元素具有背景颜色、渐变和 SVG 图标。自定义背景渐变意味着每次您只需要更改一个时都要替换所有这些。现在，我们有了.custom-control-label::before填充和渐变并.custom-control-label::after处理图标。

    要进行自定义内联检查，请添加.custom-control-inline.

  • 更新了基于输入的按钮组的选择器。我们将属性仅用于 JS 行为，而不是[data-toggle="buttons"] { }用于样式和行为，data并依赖于新.btn-group-toggle的样式类。

  • 去掉.col-form-legend有利于稍微改进.col-form-label。这种方式.col-form-label-sm可以.col-form-label-lg轻松用于<legend>元素。

  • 自定义文件输入收到了对其$custom-file-textSass 变量的更改。它不再是嵌套的 Sass 映射，现在只为一个字符串供电——Browse按钮，因为它现在是我们 Sass 生成的唯一伪元素。文本现在Choose file来自.custom-file-label.

输入组

  • 输入组插件现在特定于它们相对于输入的位置。我们已经放弃了两个新课程.input-group-addon和。您现在必须显式使用附加或前置，简化我们的大部分 CSS。在 append 或 prepend 中，将按钮放置在其他任何地方，但将文本包装在..input-group-btn.input-group-prepend.input-group-append.input-group-text

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

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

Beta 2 更改

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

打破

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

强调

  • 在模态上引入了新的pointer-events用法。外部.modal-dialog通过pointer-events: none用于自定义点击处理的事件（使得可以只监听.modal-backdrop任何点击），然后针对实际.modal-content的 with抵消它pointer-events: auto。

概括

以下是从 v3 迁移到 v4 时需要注意的重要事项。

浏览器支持

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

全局变化

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

网格系统

  • 移至弹性盒。
    • 在网格混合和预定义类中添加了对 flexbox 的支持。
    • 作为 flexbox 的一部分，包括对垂直和水平对齐类的支持。
  • 更新了网格类名称和新的网格层。
    • 在下方添加了一个新的sm网格层768px以进行更精细的控制。我们现在有xs, sm, md, lg, 和xl。这也意味着每一层都提升了一个级别（所以.col-md-6在 v3 中现在.col-lg-6在 v4 中）。
    • xs网格类已被修改为不需要中缀来更准确地表示它们开始应用样式min-width: 0而不是设置的像素值。而不是.col-xs-6，现在是.col-6。所有其他网格层都需要中缀（例如，sm）。
  • 更新了网格大小、mixin 和变量。
    • 网格排水沟现在有一个 Sass 地图，因此您可以在每个断点指定特定的排水沟宽度。
    • 更新了网格 mixin 以利用make-col-readyprep mixin 和 amake-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) { ... }。

成分

  • 为新的无所不包的组件卡放置了面板、缩略图和井。
  • 删除了 Glyphicons 图标字体。如果您需要图标，一些选项是：
  • 删除了 Affix jQuery 插件。
  • 删除了寻呼机组件，因为它本质上是略微定制的按钮。
  • 重构了几乎所有组件以使用更多非嵌套类选择器，而不是过度特定的子选择器。

按组件

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

重启

Bootstrap 4 的新功能是Reboot，这是一个新的样式表，它建立在 Normalize 的基础上，并带有我们自己有些固执的重置样式。出现在这个文件中的选择器只使用元素——这里没有类。这将我们的重置样式与我们的组件样式隔离开来，以实现更加模块化的方法。其中包括的一些最重要的重置是box-sizing: border-box更改、从许多元素上em的rem单元、链接样式和许多表单元素重置。

排版

  • 将所有.text-实用程序移至该_utilities.scss文件。
  • 删除.page-header，因为它的样式可以通过实用程序应用。
  • .dl-horizontal已被删除。相反，在其和子项.row上使用<dl>和使用网格列类（或 mixins） 。<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不再应用来自.rowvia mixin 的样式，因此.row现在需要水平网格布局（例如，<div class="form-group row">）。
    • 使用 s 将新.col-form-label类添加到垂直居中标签.form-control。
    • 为带有网格类的紧凑表单布局添加了新的内容.form-row（交换你.row的 a.form-row和 go）。
  • 添加了自定义表单支持（用于复选框、单选框、选择和文件输入）。
  • 通过 CSS和伪类将.has-error、.has-warning和类替换.has-success为 HTML5 表单验证。:invalid:valid
  • 重命名.form-control-static为.form-control-plaintext.

纽扣

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

按钮组

  • 用 flexbox 重写了组件。
  • 已删除.btn-group-justified。作为替代，您可以<div class="btn-group d-flex" role="group"></div>使用.w-100.
  • 完全放弃了.btn-group-xs课程，因为删除了.btn-xs.
  • 删除了按钮工具栏中按钮组之间的显式间距；现在使用保证金工具。
  • 改进了与其他组件一起使用的文档。
  • 从父选择器切换到所有组件、修饰符等的单一类。
  • 简化的下拉样式不再带有附加到下拉菜单的向上或向下箭头。
  • 现在可以使用<div>s 或<ul>s 构建下拉列表。
  • <a>重建下拉样式和标记，为<button>下拉项提供简单的内置支持。
  • 重命名.divider为.dropdown-divider.
  • 下拉项目现在需要.dropdown-item.
  • 下拉切换不再需要明确的<span class="caret"></span>; 这现在是通过 CSS 的::afteron自动提供的.dropdown-toggle。

网格系统

  • 添加了一个新的576px网格断点为sm，这意味着现在总共有五个层（xs、sm、md、lg和xl）。
  • 将响应式网格修改器类从 重命名.col-{breakpoint}-{modifier}-{size}为.{modifier}-{breakpoint}-{size}更简单的网格类。
  • 为新的 flexbox 驱动的类删除了 push 和 pull 修饰符order类。例如，您将使用and代替.col-8.push-4and 。.col-4.pull-8.col-8.order-2.col-4.order-1
  • 为网格系统和组件添加了 flexbox 实用程序类。

列出组

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

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

  • 响应式导航栏行为现在通过您选择在哪里折叠导航栏所需.navbar的位置应用于类。以前这是一个较少的变量修改，需要重新编译。 .navbar-expand-{breakpoint}
  • .navbar-default是现在.navbar-light，虽然.navbar-dark保持不变。每个导航栏都需要其中之一。但是，这些类不再设置background-colors；相反，它们基本上只影响color.
  • 导航栏现在需要某种背景声明。从我们的后台实用程序 ( .bg-*) 中进行选择，或者使用上面的灯光/逆向类进行自定义设置。
  • 给定 flexbox 样式，导航栏现在可以使用 flexbox 实用程序来轻松对齐选项。
  • .navbar-toggleis now.navbar-toggler并且具有不同的样式和内部标记（不再是三个<span>s）。
  • 完全放弃了.navbar-form课程。不再需要了；相反，只需.form-inline根据需要使用和应用保证金实用程序。
  • 导航栏不再包括margin-bottom或border-radius默认情况下。根据需要使用实用程序。
  • 所有以导航栏为特色的示例都已更新以包含新的标记。

分页

  • 用 flexbox 重写了组件。
  • s的后代现在需要显式类 ( .page-item, ).page-link.pagination
  • 完全放弃了该.pager组件，因为它只不过是自定义的大纲按钮。
  • s.breadcrumb-item的后代现在需要一个显式类 ,.breadcrumb

标签和徽章

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

面板、缩略图和孔

完全放弃了新的卡片组件。

面板

  • .panelto .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, 和, , , 和从我们的Sass 映射生成的实用程序.panel-danger已被删除。.bg-.text-.border$theme-colors

进步

  • 用实用程序替换了上下文.progress-bar-*类。.bg-*例如，class="progress-bar progress-bar-danger"变成class="progress-bar bg-danger"。
  • 用替换.active动画进度条.progress-bar-animated。
  • 大修整个组件以简化设计和样式。我们有更少的样式供您覆盖、新指标和新图标。
  • 所有 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.leftnow.carousel-control-next和.carousel-control-prev，这意味着它们不再需要特定的基类。
  • 删除了所有响应式样式，根据需要使用实用程序（例如，在某些视口上显示标题）和自定义样式。
  • 删除了轮播项目中图像的图像覆盖，遵循实用程序。
  • 调整 Carousel 示例以包含新的标记和样式。

表

  • 删除了对样式嵌套表的支持。所有表格样式现在都在 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 的供应商前缀mixin 在 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 的变量、mixin 等。

响应式实用程序

@screen-v4.0.0 中删除了所有变量。请改用media-breakpoint-up()、media-breakpoint-down()或media-breakpoint-only()Sass 混合程序或$grid-breakpointsSass 映射。

我们的响应式实用程序类已在很大程度上被删除，以支持显式display实用程序。

  • 和类已被删除，因为它们与 jQuery 的.hidden和方法冲突。相反，请尝试切换属性或使用内联样式，例如and 。.show$(...).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。