Bootstrap 5.1.0

@mdo 2021 年 8 月 4 日

Bootstrap 的第一个次要版本发布了！v5.1.0 已经发布，并包含许多令人兴奋的新功能和改进。其中包括对 CSS Grid 的实验性支持、导航栏中的 Offcanvas、新的占位符组件、水平折叠支持、新的辅助工具、实用程序中的新 CSS 变量、重构的 JavaScript 等等。

跳转到某个部分

CSS Grid
导航栏中的 Offcanvas
占位符
水平折叠
堆叠和垂直规则辅助工具
新的 CSS 变量
更新的 .bg-* 和 .text-* 实用程序
四个新的示例
模态框和画布背景

CSS Grid

我们添加了一个实验性的新 CSS 网格作为我们默认网格系统的可选替换。要启用它，请禁用默认网格，方法是设置 $enable-grid-classes: false 并通过设置 $enable-cssgrid: true 启用 CSS 网格。重新编译后，您就可以切换到新的类。我们的新 CSS 网格文档页面包含所有详细信息和一些有用的示例，可以帮助您入门。

将 CSS 网格支持作为实验性功能发布，使我们能够在不破坏向后兼容性的情况下进行一些尝试。请帮助我们测试它并分享反馈。我们预计它将在未来的次要版本中稳定下来，以便广泛使用。

阅读 Bootstrap CSS 网格文档 以获取更多信息。

导航栏中的 Offcanvas

我们扩展了 .navbar-expand-* 类（看看我们做了什么？），以包括对导航栏内画布的支持。将您的导航栏元素用适当的画布 HTML 包裹，将您的导航栏切换按钮指向画布，瞧！

前往画布导航栏文档 以获取更多信息和实时演示。

占位符

城里有一个新组件，它带有占位符，这是一种在真实内容出现之前提供临时块的方法，以帮助指示您的网站或应用程序中某些内容仍在加载。我们在这里的第一个迭代旨在仅提供 HTML 和 CSS——由您来使用您可能需要的任何自定义代码来实现这些占位符。

考虑上面显示的基本 Bootstrap 卡片组件。

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

这是用发光的占位符条重建的，以指示某些内容仍在加载。

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

前往占位符文档 以了解更多信息。

水平折叠

天哪，我们终于添加了对水平折叠的官方支持！折叠插件已经能够检测 width 与 height 一段时间了（即使在 v4 中），但直到现在我们才在我们的文档中有一个有效的示例。添加 .collapse-horizontal 修饰符类以转换 width 而不是 height，并在直接子元素上设置 width。

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
  Toggle width collapse
</button>

<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

注意！您可能需要一些 min-height 或 height 来避免过度浏览器的重绘，正如我们在上面的演示中所包含的那样。

堆叠和垂直规则辅助工具

虽然实用程序如今占据了大部分关注，但辅助工具仍然非常有用。我们最新的辅助工具称为堆栈，它们是元素垂直和水平堆栈的快捷方式。它们受到开源 Pylon 项目的启发，该项目反过来又受到 iOS 堆栈的启发。现在，堆栈没有响应性，但这可以根据您的反馈轻松更改。

要创建垂直堆叠，请将一系列元素包装在.vstack中。在父元素上使用.gap-*实用程序（或设置单独的margin实用程序）以快速间隔元素。

Bootstrap vstack example

<div class="vstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

想要水平堆叠？使用.hstack代替。

Bootstrap vstack example

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

为了支持这些堆叠，我们还添加了一个新的辅助程序——.vr，即垂直规则。HTML 最初就有了用于创建水平规则的原生<hr>元素，但从未有过用于垂直规则的元素。新的.vr辅助程序在水平堆叠和其他border难以处理的情况中非常有用。

Bootstrap vstack example

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

在堆叠辅助程序文档中了解更多信息。

新的 CSS 变量

我们已将:root CSS 变量扩展到包括我们的灰色调色板、新的<body>变量以及我们主题颜色新的RGB变量。灰度颜色加入我们现有的颜色和主题颜色变量，以完成全局可用 CSS 颜色的集合。随着 v5 开发的进行，这些变量将在我们的组件中越来越多地使用，以更好地实现全局主题。

说到这里，我们新的<body> CSS 变量现在控制着<body>的样式。这是您在编译后的 CSS 中会发现的内容

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

与我们所有其他:root CSS 变量一样，这些变量的值是从我们的 Sass 变量生成的。这意味着无论您如何自定义 Bootstrap——通过 Sass 或 CSS 变量——您都不会丢失任何功能或便利性。

阅读 CSS 变量自定义文档以获取更多信息。

更新的 `.bg-` 和 `.text-` 实用程序

我们新的 RGB 值旨在帮助我们在整个项目中更好地利用 CSS 变量。首先，我们的background-color和color实用程序已更新为使用这些新的 RGB 值，以便在不重新编译 Sass 的情况下进行实时自定义，并为任何背景或文本颜色提供即时透明度。

以下是我们的.bg-*和.text-*颜色实用程序在编译后的样子

.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

我们使用每种颜色的 CSS 变量的 RGB 版本，并附加第二个 CSS 变量--bs-text-opacity或--bs-bg-opacity，用于 alpha 透明度（由于规则集中的本地 CSS 变量，默认值为1）。这意味着现在您每次使用.text-primary时，计算出的color值都是rgba(13, 110, 253, 1)。每个.text-*类中的本地 CSS 变量有助于避免在嵌套这些类的实例时出现继承问题。

为了支持这些更改，我们添加了一些新的.text-opacity-*和.bg-opacity-*实用程序。从一组预定义的类（您可以在实用程序 API 中修改）中选择，以在使用给定的.text-*或.bg-*实用程序时快速更改本地 CSS 变量。例如

Bootstrap text opacity example

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

我们预计这种方法将在接下来的border实用程序中得到应用。您想看到更多添加的 CSS 变量吗？在 GitHub 上分享您对新问题的想法。前往颜色实用程序或背景实用程序文档了解更多信息。

四个新的示例

Bootstrap examples

我们扩展了组件示例，增加了四个新的示例，这些示例自定义了我们的一些核心组件并实现了常见模式。以下是新增内容：

探索我们所有的示例以了解更多信息。

我们对用于模态框和画布组件的背景的类名进行了变量化。这带来了一个新的画布背景类，.offcanvas-backdrop，更重要的是，一些更新的z-index值。

以前，由于画布共享模态框的背景，模态框和模态框背景之间只有一个画布z-index。

// Before v5.1.0
$zindex-modal-backdrop:       1040 !default;
$zindex-offcanvas:            1050 !default;
$zindex-modal:                1060 !default;

我们更改了这一点，允许画布和模态框通过为画布、画布背景、模态框和模态框背景设置单独的z-index值来更好地协同工作。

// After v5.1.0
$zindex-offcanvas-backdrop:   1040 !default;
$zindex-offcanvas:            1045 !default;
$zindex-modal-backdrop:       1050 !default;
$zindex-modal:                1055 !default;

除非您修改了画布组件或其 Sass 变量，否则您应该不会遇到任何重大更改。

还有更多！

此版本中还有很多内容，我们没有在上面的亮点中包含。

恢复了.col-*类覆盖.row-cols-*的能力，因为它在我们的布局中导致了一些重大错误。我们将重新审视并恢复它，当我们能够以更可扩展且易于维护的方式进行设计时。
添加了新的.opacity-*实用程序（默认值为0、.25、.5、.75和1）。
更新了几个 JavaScript 插件，进行了一些重大清理 - 警告、折叠、下拉菜单、弹出框和工具提示。
插件现在在getInstance方法中接受不同类型的参数。
为我们所有的颜色添加了新的 Sass 映射，以及一个新的map-merge-multiple()函数来组合 Sass 映射。
更新了模态框的data-dismiss，以便它可以使用bs-target位于模态框之外。
更新了吐司，以更改显示时间和类，以默认情况下保持吐司display: none。
为模态框和画布组件添加了Shift + Tab键盘支持。
将Build Tools页面重命名为Contribute，以更好地传达其目的。
修复了 Scrollspy 中的Manipulator.offset()，以改进滚动位置检测。
在文档中添加了实时警报示例。

获取发布版本

前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm

npm i bootstrap

查看 GitHub v5.1.0 版本发布变更日志，获取自上次发布以来的所有更改列表。

支持团队

访问我们的 Open Collective 页面或我们的团队成员的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。

Bootstrap 5.0.2

@mdo 2021 年 6 月 22 日

我们最新的补丁版本已经发布，用于改进我们的 JavaScript 插件，解决 Dart Sass 中的/ 弃用问题，修复一些 CSS 错误，并进行一些文档改进。

Sass 除法

Bootstrap v5.0.2 中最大的修复之一是修复了在 Sass 中使用/ 进行除法的弃用问题。Dart Sass 团队弃用了它，因为在实际 CSS 中使用了/ 字符（例如，分隔background 值）。坏消息是，这与弃用通知一起发布，在我们这里，这严重污染了所有人的构建过程。我们潜在的解决方案包括

完全忽略它并静默弃用警告
放弃对 LibSass 的隐式支持，并使用 Dart Sass 数学模块
找出自定义修复以保持尽可能广泛的 Sass 支持

我们选择了第三个选项——保持对 LibSass 和 Dart Sass 的支持，即使前者已弃用。许多项目还没有或无法更新到 Dart Sass（包括我们用来构建文档的 Hugo）。

我们的解决方案意味着滚动一个自定义的divide() 函数，并在可能的情况下用乘法替换除法。我们希望限制自定义函数的使用，因此我们将使用$value / 2 的情况替换为$value * .5。此自定义函数也已在 RFS 项目的新版本中添加。虽然我们编译的 CSS 中的精度减少了小数点后两位，但输出在其他方面保持不变。

如果您有任何关于进一步改进的想法或建议，请随时打开一个问题。

亮点

以下是更改日志中的一些亮点。

CSS

修复了 Sass 中 / 除法的弃用警告。将大多数 / 除法替换为乘法，并添加了一个自定义的 divide() 函数，以避免添加 Dart Sass 模块（因为这会抵消 LibSass 的使用）。
现在，单个 .col-* 网格类可以覆盖 .row-cols。
更新了浮动表单的 line-height，以修复选择菜单文本被截断的问题。
为 .form-select 添加了缺少的过渡。
修复了 RTL 中 .dropdowns-menu-* 的位置。
将 --bs-table-bg 和 --bs-table-accent-bg 解耦，以区分表格的强调色。
改进了 add() 和 subtract() 函数中对复杂表达式的支持。
修复了 Firefox 中选择元素的水平填充。
更新了弹出窗口标题的边框颜色，使其与外部边框匹配。
修复了 RTL 中的画布标题对齐问题。

JavaScript

弹出窗口现在会在标题或内容为空时将其删除，而不是返回空的 HTML 元素。
使用箭头键时，下拉菜单项现在会自动选中。
我们现在只在 onDOMContentLoaded 实用程序函数中注册一个 DOMContentLoaded 事件监听器。
修复了轮播滑动时箭头键中断动画的问题。
修复了嵌套元素触发的过渡事件的处理（例如，单击按钮时模态框不会过渡）。
修复了由于不必要的默认值和 removeChild 导致的过时的 body 引起的背景错误。
修复了 show.bs.modal 事件与 .fade 类一起使用时阻止模态框再次显示的问题。
修复了 isVisible 的误报。
在我们的基础组件中添加了 getOrCreateInstance 方法，该方法应用于所有组件。

文档

记录了如何使用 API 使实用程序响应式。还将 !important 添加到示例输出 CSS 中，并提到了 $enable-important-utilities 全局设置。
在迁移指南中添加了关于 v4 中断点混合更改的说明。
在文档中添加了一个定位徽章的新示例。
在自定义 > Sass 页面中澄清了变量覆盖。
将 Freenode 替换为 Libera IRC 服务器。

前往 GitHub 查看完整的v5.0.2 中的问题和拉取请求列表。您还可以查看v5.0.2 项目看板。

获取发布版本

前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm

npm i bootstrap

查看 v5.0.2 版本的更新日志以获取完整的更改列表。

支持团队

访问我们的 Open Collective 页面或我们的团队成员的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。

Bootstrap 5.0.1

@mdo 2021年5月13日

Bootstrap 5 的第一个补丁版本 v5.0.1 已经发布！我们修复了 CSS 和 JS 中的一些错误，同时还解决了一些文档和示例问题。

更新日志

修复了点击 <input> 后下拉菜单不会关闭的问题
.input-group 中的验证输入不再渲染在兄弟元素后面
防止 accent-bg 在嵌套表格中泄漏
模态框背景不再在通过 JS 初始化时抛出 Uncaught TypeError
将处置属性重构到基础组件中
将静态 DATA_KEY 和 EVENT_KEY 提取到基础组件中
将 transitionend 监听器回调合并到一个方法中
弹出框和工具提示有一个简化的配置属性
Toast 不会再在获得焦点或悬停时自动隐藏
不再在列表组循环中重新定义 $list-group-color

我们的文档和示例也进行了一些更新

修复了侧边栏示例在 Chrome 中无法正确渲染的问题
修复了 RTLCSS stringMap 配置代码片段
更新了侧边栏导航栏示例以防止控制台错误
修复了迁移指南中的各种拼写错误、语法错误和链接

前往 GitHub 查看完整的 v5.0.1 中的问题和拉取请求列表。您也可以查看 v5.0.1 项目看板。

获取发布版本

前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm

npm i bootstrap

查看 GitHub v5.0.1 版本的更新日志以获取自上次发布以来的完整更改列表。

支持团队

访问我们的 Open Collective 页面或我们的团队成员的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。

Bootstrap 图标 v1.5.0

@mdo 2021年5月10日

Bootstrap 图标 v1.5.0 添加了 45 个新图标，涵盖多个类别，我将继续完善这个集合。继续阅读以了解新内容！

45 个新图标

New icons in v1.5.0

此版本的首要目标是完善迄今为止最受欢迎的一些图标。以下是详细内容

首先是我们的破折号、加号、斜杠、X 和其他警示标志图标的大尺寸版本。现有的图标基于它们在其他形状中的位置，因此我添加了新的较大选项，而不是放大那些图标，这可能会给用户带来问题。
商业图标有了巨大更新，包括新的货币选项、银行、插入信用卡、保险箱/保险柜，甚至还有几个存钱罐。
对于人物和身份，我们添加了第一个性别图标，包括女性、男性、跨性别和不明性别。这仅仅是开始，因为我相信我遗漏了许多重要的性别和身份角色。如果这里有任何改进可以让我更具包容性，请提交问题反馈。
在通信方面，终于有了翻译图标和带斜杠的铃铛。
最后，还添加了新的 VR 头戴设备图标、几个新的地理位置图标，以及一些新的社交选项，例如 Messenger、Reddit、WhatsApp 等。

前往 Bootstrap 图标文档查看它们在实际中的效果。

安装

要开始使用，请通过 npm 安装或更新

npm i bootstrap-icons

您也可以从 GitHub 下载发布版本，或仅下载 SVG 和字体（不包含其他存储库文件）。

Figma

Figma 文件现已发布到 Figma 社区！它与您在以前版本中看到的Bootstrap 图标 Figma 文件相同，只是对于使用该应用程序的用户来说更容易访问。

Bootstrap 5

@mdo 2021 年 5 月 5 日

Bootstrap 5 正式发布！经过三个 Alpha 版本、三个 Beta 版本以及数月的努力，我们发布了新主版本的第一个稳定版本。这趟旅程充满了挑战，感谢我们的维护者以及使用和贡献 Bootstrap 的出色社区。感谢所有帮助我们走到今天的人！

继续阅读以了解与 v4 相比的新功能以及后续版本的功能。想要直接开始？访问新的 v5 文档 或直接使用 npm i bootstrap。

本文内容

新 logo！
新的 Offcanvas 组件
新的手风琴
新的和更新的表单
RTL 支持！
重新设计的实用程序
新的代码片段示例
网格和布局
更多组件更新
改进的自定义
Dart Sass
浏览器支持
JavaScript
迁移指南
获取发布版本
下一步
v5.1.0 预览
支持团队

新 logo！

v5 最大的变化之一是重新设计的 logo 和更新的文档设计。受我们在 Bootstrap Icons 中所做工作的启发，我们的新 logo 回溯到 CSS 的花括号和我们长期使用的 B 图标。这是一个小小的升级，但很有趣，我们认为它有助于为这个新的主版本定下基调。仍然是相同的 Bootstrap，只是略微改进。😅

还有新的文档更明亮，组织得更好，并包含新的内容部分，还具有改进的导航。

新的 Offcanvas 组件

我们新增的组件之一是全新的 Offcanvas！

基于我们的模态并共享其基本部分，我们的新 Offcanvas 组件带有可配置的遮罩、主体滚动和位置。Offcanvas 组件可以放置在视窗的顶部、右侧、底部或左侧。使用 data 属性或通过 JavaScript API 配置这些选项。

新的手风琴

我们已经用全新的 .accordion 组件替换了我们的 .card 手风琴组件，在此过程中修复了几个错误。我们的新手风琴仍然使用 Collapse JavaScript 插件，但使用自定义的 HTML 和 CSS 来支持它，它比以往任何时候都更好用、更容易使用。

新版手风琴包含 Bootstrap 图标作为指示状态和可点击性的 Chevron 图标。我们已包含对平铺手风琴的支持（添加 .accordion-flush）以删除外部边框，以便更容易地放置在父元素中。

访问新的文档页面以了解更多信息。

新的和更新的表单

我们已经彻底改造了我们的表单文档和组件。我们将所有表单样式整合到一个新的表单部分（包括输入组组件），以给予它们应有的重视。

除了新的文档页面之外，我们还重新设计并去除了所有表单控件的重复内容。在 v4 中，我们引入了大量自定义表单控件——复选框、单选按钮、开关、文件等等——但这些是在每个浏览器提供的默认值之外的。在 v5 中，我们已经完全自定义了。

复选框和单选按钮

如果您熟悉 v4 的表单标记，这看起来不会太陌生。通过一组表单控件，并专注于重新设计现有元素而不是通过伪元素生成新元素，我们拥有更加一致的外观和感觉。

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>

每个复选框、单选按钮、选择、文件、范围等等都包含自定义外观，以统一跨操作系统和浏览器的表单控件的样式和行为。这些新的表单控件都是基于完全语义的标准表单控件构建的——不再有冗余的标记，只有表单控件和标签。

浮动标签

New floating labels

浮动标签包括对文本输入、选择和文本区域的支持。我们在文本区域有一个限制，即多行文本可能会被浮动标签遮挡。我们正在努力解决这个问题，如果您有任何想法，请告诉我们！

新的文件输入

New file input

我们已经放弃了自定义的 .form-file 类，以便在 .form-control 类上添加额外的样式。这意味着我们不再需要额外的 JavaScript 来使我们的文件输入样式起作用——新的表单文件全部都是 CSS！

简化的布局

使用我们新的网格更新，表单布局比以往任何时候都更容易。我们已经放弃了 .form-group、.form-row 和 .form-inline，转而使用网格系统。

请务必探索新的表单文档，并告诉我们您的想法。

RTL 支持！

我们终于在 Bootstrap 中添加了 RTL 支持！从总体上来说，我们的 RTL 方法包括一些更改

我们 CSS 分发文件的全新 RTL 版本，其中包括我们的网格、重置、实用程序和标准捆绑包。查看内容页面以获取完整的文件列表。
全新的 RTL 文档，帮助您入门。
五个全新的 RTL 示例，展示了我们全新的 RTL CSS 的实际应用，将我们的相册、结账、轮播、博客和仪表板示例转换为全新的从右到左的等效示例。
两个全新的备忘单厨房水槽页面——默认备忘单用于我们的标准 CSS，以及 RTL 备忘单。

我们的方法基于 RTLCSS，这是一个很棒的项目，可以帮助重新处理现有的 LTR 样式表以用于 RTL。我们目前将其归类为实验性功能，预计我们可能会犯一些错误。我们希望社区能够帮助我们完善该功能，因为我们正在完成一些剩余的任务。

重新设计的实用程序

鉴于实用程序驱动的框架在过去几年中获得了广泛的关注，我们投入了更多精力，在 Bootstrap 中添加了更多实用程序，以及一种在项目中管理它们的新方法。

新的实用程序 API

我们在 Bootstrap 5 中实施了一个全新的实用程序 API，作为扩展 Bootstrap 默认实用程序类的主要方法。轻松生成和自定义实用程序，支持自定义类名，支持生成基于状态的类，例如 :hover、打印版本等等。

$utilities: () !default;
$utilities: map-merge(
  (
    // ...
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    // ...
    "opacity": (
      property: o,
      class: opacity,
      state: hover,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      )
    )
    // ...
  ), $utilities);

自从实用程序成为构建的首选方式以来，我们一直在努力寻找在 Bootstrap 中实施它们的正确平衡，同时提供控制和定制。在 v4 中，我们使用全局 $enable-* 类来实现这一点，并且我们甚至在 v5 中也延续了这种做法。但是，通过基于 API 的方法，我们在 Sass 中创建了一种语言和语法，可以动态创建自己的实用程序，同时还可以修改或删除我们提供的实用程序。

前往新的实用程序 API 文档了解更多信息。

新的实用程序

说到实用程序，我们已经向我们的武器库中添加了许多新的实用程序，包括

添加了定位实用程序：top、right、bottom 和 left，带有 0、50% 和 100% 值
添加了 .d-grid 选项，以及新的 gap 实用程序，用于简化网格布局
添加了 .fs 实用程序，用于 font-size
将 font-weight 实用程序重命名为 .fw
添加了 .rounded-1、.rounded-2 和 .rounded-3，用于新的小型、中型和大型 border-radius 实用程序
添加了 .overflow-visible 和 .overflow-scroll 实用程序

查看迁移指南和实用程序文档以了解更多详细信息。

用于间距实用程序的逻辑属性

我们在将 RTL 添加到 Bootstrap 的方法中，旨在以一种对我们自己和整个网络来说都具有未来友好性的方式添加它。因此，我们接受了 CSS 逻辑属性的精神，并**对几个类和变量进行了重命名**。这是一个冒险的改变，因为改变的规模和影响很大，但我们希望你总体上会喜欢它！

你们中的大多数人已经通过我们的弹性实用程序与逻辑属性进行了交互——它们用 start 和 end 替换了 left 和 right 等方向属性。像 align-items-end 这样的东西已经成为受欢迎的补充。这使得水平方向类名在 LTR 和 RTL 中都适用，而无需任何额外的开销。

例如，在 LTR 上下文中，不要使用 .ml-3 来表示 margin-left，而应该使用 .ms-3。请务必阅读 RTL 迁移指南，以获取重命名类和变量的完整列表。

新的代码片段示例

我们添加了四个全新的、以代码片段为主的示例，并在我们进行此操作时刷新了其他几个示例。这些新的代码片段示例展示了常见组件的几种变体，以不同的方式呈现，以便您可以轻松地复制和粘贴。

这些新的代码片段将随着时间的推移不断添加新内容，展示使用 Bootstrap 进行构建是多么有趣和容易。

我们还更新了我们的入门模板，它拥有焕然一新的设计和更多资源。

网格和布局

我们的网格系统和布局选项进行了一些更改，以简化和改进内容，主要包括

列类现在可以用作 width 实用程序（例如，.col-6 是 width: 50%），因为 .row 外部不再应用 padding。
新的间距实用程序可以响应式地自定义水平和垂直网格间距。间距宽度也已缩减至 1.5rem。
从列类中删除了 position: relative
放弃了 .media 组件以使用实用程序

我们还更新了我们的布局文档，将异常长的页面分解成更集中的主题。我们还添加了对断点、容器等的清晰解释。

查看迁移指南和布局文档以了解更多详细信息。

改进的自定义

我们深入研究并改进了我们的文档，在多个地方提供了更多解释，消除了歧义，并为扩展 Bootstrap 提供了更多支持。这一切都从一个全新的自定义部分开始。

Bootstrap 5 customize docs

v5 的自定义文档扩展了 v4 的主题页面，包含更多内容和代码片段，用于构建 Bootstrap 的源 Sass 文件。我们在这里完善了更多内容，甚至提供了一个入门 npm 项目，让您更快更轻松地开始。它也可以作为 GitHub 上的模板仓库使用，因此您可以自由地 fork 并使用。

Bootstrap 5 color palette

我们也在 v5 中扩展了调色板。内置了广泛的色彩系统，您可以更轻松地自定义应用程序的外观，而无需离开代码库。我们还做了一些工作来改善颜色对比度，甚至在我们的颜色文档中提供了颜色对比度指标。希望这将继续帮助使 Bootstrap 驱动的网站对所有人更易访问。

我们还在大多数页面中添加了新部分，以记录为每个组件提供支持的源 Sass 代码。变量、mixin、循环和映射都在每个页面中呈现并保持最新，使您在构建时更容易参考和自定义值。

Dart Sass

我们已切换到 Dart Sass，LibSass 已被弃用。我们已经用 Dart Sass 测试了我们的构建一段时间，并决定在 LibSass 被弃用仅仅几周后进行切换。我们目前保留了 Sass 模块。出于兼容性考虑，我们仍然没有使用新的模块系统，因为从 v4 升级的用户存在更大的差距。

浏览器支持

在此更新中，我们删除了许多旧版浏览器，使其成为我们一段时间以来最大的飞跃。

删除了 Microsoft Edge Legacy
删除了 Internet Explorer 10 和 11
删除了 Firefox < 60
删除了 Safari < 10
删除了 iOS Safari < 10
删除了 Chrome < 60
删除了 Android < 6

您可以在我们的 .browserslistrc 中找到完整的浏览器和设备支持。

JavaScript

我们 JavaScript 的最大变化是删除了 jQuery，但我们也做了一些其他改进。

不再使用 jQuery！
所有插件现在都可以接受 CSS 选择器作为第一个参数。
更新到 Popper 2！
所有 JavaScript 插件的数据属性现在都使用 bs 命名空间。例如，我们使用 data-bs-toggle 而不是 data-toggle。
随着 Popper v2 的到来，我们彻底改造了下拉菜单、弹出框和工具提示的放置。
吐司定位也进行了彻底改造，现在利用了我们新的定位实用程序。
添加了使用自定义类为工具提示和弹出框的能力。
对代码进行了各种优化，以便更好地在组件之间共享代码。
将下拉菜单更改为在 .dropdown-toggle 而不是 .dropdown 上发出事件。
从公共静态方法（如 _getInstance()）中删除下划线，改为 getInstance()。
将弹出框和工具提示中的 whiteList 重命名为 allowList。

迁移指南

我们更新了迁移指南页面，将六个预发布版本中的所有更改合并到一个更改集中。我们以这种方式压缩了大部分内容，并在整个过程中添加了重大更改标签，以帮助您在升级时注意潜在的问题。

我们仍然认为这里还有很多工作要做，包括关于代码更改的教程式指南、依赖项的差异和代码片段等。如果您有任何建议或想贡献，请打开一个问题或拉取请求。

前往 GitHub 查看完整的 v5.0.0 中的问题和拉取请求列表。您还可以查看 v5.0.0 项目看板。

获取发布版本

前往 https://bootstrap.ac.cn 探索新版本。 我们还在 npm 上发布了此更新作为我们的最新版本，因此，如果您想尝试一下或对新功能感到好奇，您可以通过这种方式获取最新版本。

npm i bootstrap

查看 GitHub v5.0.0 版本变更日志，了解自上次预发布版本以来的所有更改。

下一步

展望未来，我们还有一些其他版本即将发布。

Bootstrap v4.6.1
Bootstrap 图标 v1.5.0
Bootstrap npm 启动器 v2.0.0，支持 Bootstrap 5
Bootstrap v5.0.1，用于解决我们初始版本中的后续错误
Bootstrap v5.1.0，用于我们的第一个次要功能版本

如果您对即将发布的版本有任何其他想法，请随时打开问题或拉取请求！

v5.1.0 预览

在我们完善此版本的同时，我们也着眼于未来，准备发布一些次要版本。以下是我们下一个次要版本 v5.1.0 中即将推出的功能的简要概述。

除此之外，我们还计划在接下来的几个版本中发布更多功能和更新！请查看我们GitHub 上的项目，了解更多信息。

支持团队

访问我们的 Open Collective 页面或我们的团队成员的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。

更早更新

Bootstrap 博客

Bootstrap 5.1.0

CSS Grid

导航栏中的 Offcanvas

占位符

水平折叠

堆叠和垂直规则辅助工具

新的 CSS 变量

更新的 .bg-* 和 .text-* 实用程序

四个新的示例

模态框和画布背景

还有更多！

获取发布版本

支持团队

Bootstrap 5.0.2

Sass 除法

亮点

CSS

JavaScript

文档

获取发布版本

支持团队

Bootstrap 5.0.1

更新日志

获取发布版本

支持团队

Bootstrap 图标 v1.5.0

45 个新图标

安装

Figma

Bootstrap 5

新 logo！

新的 Offcanvas 组件

新的手风琴

新的和更新的表单

复选框和单选按钮

浮动标签

新的文件输入

简化的布局

RTL 支持！

重新设计的实用程序

新的实用程序 API

新的实用程序

用于间距实用程序的逻辑属性

新的代码片段示例

网格和布局

更多组件更新

改进的自定义

Dart Sass

浏览器支持

JavaScript

迁移指南

获取发布版本

下一步

v5.1.0 预览

支持团队

更新的 `.bg-` 和 `.text-` 实用程序