@mdo 2022 年 10 月 3 日
Bootstrap v5.2.2 已发布，包含新的错误修复和文档更新 - 继续阅读以了解发生了哪些变化！
亮点
- 手风琴
- 使用 Sass 变量来设置手风琴颜色，而不是无效的 CSS 变量。
- 按钮
- 撤销 v5.2.1 中对
.btn:hover 的更改。我们现在明确地针对 .btn-check 样式。
- 下拉菜单
- 暂时恢复下拉菜单在没有显式
data 属性的情况下也能正常工作的能力（将在 v6 中再次移除）。
- 模态框
- 改进模态事件监听器
- 在我们的文档中，对所有
.modal-title 实例使用 <h1>
- 表格
- 不要在
table-variant() 混合中重新定义 $border-color
- 选项卡
- 选项卡不再自动获取焦点，并且在
tab.show() 时会导致页面跳动
- 修复下拉菜单中选项卡的
.active 类切换
- 吐司
- 在
.toast-container 上正确设置吐司 z-index，而不是在没有其他定位的单个 .toast 上设置
- 工具提示
- 修复在动态创建的元素上具有
title 属性的工具提示选择器
获取发布版本
前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm
阅读 GitHub v5.2.2 变更日志，以获取此版本中所有更改的完整列表。
支持团队
访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。
@mdo 2022 年 9 月 7 日
Bootstrap v5.2.1 包含了我们最新次要版本 v5.2 的修复。作为补丁版本，这些更改仅限于错误修复、文档更新和一些依赖项更新。
我们还继续迭代其他一些项目，以帮助人们使用 npm、其他 JS 框架和各种构建工具快速上手 Bootstrap。继续阅读以了解更多信息。
主要变更
我们更新了calc()函数，以解决postcss-values-parser中一个明显的错误，该错误阻止了我们在使用 React 和 PostCSS 构建时，源 Sass 文件正确编译。修复方法是反转calc()函数中乘法的顺序。请注意，您可能需要根据自己的自定义进行类似的修改。
我们还解决了一些关于按钮焦点和活动样式的长期问题，特别是对于复选框和单选按钮。在移动设备上，基于输入的按钮难以去除其焦点样式。在 v5.2.1 中，我们通过将 .btn 的 :focus 更改为 :focus-visible 来解决此问题。现在，复选框和单选按钮在 :focus-visible 上不再改变其 background-color，并且它们不会收到 :hover 样式。普通的 .btn 仍然具有其熟悉的悬停和焦点样式。
我们曾考虑不在 v5.2.1 中包含按钮焦点更改，但我们认为它足够重要，可以解决几个错误。请告诉我们您的想法，我们将继续改进我们的实现。
亮点
除了上述更改之外，我们还修复了多个组件中的错误
- 手风琴
- 更新
color 值以使用 $accordion-button-color Sass 变量，而不是我们的颜色对比度函数
- 按钮
- 为按钮添加了一个
transparent 默认悬停边框颜色 CSS 变量，以修复视觉回归
- 当
$enable-gradients 设置为 true 时，.btn-link 不再具有渐变
- 表单
- 输入组更新了
z-index 值，以确保正确渲染验证后的表单字段
- 浮动标签现在重置其
text-align，以确保一致的样式
- 列表组
- 只有一个子元素的水平列表组现在会渲染正确的
border-radius
- 修改了
list-group-item 选择器，以更好地支持 Bootstrap CSS 的嵌套导入
- 模态框
- 更新了事件监听器，以忽略滚动条点击、从
.modal-dialog 内部开始但在外部结束的点击，并响应从 .modal-dialog 外部开始和结束的点击
- 分页
- 修复了分页组件中不正确的
border-radius值
- 滚动侦测
- 工具提示和弹出框
- 恢复了一些工具提示插件更新，以防止
selector、动态内容和使用title处理的工具提示出现问题
- 修复了
trigger: "manual"在调用toggle()时显示并立即隐藏的问题
依赖项
文档
- 在移动设备上搜索我们的文档已得到改进，搜索栏现在在响应式、狭窄的视口中始终可见
- 从整个代码库中删除了对 Slack 的链接和提及，因为我们打算关闭 Slack 并改用 GitHub Discussions
- 为文档代码示例和按钮重新引入了正确的
outline样式，当:not(:focus-visible)时
再见，Slack！
正如一个月前提到的，我们决定关闭我们的社区 Slack 频道。Slack 不适合管理大型社区，而且对于我们这样规模的社区来说，成本过高（Slack 有超过 45,000 人！）。我们鼓励大家使用 GitHub 上的 Discussions 选项卡，而不是使用 Slack 或类似工具。
探索 Bootstrap 讨论
示例仓库
一定要查看（双关语！）我们最新的项目，twbs/examples 仓库！示例项目包含适用于各种环境和 JS 框架的功能演示，还有更多计划！您甚至可以在 StackBlitz 中打开每个示例并在浏览器中编辑它们。
- 入门 - 我们 CSS 和 JS 的 CDN 链接
- Sass & JS - 通过 npm 导入 Sass、Autoprefixer、Stylelint 和我们的 JS 包
- Sass & ESM JS - 通过 npm 导入 Sass、Autoprefixer 和 Stylelint，然后使用 shim 加载我们的 ESM JS
- Webpack - 使用 Webpack 导入和捆绑 Sass 和 JS
- Parcel - Sass、JS 通过 Parcel
- Vite - 使用 Vite 构建 Sass 和 JS
- Bootstrap 图标字体 - 导入和编译 Sass、Stylelint、PurgeCSS 以及我们的图标字体
您有新的入门示例想法吗？ 欢迎您提交问题或拉取请求！
v4 入门项目
我们发布了 twbs/bootstrap-npm-starter 项目 的 v2.0.0 更新。此版本包含 Bootstrap v4.6.2、Bootstrap 图标 v1.9.1、用于本地开发的新实时重载功能以及一些依赖项更新。此项目将继续专注于 Bootstrap 4，而我们的 twbs/examples 仓库将专注于 v5 和未来的主要版本。
获取发布版本
前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm
阅读 GitHub v5.2.1 变更日志 以获取此版本中所有更改的完整列表。
支持团队
访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。
@mdo 2022 年 7 月 19 日
Bootstrap v5.2.0 终于稳定了！ 我们修复了更多错误，改进了更多文档，编写了新的指南，构建了新的功能环境示例，以及更多其他内容！
继续阅读以了解 beta 版和稳定版中的亮点。
文档重新设计
正如我们在 beta 版中预览的那样，文档已经重新设计！它从 我们新的主页 开始，在那里我们对 Bootstrap 的功能进行了更完整的展示，并更新了设计。
文档侧边栏导航已全面改进，以始终展开组以方便浏览，全新的 DocSearch 体验，包括搜索历史记录，以及新的响应式抽屉，用于移动设备上的侧边栏和导航栏。
我们甚至更新了导航栏中的版本选择器，以在次要版本之间进行交叉链接！
在我们的文档重新设计中，我们刷新了按钮和输入，修改了padding和border-radius。以下是我们的按钮的之前和之后的样子 我们的按钮
大量新的 CSS 变量
几乎我们所有的组件现在都有 CSS 变量，用于真正的实时定制、更轻松的主题化，以及（很快）从暗模式开始的颜色模式支持。您可以在每个文档页面上看到可用的 CSS 变量，例如 我们的按钮
--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$body-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
几乎所有 CSS 变量的值都通过 Sass 变量分配，因此通过 CSS 和 Sass 的定制都得到了很好的支持。还包括几个组件的通过 CSS 变量进行定制的示例。
新的_maps.scss
Bootstrap v5.2.0 引入了一个新的 Sass 文件_maps.scss，它从_variables.scss中提取了几个 Sass 映射，以解决原始映射的更新未应用于扩展它的辅助映射的问题。这不是理想的，但它解决了人们在使用自定义映射时长期存在的问题。
例如，对$theme-colors的更新没有应用于依赖于$theme-colors的其他映射（如$utilities-colors等），这导致了定制工作流程的破坏。总结一下问题，**Sass 有一个限制，即一旦默认变量或映射被使用，就不能更新**。当 CSS 变量用于组合其他 CSS 变量时，也会出现类似的缺陷。
这也是为什么 Bootstrap 中的变量定制必须在@import "functions";之后，但在@import "variables";和我们导入堆栈的其余部分之前。Sass 映射也是如此——您必须在它们被使用之前覆盖默认值。以下映射已移至新的_maps.scss
$theme-colors-rgb$utilities-colors$utilities-text$utilities-text-colors$utilities-bg$utilities-bg-colors$negative-spacers$gutters
您自定义的 Bootstrap CSS 构建现在应该像这样，使用单独的映射导入。
// Functions come first
@import "functions";
// Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+ "custom": $custom-color
+ );
// Variables come next
@import "variables";
+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
// Rest of our imports
@import "mixins";
@import "utilities";
@import "root";
@import "reboot";
// etc
新的辅助工具和实用程序
我们更新了我们的辅助工具和实用程序，以便更容易地快速构建和修改自定义组件
随着 v5 的开发继续进行，预计这里会有更多改进。
响应式侧边栏
我们的侧边栏组件现在具有 响应式变体。原始的 .offcanvas 类保持不变——它在所有视窗中隐藏内容。要使其响应式，请将该 .offcanvas 类更改为任何 .offcanvas-{sm|md|lg|xl|xxl} 类。
新的示例仓库和指南
自测试版以来，我们已完全重写了我们的 Webpack 指南 和 Parcel 指南。我们还添加了一个新的 Vite 指南。
此外，我们已将所有这些指南都变成了我们新的 twbs/examples 仓库中的一个功能完备的示例。我们甚至在仓库中添加了几个其他示例，并计划创建更多示例。
- 入门 - 我们 CSS 和 JS 的 CDN 链接
- Sass & JS - 通过 npm 导入 Sass、Autoprefixer、Stylelint 和我们的 JS 包
- Sass & ESM JS - 通过 npm 导入 Sass、Autoprefixer 和 Stylelint，然后使用 shim 加载我们的 ESM JS
- Webpack - 使用 Webpack 导入和捆绑 Sass 和 JS
- Parcel - Sass、JS 通过 Parcel
- Vite - 使用 Vite 构建 Sass 和 JS
- Bootstrap 图标字体 - 通过图标字体导入 Bootstrap 图标
每个指南都与该仓库中的一个新示例相匹配，并且几乎所有示例都可以在 StackBlitz 中立即使用。现在，您甚至不需要在计算机上配置开发环境即可开始使用 Bootstrap。
我们还提到了几乎所有代码片段现在都有一个在 StackBlitz 中打开的按钮吗？
还有更多！
-
引入了新的 $enable-container-classes 选项。— 现在，当选择使用实验性 CSS Grid 布局时，.container-* 类仍将被编译，除非此选项设置为 false。容器现在也保留其间距值。
-
更厚的表格分隔线现在是可选的。— 我们已删除表格组之间更厚且更难覆盖的边框，并将其移动到您可以应用的可选类 .table-group-divider 中。 查看表格文档以获取示例。
-
Scrollspy 已重写 以使用 Intersection Observer API，这意味着您不再需要相对父级包装器，弃用 offset 配置等。查找您的 Scrollspy 实现，以确保其导航突出显示更准确且一致。
-
添加了 .form-check-reverse 修饰符以翻转标签和关联的复选框/单选按钮的顺序。
-
通过新的 .table-striped-columns 类，表格现在支持 条纹列。
-
添加了一个新的实验性 保留数据属性 data-bs-config，它可以将简单的组件配置作为 JSON 字符串存储。
-
为 Scrollspy 添加了新的 smooth-scroll。
获取发布版本
前往 https://bootstrap.ac.cn 获取最新版本。 它也已推送到 npm
阅读 GitHub v5.2.0 变更日志，以获取此版本中所有更改的完整列表。
支持团队
访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。
@mdo 2022 年 7 月 19 日
经过几个月的努力，我们终于发布了 Bootstrap v4.6.2，这是我们 v4 的最后一个版本之一。这是一个维护补丁，包含错误修复、依赖项更新和一些文档更新。
继续阅读以了解亮点，或 前往 v4.6.x 文档 以查看最新内容。
发生了什么变化
v4.6.2 中有两个主要亮点。
-
首先，我们在 Collapse 插件文档中添加了一个示例，展示如何使用水平折叠。这可以通过我们的 JS 实现很长时间，但我们从未有过官方类来使用它。
-
其次，作为 Autoprefixer v10.4.6 问题的一部分，我们用 print-color-adjust 替换了 Sass 文件中已弃用的 color-adjust。这应该可以解决人们从该依赖项更改中遇到的问题。如果您使用的是我们的发行版 CSS 文件，例如 bootstrap.min.css，您仍然可能会看到警告。
除此之外，我们还解决了一些其他问题。
- 调整了
small 和 .small 的大小，使其计算为一个完整的像素值（以前是 12.8px，现在是 14px）。
- 改进了我们下拉菜单、颜色对比度和
role 属性的无障碍性。
- 修复了一些指向支持文档的损坏链接。
- 更新了所有依赖项。
查看 GitHub v4.6.2 版本发布日志 获取更多详细信息。
从现在开始，我们预计不会发布任何对 v4.6.x 的重大更新，除了主要的安全性或依赖项更新。所有工作都将集中在 v5 及更高版本上，从 v5.2.0 的稳定版本开始。Bootstrap 4 将于 2023 年 1 月 1 日正式停止使用，但您当然可以继续使用它更长时间。关注我们的 发布仓库 以了解发布维护状态。
支持团队
访问我们的 Open Collective 页面 或我们的 团队成员 的 GitHub 个人资料，以帮助支持为 Bootstrap 做出贡献的维护者。
@mdo 2022 年 7 月 13 日
Bootstrap 图标 v1.9.0 现已发布，包含 140 多个新图标和更新图标，包括一些长期以来对新品牌、交通方式、数字和字母等的请求。随着此版本的发布，我们现在拥有 **超过 1,800 个图标**！
140 多个新图标
以下是 v1.9.0 中所有新图标的快速浏览
- 大量新的品牌图标，包括流行的浏览器、Ubuntu、Google Play、Android、Dropbox 等等。
- 新的交通图标，包括汽车、火车、飞机、燃料和常见的道路标志。
- 新的数字和字母图标，用于 1-9、R、C、CC、H 和 P（用于注册商标、版权、知识共享、医院或直升机和停车等用例）。
- 新的医疗图标，用于处方、药丸和病毒。
- 新的键盘图标，用于 Tab 和 Escape。
- 新的通用访问图标。
- 重绘的杯子图标，现在有蒸汽变体，用于热饮。
- 终于有了火！
里面还有更多，所以看看并在下次更新中使用它们！此外，我们更新了文档以包含对 Composer 安装的提及。
正在寻找更多新图标？前往 问题跟踪器 检查开放请求或提交新请求。
安装
要开始，请通过 npm 安装或更新
或 Composer
composer require twbs/bootstrap-icons
您也可以 从 GitHub 下载版本，或 仅下载 SVG 和字体（不包括其他存储库文件）。
Figma
Figma 文件现已发布到 Figma 社区！它是与之前版本相同的 Bootstrap Icons Figma 文件，只是对使用该应用程序的人来说更容易访问。
