Bootstrap

Bootstrap 博客

关于 Bootstrap 的所有新闻和公告，包括新版本、Bootstrap 主题 和 Bootstrap 图标。

Bootstrap 5.2.1

@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 处置的工具提示出现问题
    • 修复了在调用 toggle() 时 trigger: "manual" 显示并立即隐藏的问题

依赖项

  • 更新了 Autoprefixer 以修复 color-adjust 属性的警告（感谢我们团队的 @julien-deramond 在这里上游报告问题）

文档

  • 通过搜索字段现在始终在响应式、窄视窗上可见，改进了在移动设备上搜索我们的文档
  • 从整个代码库中删除了指向 Slack 的链接和对 Slack 的提及，因为我们打算关闭 Slack，转而使用 GitHub Discussions
  • 当 :not(:focus-visible) 时，为文档代码示例和按钮重新引入了正确的 outline 样式

再见，Slack！

正如一个月前提到的，我们决定关闭我们的社区 Slack 频道。Slack 不适合管理大规模社区，而且对于像我们这样规模的社区来说，成本过高（Slack 上有超过 45,000 人！）。我们建议大家使用 GitHub 上的 Discussions 选项卡，而不是 Slack 或类似工具。

探索 Bootstrap 讨论

示例仓库

Examples

一定要查看（双关语！）我们最新的项目，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 - 通过 Parcel 使用 Sass、JS
  • Vite - 通过 Vite 使用 Sass、JS
  • Bootstrap 图标字体 - 导入和编译 Sass、Stylelint、PurgeCSS 和我们的图标字体

有新的入门示例想法吗？ 欢迎提交问题或 Pull Request！

v4 入门项目

npm starter

我们发布了 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

npm i bootstrap@v5.2.1

阅读 GitHub v5.2.1 变更日志，以获取此版本中所有更改的完整列表。

支持团队

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

相关帖子