跳到主要内容 跳到文档导航
in English

迁移到 v5

跟踪和查看对 Bootstrap 源文件、文档和组件的更改，以帮助您从 v4 迁移到 v5。

在本页面

依赖项

  • 放弃了 jQuery。
  • 从 Popper v1.x 升级到 Popper v2.x。
  • 鉴于 Libsass 已弃用，我们的 Sass 编译器将 Libsass 替换为 Dart Sass。
  • 从 Jekyll 迁移到 Hugo 以构建我们的文档

浏览器支持

  • 删除 Internet Explorer 10 和 11
  • 删除 Microsoft Edge < 16（旧版 Edge）
  • 删除 Firefox < 60
  • 掉落的 Safari < 12
  • 删除 iOS Safari < 12
  • 掉落的铬 < 60

文档更改

  • 重新设计的主页、文档布局和页脚。
  • 添加了新的包裹指南。
  • 添加了新的自定义部分，替换了v4 的主题页面，新增了关于 Sass、全局配置选项、配色方案、CSS 变量等的详细信息。
  • 将所有表单文档重���组织到新的表单部分，将内容分解为更集中的页面。
  • 同样，更新了 Layout 部分，以更清晰地充实网格内容。
  • 将“Navs”组件页面重命名为“Navs & Tabs”。
  • 将“Checks”页面重命名为“Checks & radios”。
  • 重新设计了导航栏并添加了新的子导航，以便更轻松地浏览我们的网站和文档版本。
  • 为搜索字段添加了新的键盘快捷键：Ctrl + /.

萨斯

  • 我们放弃了默认的 Sass 地图合并，以便更轻松地删除冗余值。请记住，您现在必须在 Sass 映射中定义所有值，例如$theme-colors. 查看如何处理Sass 映射。

  • 打破color-yiq()将函数和相关变量重命名为，color-contrast()因为它不再与 YIQ 颜色空间相关。请参阅#30168。

    • $yiq-contrasted-threshold被重命名为$min-contrast-ratio.
    • $yiq-text-dark和$yiq-text-light分别重命名为$color-contrast-dark和$color-contrast-light。

  • 打破媒体查询混合参数已更改为更合乎逻辑的方法。

    • media-breakpoint-down()使用断点本身而不是下一个断点（例如，media-breakpoint-down(lg)而不是media-breakpoint-down(md)目标视口小于lg）。
    • 类似地，in 中的第二个参数media-breakpoint-between()也使用断点本身而不是下一个断点（例如，media-between(sm, lg)而不是media-breakpoint-between(sm, md)目标视口在sm和之间lg）。

  • 打破删除了打印样式和$enable-print-styles变量。打印显示类仍然存在。请参阅#28339。

  • 打破删除color()、theme-color()和gray()函数，支持变量。请参阅#29083。

  • 打破theme-color-level()将函数重命名为color-level()，现在接受您想要的任何颜色，而不仅仅是$theme-color颜色。请参阅 #29083 注意： color-level()后来被丢弃在v5.0.0-alpha3.

  • 打破为简洁起见，重命名为$enable-prefers-reduced-motion-media-queryand 。$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers

  • 打破删除了bg-gradient-variant()混合。使用.bg-gradient类向元素添加渐变，而不是生成的.bg-gradient-*类。

  • 打破 删除了以前不推荐使用的 mixin：

    • hover, hover-focus,plain-hover-focus和hover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()（也删除了相关的实用程序类，.text-hide）
    • visibility()
    • form-control-focus()

  • 打破重命名scale-color()函数以shift-color()避免与 Sass 自己的颜色缩放函数发生冲突。

  • box-shadowmixins 现在允许值和从多个参数中null删除。请参阅#30394。none

  • border-radius()mixin 现在有一个默认值。

颜色系统

  • 与新的颜色系统一起使用color-level()并被$theme-color-interval删除的颜色系统。我们代码库中的所有lighten()和darken()函数都被替换为tint-color()和shade-color()。这些函数会将颜色与白色或黑色混合，而不是按固定量改变其亮度。将shift-color()根据其权重参数是正值还是负值来着色或着色颜色。有关详细信息，请参阅#30622。

  • 为每种颜色添加了新的色调和阴影，为每种基色提供了九种不同的颜色，作为新的 Sass 变量。

  • 改善颜色对比度。将颜色对比度从 3:1 提高到 4.5:1，并更新了蓝色、绿色、青色和粉红色，以确保 WCAG 2.1 AA 对比度。还将我们的颜色对比色从 更改$gray-900为$black。

  • 为了支持我们的颜色系统，我们添加了新的自定义tint-color()和shade-color()功能来适当地混合我们的颜色。

网格更新

  • 新断点！为和向上添加了新xxl的断点。1400px对所有其他断点没有更改。

  • 改进的排水沟。排水沟现在以 rems 为单位设置，并且比 v4 更窄（1.5rem或大约24px，从 向下30px）。这使我们的网格系统的排水沟与我们的间距实用程序对齐。

    • 添加了新的排水沟类（.g-*、.gx-*和.gy-*）来控制水平/垂直排水沟、水平排水沟和垂直排水沟。
    • 打破重命名.no-gutters为.g-0以匹配新的装订线实用程序。

  • 列不再position: relative适用，因此您可能必须添加.position-relative一些元素才能恢复该行为。

  • 打破删除了几个.order-*经常不用的课程。我们现在只提供.order-1开箱.order-5即用。

  • 打破删除了.media组件，因为它可以很容易地用实用程序复制。有关示例，请参见 #28265和flex 实用程序页面。

  • 打破 bootstrap-grid.css现在仅适用box-sizing: border-box于列而不是重置全局框大小。这样，我们的网格样式可以在更多的地方使用而不会受到干扰。

  • $enable-grid-classes不再禁用容器类的生成。请参阅#29146。

  • 将 mixin 更新make-col为默认为没有指定大小的相等列。

内容、重启等

  • RFS现在默认启用。使用 mixin 的标题font-size()将自动调整它们font-size以随视口缩放。此功能以前选择加入 v4。

  • 打破彻底检查了我们的显示排版以替换我们的$display-*变量并使用$display-font-sizesSass 映射。还删除了单个和调整的 s的单个$display-*-weight变量。$display-font-weightfont-size

  • 添加了两个新的.display-*标题大小.display-5和.display-6.

  • 链接默认带有下划线（不仅仅是悬停），除非它们是特定组件的一部分。

  • 重新设计的表格以刷新其样式并使用 CSS 变量重建它们以更好地控制样式。

  • 打破嵌套表不再继承样式。

  • 打破 .thead-light并被.thead-dark删除，取而代之的是.table-*可用于所有表格元素（thead、tbody、tfoot、tr和）th的变体类td。

  • 打破table-row-variant()mixin 被重命名为并且table-variant()只接受 2 个参数：（$color颜色名称）和$value（颜色代码）。边框颜色和强调色是根据表格因子变量自动计算的。

  • 将表格单元格填充变量拆分为-y和-x。

  • 打破下课了.pre-scrollable。见#29135

  • 打破 .text-*实用程序不再向链接添加悬停和焦点状态。.link-*可以使用辅助类代替。见#29267

  • 打破下课了.text-justify。见#29793

  • 打破 <hr>元素现在使用height而不是border更好地支持该size属性。这也允许使用填充实用程序来创建更厚的分隔线（例如，<hr class="py-1">）。

  • padding-left将浏览器默认的默认水平<ul>和<ol>元素重置40px为2rem.

  • 已添加$enable-smooth-scroll，适用于全球——除了通过媒体查询scroll-behavior: smooth请求减少运动的用户。见#31877prefers-reduced-motion

RTL

  • 水平方向特定的变量、实用程序和 mixin 都已重命名为使用类似于弹性盒布局中的逻辑属性——例如start，end代替leftand right。

形式

  • 添加了新的浮动表格！我们已将浮动标签示例提升为完全支持的表单组件。请参阅新的浮动标签页面。

  • 打破 合并本机和自定义表单元素。已合并在 v4 中具有本机和自定义类的复选框、单选、选择和其他输入。现在几乎我们所有的表单元素都是完全自定义的，大多数不需要自定义 HTML。

    • .custom-check现在是.form-check。
    • .custom-check.custom-switch现在是.form-check.form-switch。
    • .custom-select现在是.form-select。
    • .custom-file并.form-file已被.form-control.
    • .custom-range现在是.form-range。
    • 放弃原生.form-control-file和.form-control-range.

  • 打破掉落.input-group-append和.input-group-prepend。您现在可以添加按钮并.input-group-text作为输入组的直接子项。

  • 通过向具有验证的输入组添加一个额外的类，最终修复了具有验证反馈错误的输入组上长期缺少边界半径。.has-validation

  • 打破 为我们的网格系统删除了特定于表单的布局类。使用我们的网格和实用程序而不是.form-group、.form-row或.form-inline。

  • 打破表单标签现在需要.form-label.

  • 打破 .form-text不再设置display，允许您只通过更改 HTML 元素就可以根据需要创建内联或阻止帮助文本。

  • 验证图标不再应用于<select>带有 的 s multiple。

  • 重新排列了 下的源 Sass 文件scss/forms/，包括输入组样式。

成分

  • 警报、面包屑、卡片、下拉列表、列表组、模式、弹出框和工具提示的统一padding值基于我们的$spacer变量。请参阅#30564。

手风琴

警报

  • 警报现在有带有图标的示例。

  • 删除<hr>了每个警报中 s 的自定义样式，因为它们已经使用currentColor.

徽章

  • 打破删除了后台实用程序的所有.badge-*颜色类（例如，使用.bg-primary而不是.badge-primary）。

  • 打破Dropped — 改用.badge-pill该.rounded-pill实用程序。

  • 打破删除了<a>和<button>元素的悬停和焦点样式。

  • .25em从/.5em到.35em/增加了徽章的默认填充.65em。

  • padding通过删除、background-color和简化了面包屑的默认外观border-radius。

  • 添加了新的 CSS 自定义属性--bs-breadcrumb-divider，无需重新编译 CSS，即可轻松自定义。

纽扣

  • 打破 带有复选框或单选按钮的切换按钮不再需要 JavaScript 并具有新的标记。我们不再需要包装元素，添加.btn-check到<input>，并将其.btn与<label>. 请参阅#30650。相关文档已从我们的 Buttons 页面移至新的 Forms 部分。

  • 打破 为公用事业.btn-block而放弃。不要在 上使用.btn-block，而是使用和实用程序来.btn包装您的按钮，以便根据需要将它们隔开。切换到响应式类以更好地控制它们。阅读文档以获取一些示例。.d-grid.gap-*

  • 更新了我们的button-variant()和button-outline-variant()mixins 以支持其他参数。

  • 更新了按钮以确保增加悬停和活动状态的对比度。

  • 禁用按钮现在具有pointer-events: none;.

卡片

  • 打破放弃.card-deck支持我们的网格。将您的卡片包装在列类中并添加一个父.row-cols-*容器以重新创建卡片组（但对响应对齐有更多控制）。

  • 打破放弃.card-columns了砌体。请参阅#28922。

  • 打破用新的 Accordion 组件替换了.card基础手风琴。

关闭按钮

  • 打破重命名.close为.btn-close一个不太通用的名称。

  • 关闭按钮现在使用background-image（嵌入的 SVG）而不是&times;HTML 中的 a，允许更轻松地自定义，而无需触摸您的标记。

  • 添加了新.btn-close-white变体，用于filter: invert(1)在较暗的背景下启用更高对比度的消除图标。

坍塌

  • 删除了手风琴的滚动锚定。

  • .dropdown-menu-dark为按需深色下拉菜单添加了新变体和相关变量。

  • 为 .添加了新变量$dropdown-padding-x。

  • 使下拉分隔线变暗以提高对比度。

  • 打破下拉列表的所有事件现在都在下拉切换按钮上触发，然后冒泡到父元素。

  • data-bs-popper="static"当下拉菜单的位置是静态的并且data-bs-popper="none"下拉菜单位于导航栏中时，下拉菜单现在有一个属性集。这是由我们的 JavaScript 添加的，可以帮助我们使用自定义位置样式，而不会干扰 Popper 的定位。

  • 打破删除flip了下拉插件的选项，支持原生 Popper 配置。您现在可以通过在翻转修饰符中为fallbackPlacements选项传递一个空数组来禁用翻转行为。

  • 下拉菜单现在可以点击处理自动关闭行为autoClose的新选项。您可以使用此选项接受在下拉菜单内部或外部的单击以使其具有交互性。

  • 下拉列表现在支持.dropdown-items 包裹在<li>s 中。

超大屏幕

列表组

  • 为类添加了、、和的新null变量。font-sizefont-weightcolor:hover color.nav-link
  • 打破导航栏现在需要一个容器（以大大简化间距要求和所需的 CSS）。

画布外

分页

  • 分页链接现在具有可自定义margin-left的功能，当它们彼此分开时，这些链接在所有角落都动态变圆。

  • transition在分页链接中添加了 s。

约夏克布丁

  • 打破在我们的默认弹出框模板中重命名.arrow为。.popover-arrow

  • whiteList将选项重命名为allowList.

纺纱厂

  • 旋转器现在prefers-reduced-motion: reduce通过减慢动画来获得荣誉。请参阅#31882。

  • 改进的微调器垂直对齐。

敬酒

  • Toasts 现在可以在定位实用程序.toast-container的帮助下定位。

  • 将默认吐司持续时间更改为 5 秒。

  • 从 toasts 中删除overflow: hidden并替换为border-radius具有功能的适当 s calc()。

工具提示

  • 打破在我们的默认工具提示模板中重命名.arrow为。.tooltip-arrow

  • 打破的默认值fallbackPlacements更改['top', 'right', 'bottom', 'left']为更好地放置 popper 元素。

  • 打破whiteList将选项重命名为allowList.

实用程序

  • 打破重命名了几个实用程序以使用逻辑属性名称而不是方向名称，并添加了 RTL 支持：

    • 将and重命名为.left-*and 。.right-*.start-*.end-*
    • 将and重命名为.float-leftand 。.float-right.float-start.float-end
    • 将and重命名为.border-leftand 。.border-right.border-start.border-end
    • 将and重命名为.rounded-leftand 。.rounded-right.rounded-start.rounded-end
    • 将and重命名为.ml-*and 。.mr-*.ms-*.me-*
    • 将and重命名为.pl-*and 。.pr-*.ps-*.pe-*
    • 将and重命名为.text-leftand 。.text-right.text-start.text-end

  • 打破默认禁用负边距。

  • 添加.bg-body了用于快速将<body>'s 背景设置为其他元素的新类。

  • 为、、和增加了新的定位实用程序。每个属性的值包括、和。toprightbottomleft050%100%

  • .translate-middle-x为.translate-middle-y水平或垂直居中绝对/固定定位元素添加了新的实用程序。

  • 添加了新的border-width实用程序。

  • 打破重命名.text-monospace为.font-monospace.

  • 打破已删除.text-hide，因为它是一种过时的隐藏不应再使用的文本的方法。

  • 添加.fs-*了实用程序的font-size实用程序（启用了 RFS）。这些使用与 HTML 的默认标题相同的比例（1-6，从大到小），并且可以通过 Sass 映射进行修改。

  • 打破为了简洁和一致，重命名了.font-weight-*实用程序。.fw-*

  • 打破为了简洁和一致，重命名了.font-style-*实用程序。.fst-*

  • 为 CSS Grid 和 flexbox 布局添加.d-grid了显示实用程序和新gap实用程序 ( )。.gap

  • 打破删除.rounded-sm和rounded-lg，并引入了新的班级规模 ，.rounded-0to .rounded-3。请参阅#31687。

  • 添加了新实用line-height程序：.lh-1、.lh-sm和。见这里。.lh-base.lh-lg

  • 在我们的 CSS 中移动了该.d-none实用程序，使其比其他显示实用程序具有更大的权重。

  • 使用 .扩展.visually-hidden-focusable帮助器以在容器上工作:focus-within。

帮手

  • 打破 响应式嵌入助手已重命名为具有新类名和改进行为的比率助手，以及有用的 CSS 变量。

    • 类已重命名以更改by为x纵横比。例如，.ratio-16by9现在.ratio-16x9.
    • 我们放弃了.embed-responsive-itemand 元素组选择器，取而代之的是更简单的.ratio > *选择器。不再需要类，并且比率助手现在可以与任何 HTML 元素一起使用。
    • $embed-responsive-aspect-ratiosSass 映射已重命名为，其$aspect-ratios值已简化为包含类名和百分比作为key: value对。
    • 现在为 Sass 映射中的每个值生成并包含 CSS 变量。修改 上的--bs-aspect-ratio变量.ratio以创建任何自定义纵横比。

  • 打破 “屏幕阅读器”类现在是“视觉隐藏”类。

    • 将 Sass 文件从更改scss/helpers/_screenreaders.scss为scss/helpers/_visually-hidden.scss
    • 将and重命名为.sr-onlyand.sr-only-focusable.visually-hidden.visually-hidden-focusable
    • 重命名sr-only()和sr-only-focusable()混合为visually-hidden()and visually-hidden-focusable()。

  • bootstrap-utilities.css现在还包括我们的助手。不再需要在自定义构建中导入助手。

JavaScript

  • 删除 jQuery 依赖项并将插件重写为常规 JavaScript。

  • 打破所有 JavaScript 插件的数据属性现在都已命名，以帮助将 Bootstrap 功能与第三方和您自己的代码区分开来。例如，我们使用data-bs-toggle代替data-toggle.

  • 所有插件现在都可以接受 CSS 选择器作为第一个参数。您可以传递 DOM 元素或任何有效的 CSS 选择器来创建插件的新实例：

    var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfig可以作为接受 Bootstrap 的默认 Popper 配置作为参数的函数传递，以便您可以按照自己的方式合并此默认配置。适用于下拉菜单、弹出框和工具提示。

  • 的默认值fallbackPlacements更改['top', 'right', 'bottom', 'left']为更好地放置 Popper 元素。适用于下拉菜单、弹出框和工具提示。

  • _getInstance()从公共静态方法（如→ ）中删除了下划线getInstance()。