迁移到Bootstrap 5

版本 v5.0.1

RTL 文字大小重置

RTL现在还处于试验的阶段，可能会根据用户的反馈进行发展。如果你有什么 建议 也可以告诉我们

Sass

Sass变量、功能工具和mixin被重新命名为更具有逻辑性的名称，如： start 和 end 代替 left 和 right。

组件

• 将 .dropleft 和 .dropright 重命名为 .dropstart 和 dropend。
• 将 .dropdown-menu-*-left 和 .dropdown-menu-*-right 和 .dropright 重命名为 .dropdown-menu-*-start 和 .dropdown-menu-*-end。
• 将 .bs-popover-left 和 .bs-popover-right 重命名为 .bs-popover-start 和 .bs-popover-end。
• 将 .bs-tooltip-left 和 .bs-tooltip-right 重命名为 .bs-tooltip-start 和 .bs-tooltip-end。
• 将 .carousel-item-left 和 .carousel-item-right 重命名为 .carousel-item-start 和 .carousel-item-end。

对齐

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

因此，特定于断点的变量也被重命名（例如， .text-md-start 被替换成 .text-md-left）。

混合组件

• 将 border-left-radius() and border-right-radius() 重命名为 border-start-radius() and border-end-radius() 以及它们的边角变量（例如 .border-bottom-left-radius 半径变为 .border-bottom-start-radius。
• 将 caret-left() 和 caret-right() 重命名为 caret-start() 和 caret-end()而且, caret() mixin 现在将 start 和 end 作为参数，而不是 left 和 right。

变量

• 如果你在RTL中需要一个不同的面包屑分隔符，那么你可以创建一个新的 $breadcrumb-divider-flipped 。
• 将 $navbar-brand-margin-right 重命名为 $navbar-brand-margin-end.
• 将 $pagination-margin-left 重命名为 $pagination-margin-start.
• 将 $form-check-padding-left 重命名为 $form-check-padding-start.
• 将 $form-switch-padding-left 重命名为 $form-switch-padding-start.
• 将 $form-check-inline-margin-right 重命名为 $form-check-inline-margin-end.
• 将 $form-select-feedback-icon-padding-right 重命名为 $form-select-feedback-icon-padding-end.

JavaScript 脚本

• 所有JavaScript插件的数据属性现在都有命名空间，你可以快速的将bootstrap、第三方以及你自己的代码区分开来。例如，bootstrap使用 data-bs-toggle 而不是 data-toggle。
• 更新 Popper 至 v2.x:
  • bootstrap的工具提示(Tooltip)/弹出框(Popover)和下拉菜单(Dropdown)删除了 offset 选项；但是依然 可以使用 popperConfig 参数来实现
  • fallbackPlacement 选项已将变成了 fallbackPlacements.

Sass

• 将 scale-color() 函数重命名为 shift-color() ，以避免与Sass自己的颜色缩放函数冲突。

实用工具

• 添加了新的 .translate-middle-x 和 .translate-middle-y 实用工具，用以水平或垂直居中绝对/固定定位元素。

组件

面包屑导航

• 通过删除 padding，background-color 和 border-radius 填充，简化了面包屑导航的默认外观，
• 添加了新的CSS自定义属性 --bs-breadcrumb-divider ，无需重新编译CSS即可轻松自定义。

弹出框

• 借助定位工具，现在可以将弹出框放置在 .toast-container 中。

版本 v5.0.0-alpha3

不支持IE浏览器

• 放弃了对微软Edge Legacy的支持。在这里可以看到以前浏览器支持的变化。

Sass

• 使用 color-level() 和 $theme-color-interval 的颜色系统被删除，取而代之的是新的颜色系统。 代码库中所有的 lighten() 和 darken() 函数都被 tint-color() 和 shade-color()所取代。这些功能可以将混合颜色与白色或黑色，而不是改变其亮度的固定数量。 scale-color() (在Beta 1中更改为 shift-color() )将根据其权重参数是正还是负使颜色变浅或变暗。更多细节请参见 #30622。
• 旋转器现在可以通过减慢动画速度来使用 prefers-reduced-motion: reduce，请参见 #31882 。

重新启动

• 引入 $enable-smooth-scroll，它应用于 scroll-behavior: smooth，除非用户通过 prefers-reduced-motion 媒体查询请求简化运动。 请参阅 #31877

按钮

• 删除了.btn-block，支持CSS网格实用工具类。 不再把 .btn-block 应用到单个按钮上，一组按钮现在被包裹在一个父类 .d-grid 中，并且可以使用 .gap-* 实用工具来设置间距。单个“按钮块”，可以添加 .w-100。

表单

• 通过向带有验证的输入组中添加额外的 .has-validation 类，最终修复了带有验证反馈的输入组上长期缺少的边框半径的错误。
• 将浮动标签示例提升为完全支持的表单组件。 请参阅新的浮动标签页面。
• 文件输入现在使用 .form-control 类，不需要JavaScript、额外的HTML或额外的类。 请参阅 #31955。
• 添加 cursor:pointer 到 .form-control-color 颜色输入框中.

实用工具

• 文本实用工具:
  • 增加了实用工具(启用了RFS) .fs-* 给 font-size 。它们使用与HTML默认标题相同的比例(1-6，从大到小)，并且可以通过Sass map进行修改。
  • 为了简洁和一致，将 .font-weight-* 实用工具重命名为 .fw-*
  • 为了简洁和一致，将 .font-style-* 实用工具重命名为 .fst-* 。
• 添加了 .d-grid 来显示实用工具
• 为CSS网格布局添加了新的 gap 实用工具（.gap）

版本 v5.0.0-alpha2

Sass

• 为每个 border-radius 混合添加了默认参数，请参见 #31571。
• 仅针对 xs 断点时更新了下一个断点。请参见 #31500.
• box-shadow 混合了现在允许的 null 值，并且不从多个参数中删除任何值。请参见 #30394

文档

• 重命名“Navs”页面为“Navs & Tabs”
• 将 “Screen readers” 帮助页重命名为 “Visually hidden”，将文件名重命名为 visually-hidden
• 将 “Checks” 页面重命名为 “Checks&radios”，将文件名重命名为 checks-radios
• 改进了复选/单选框的按钮组的文档
• 改进了我们文档中的跳过链接。
• 重新设计了文档导航，可在移动设备上使用更大的点击目标，并简化了子导航。
• #31114: 改进了可访问性方面的表单文档。

布局

• 容器水平填充已更新，以匹配 .row 的栅格大小。
• #31439: 由于网格行为的退化，从行中删除了 flex: 10 100%。

重新启用

• 更新了 th 样式以使用字体粗细和继承 text-align 的默认 null，而不是显式设置。

颜色

• 撞色比从3:1到4.5:1。
• 将 $black 设置为颜色对比色，而不是 $gray-900。
• 改进 $green （及其主题别名 $success）颜色以达到新的最小颜色对比度（从 #28a745 移动到 #198754）。
• 改进了 $cyan （及其主题别名 $info）颜色，使其更具活力（从 #17a2b8 改为 #0dcaf0）。

表单

• #31383: 调整复选框和单选框的大小为 1em，而不是 1.25em，以使他们更好地缩放自定义 $font-size-base 值和更多。

组件

徽章

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

按钮

• #30639: 由于 button-variant() 的mixin中有额外的参数，按钮的禁用状态更容易自定义。
• #30989: 更新按钮，以确保增加悬停和活动状态的对比度。

轮播效果

• 轮播图控件的人字形图标替换为Bootstrap Icons中的新SVG。
• 增加了新的.carousel-dark 变量，用于黑色文本、控件和指示器(适合较亮的背景)。

关闭按钮

• 将 .close 重命名为 .btn-close ，以减少通用名称。
• 关闭按钮现在使用 background-image（嵌入式SVG）代替了 ×。 在HTML中，无需触摸标记即可轻松进行自定义。
• 添加新变量以更好地控制自定义。
• 增加了新的 .btn-close-white变量，使用滤镜: filter: invert(1)，使更高的对比度消除图标对黑暗的背景。

折叠面板

• #31346: 移除手风琴折叠面板的滚动锚定。

下拉菜单

• 增加了新的 .dropdown-menu-dark变量和随需下拉菜单的相关变量。
• 为 $dropdown-padding-x 增加了新的变量.
• 使得下拉分隔线变暗，以提高对比度。

导航栏

• #31035: 在.nav-link类中添加了 font-size， font-weight， color， :hover 和 color 的新 null 变量。

分页组件

• 向分页链接添加了 transition。 请参见 #31396.

Pop 提示

• 将 whiteList 选项重命名为 allowList。

弹出框

• #31109: 设置默认toast持续时间5秒。
• #31155:在显示toast之前清除 timeout。
• #31381: 从吐司中消除了 overflow: hidden，并用 calc() 函数替换为适当的 border-radius。
• 更新了文档，以包括有关如何自定义和弹出框主题的其他示例。

提示工具

• 将 whiteList 选项重命名为 allowList。

提供帮助者

• 响应式嵌入助手已经被重命名为ratio helpers，并且有了新的类名和改善的表现，以及一个有用的CSS变量。
  • 类已重命名以将 by 的纵横比更改为 x， 例如， .ratio-16by9 现在为 .ratio-16x9。
  • 我们放弃了 .embed-responsive-item 和元素组选择器，取而代之的是更简单的 .ratio > * 选择器。 不需要更多的类，并且ratio助手现在可以与任何HTML元素一起使用。
  • $embed-responsive-aspect-ratios Sass映射已重命名为 $aspect-ratios ，其值已简化为包含类名和百分比作为 key: value 的一对。
  • 现在，将为CSS变量中的每个值生成并包含CSS变量。修改 .ratio 上的 --aspect-ratio 以创建任何自定义纵横比。
• “屏幕阅读器”类现在是“可视隐藏”类。
  • 将Sass文件从 scss/helpers/_screenreaders.scss 更改为 scss/helpers/_visually-hidden.scss
  • 将 .sr-only 和 .sr-only-focusable 重命名为 .visually-hidden 和 .visually-hidden-focusable
  • 将 sr-only() 和 sr-only-focusable() mixins 重命名为 visually-hidden() and visually-hidden-focusable().

实用工具

• #31280: 为 right, bottom, 和 left添加了新的定位实用工具。 每个属性的值包括 0, 50%, 和 100%。
  • 我们还添加了新的 translate 实用工具，以在定位元素时将这些定位实用工具与居中元素一起使用。
  • 一些优秀的示例已添加到文档中以进行展示。
• #31484: 增加了新的 border-width 工具.
• #31473: .d-none 实用工具已在我们的CSS中移动，以使其比其他显示实用工具更笨重。
• 将 .text-monospace 重命名为 .font-monospace.
• 删除了 .text-hide ，因为它是用于隐藏不再使用的文本的过时方法。
• 新的 line-height 工具: .lh-1, .lh-sm, .lh-base 和 .lh-lg. 参见 here.

---

版本 v5.0.0-alpha1

浏览器支持

有关Bootstrap 5当前支持的功能的详细信息，请参见浏览器和设备页面。从v4开始，以下是对我们的浏览器支持的更改：

• 已放弃对Internet Explorer 10和11的支持
• 已放弃对Microsoft Edge < 16的支持
• 放弃对Firefox < 60的支持
• 放弃对Safari的支持 < 10
• 不再支持iOS Safari < 10
• 放弃对Chrome < 60 的支持
• 放弃对Android < 6 的支持

Sass

更改了我们的源Sass文件和已编译的CSS。

• 移除了 hover, hover-focus, plain-hover-focus, 和 hover-focus-active mixins。使用常规的CSS语法继续向前。 请参见 #28267.
• 删除以前不推荐使用的混合
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide() (也删除了相关的实用工具类, .text-hide)
  • visibility()
  • form-control-focus()
• 在 scss/forms/ 下重新排列了表单源文件。 有关更多细节，请参阅表单部分。
• 删除了打印样式和 $enable-print-styles 变量。 但是，打印展示类仍保持不变。请参见 #28339.
• 放弃了 color(), theme-color() & gray() 函数，而赞成使用变量。 请参见 #29083
• theme-color-level() 函数重命名为 color-level() ，现在可以接受所需的任何颜色，而不仅仅是 $theme-color 颜色。 请参见 #29083 当心： color-level() 后来被放到 v5.0.0-alpha3 中。
• $enable-grid-classes 不再禁用容器类的生成请参见 #29146
• 为简洁起见，将 $enable-prefers-reduced-motion-media-query 和 $enable-pointer-cursor-for-buttons 重命名为 $enable-reduced-motion 和 $enable-button-pointers 。
• 行高从几个组件中降低，以简化我们的代码库。 button-size() 和 pagination-size() 不再接受行高的参数。 请参见 #29271
• 现在，对于每个按钮状态， button-variant() mixin接受3个可选的颜色参数，以覆盖 color-contrast() 提供的颜色。 默认情况下，这些参数将通过 color-contrast() 查找哪种颜色与按钮状态的背景颜色形成更大的对比度。
• 现在， button-outline-variant() 混合函数接受一个附加参数 $active-color，用于设置按钮的活动状态文本颜色。 默认情况下，此参数将使用 color-contrast() 查找哪种颜色与按钮的活动背景颜色提供更多的对比度。
• 抛弃Sass贴图合并，这使得删除冗余值更加容易。 请记住，您现在必须在Sass映射中定义所有值，例如 $theme-colors。 了解如何处理 Sass地图 。
• 由于 color-yiq() 函数和相关变量不再与YIQ颜色空间相关，因此已重命名为 color-contrast() 。 请参见 #30168.
  • $yiq-contrasted-threshold 已经重命名为$min-contrast-ratio.
  • $yiq-text-dark 和 $yiq-text-light 分别重命名为 $color-contrast-dark 和 $color-contrast-light。
• 启用渐变后，将简化线性渐变，因此， gradient-bg() 现在仅接受可选的 $color 参数。
• 删除了 bg-gradient-variant() 混合，因为现在可以使用 .bg-gradient 类而不是 .bg-gradient-* 类来向元素添加渐变。
• media-breakpoint-down() 使用断点本身而不是下一个断点。 使用 media-breakpoint-down(lg) 而不是 media-breakpoint-down(md) 来定位小于lg断点的视口。
• media-breakpoint-between() mixin的第二个参数还使用了断点本身，而不是下一个断点。 使用 media-between(sm, lg) 而不是 media-breakpoint-between(sm, md) 来定位 sm 和 lg 断点之间的视口。
• 现在， box-shadow() 混合更好地支持 none 和具有多个参数的 null 。 您可以传递带有两个值的多个参数，并获得预期的输出。 请参见 #30394.
• 现在，每个 border-radius() mixin都有一个默认值。 现在，您可以在不指定边界半径值的情况下调用这些混合，而将使用 $border-radius 变量。 请参见 #31571

JavaScript 脚本

更改了我们的源代码和已编译的JavaScript文件。

• 删除jQuery依赖关系，并将插件重写为常规JavaScript。
• 从公共静态方法中删除了下划线， 像 _getInstance() → getInstance().

颜色体系

我们已经更新了颜色系统，该系统可为Bootstrap提供动力，以改善颜色对比度并提供更多的颜色。

• 更新了蓝色和粉红色的基本色(-500)，以确保WCAG 2.1 AA对比度。
• 为每种颜色添加了新的色调和阴影，为每种基本颜色提供了9种单独的颜色，作为新的Sass变量。
• 为了支持我们的颜色系统，我们添加了新的自定义 tint-color() 和 shade-color() 函数以适当地混合我们的颜色。

网格和布局

更改任何布局工具和我们的网格系统。

• 删除了 .media 组件，因为它可以使用实用工具类进行构建。 请参见 #28265.
• 删除了 position: relative 于网格列的位置。
• 将水平填充连续添加到直接子级中，而不是添加到列本身中。
  • 这简化了我们的代码库。
  • 列类现在可以独立使用。 只要在 .row 以外使用它们，就不会添加水平填充。
• 响应式栅栏类可用于控制水平，垂直或两个方向上的栅栏宽度。
• 栅栏宽度现在以 rem 设置，从 30px 减小到 1.5rem （24px）。
• bootstrap-grid.css 现在仅将 box-sizing: border-box 用于列，而不是重置全局box-sizing。 即使没有将 box-sizing: border-box 应用于每个元素，也可以通过这种方式使用网格系统。

内容, 重新启用, 等

更改重新启动，版式，表格等。

• RFS 启用以自动缩放字体大小。 请参见 #29152
• 将 <ul> 和 <ol> 元素上的默认水平 padding-left 从浏览器默认 40px 重置为 2rem。
• 简化表格样式(不再有奇怪的顶部边框)和收紧单元格填充。
• 嵌套表不再继承样式。
• 删除.thead-light 和 .thead-dark 而是使用 .table-*变量，该类可用于所有表元素(thead, tbody, tfoot, tr, th 和 td)。
• table-row-variant() 混合重命名为 table-variant() ，并且仅接受2个参数： $color （冒号名称）和 $value （颜色代码）。 边框颜色和强调颜色是根据表格系数变量自动计算的。
• 将表单元格填充变量分为-y 和 -x。
• 删除了 .pre-scrollable 类。 请参见 #29135
• .text-* 实用工具不再向链接添加悬停和焦点状态。 可以改用 .link-* 辅助类。 请参见 #29267
• 删除 .text-justify 类. 请参见 #29793

排版

• 删除了新的 $display-font-sizes 映射的 $display-* 变量。
• 删除了单个 $display-font-weight 的各个 $display-*-weight 变量。
• 添加了两种新的 .display-* 标题样式： .display-5 和 .display-6。
• 调整现有显示标题的大小，以使 font-size 稍微更一致。
• 除非链接是特定组件的一部分，否则默认情况下，链接会带下划线（不仅仅是悬停）。

表单

• 在其自己的顶级部分下重新排列了表单文档。
  • 将旧的“表单”页面拆分为几个子页面
  • 在新的“表单”部分下移动了输入组文档
• 在 scss/forms/ 下重新排列了源Sass文件，包括了在输入组样式上移动。
• 将本机和自定义复选框和单选框组合到一个单一的 .form-check 类中
  • 新的复选框现在可以支持通过 em/font-size 或明确的修饰符类进行大小调整。
  • 新的复选框在默认情况下显得更大，以提高可用性。
  • 删除 .custom-control 和它所关联的类。
  • 将大多数 $custom-control 变量重命名为 $form-control 变量。
• 将本机选择和自定义选择组合到 .form-select 中
  • 删除了 .custom-select 和它所关联的类。
  • 将大多数 $custom-select 变量重命名为 $form-select 。
• 更新了具有相同总体设计的文件输入组件，但改进了HTML。
  • 重构的 .form-file 标记可解决一些视觉错误，同时允许通过HTML（而非CSS）更改翻译和按钮文本。
  • 完全删除了本机 .form-control-file 和 .form-control-range 组件。
  • 将 .custom-file 重命名为 .form-file （包括变量）。 当心： .form-file 后来被放到 v5.0.0-alpha3 中，现在您可以使用 .form-control了。
  • 增加了对 :focus 和 :disabled 样式的支持。
• 已将 .custom-range 重命名为 .form-range （包括变量）。
• 删除了用于边距实用工具的 .form-group （我们将文档示例替换为 .mb-3）。
• 删除 .form-row 以获取更灵活的栅栏网格。
• 删除 .form-inline以实现更灵活的网格。
• 在 .input-group 中不再支持 .form-control-plaintext。
• 已删除 .input-group-append 和 .input-group-prepend。您现在只需添加按钮和 .input-group-text 作为输入组的直接子元素。
• 表单标签现在需要 .form-label 类。Sass变量现在可以根据您的需要设置表单标签的样式。 请参阅 #30476

组件

• 警报弹出框，面包屑导航，卡片，下拉菜单，列表组，弹出模态框，弹出窗口和提示工具的统一 padding 值均基于 $spacer 变量。 请参阅 #30564.

禁用状态

• 按钮的禁用状态，关闭按钮，分页链接和表单范围现在分别添加了 pointer-events: none。 这简化了我们的代码库，并使覆盖CSS中的活动状态更加容易。 #29296.

警告弹出框

• 删除了 .alert-* 类变量中 <hr> 元素的自动变暗。 <hr> 使用 rgba() 作为其颜色，因此无论如何它们自然应该融合在一起。

徽章

徽章进行了大量修改，以更好地与按钮区分开来，更好地利用实用工具类。

• 删除并用后台实用工具类替换了 .badge 修饰符类（例如，使用 .instead of 代替 .badge-primary）
• 为 .badge-pill 实用工具类删除了 .badge-pill。
• 删除了 a.badge 和 button.badge 的徽标的悬停和焦点样式。

按钮

• 从按钮插件中删除了复选框/单选按钮，转而使用仅CSS的解决方案，该格式在复选框/单选按钮的文档中进行了说明。 可以将 .btn-check 类添加到输入中，任何具有 .btn 和修饰符类的标签都可以用作标签的主题。 请参阅 #30650.

卡片

• 移除了卡片栏，取而代之的是砖石网格 请参阅 #28922.
• 移除了卡片组，有利于网格，增加了响应行为的灵活性

大屏幕

• 删除了大屏幕的组件，以使用实用工具类（例如 .bg-light 作为背景色）和 .p-* 来控制填充。

导航栏

• 现在，所有导航栏都需要在其中放置一个容器。 这极大地简化了间距要求，并消除了我们在v4中的响应容器中需要添加大量CSS的需求。

分页组件

• 分页链接现在具有可定制的 margin-left，当它们彼此分开时，会在所有角上动态圆角化。

Pop 提示

• 将 .arrow 重命名为 .popover-arrow

提示工具

• 将 .arrow 重命名为 .tooltip-arrow

可访问性

• 与仅与 .sr-only 结合使用的旧的 .sr-only-focusable不同， .sr-only-focusable 可以用作没有 .sr-only的独立类。 请参阅 #28720.

实用工具

网格

• 减少每个断点的响应订单实用工具的数量。 现在带有数字的最高排序实用工具是 .order-5，而不是 .order-12。 请参阅 #28874.

杂项

• 添加了 .bg-body ，可快速将 <body> 的背景设置为其他元素。
• 默认情况下，负保证金实用工具处于禁用状态。 您可以通过设置 $enable-negative-margins: true 来重新启用它们，但是请记住，这会大大增加文件大小。

文档

• 删除了“浏览器错误墙”页面，因为它已过时
• 从Jekyll切换到Hugo

构建工具

• 更新了所有devDependencies
• 在撰写本文时，我们仅支持最新的Node.js LTS版本10和12。