Bootstrap

Bootstrap 博客

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

Bootstrap 5.2.0

@mdo 2022 年 7 月 19 日

Bootstrap v5.2.0 终于稳定了！ 我们修复了更多错误，改进了更多文档，编写了新的指南，构建了新的功能环境示例，等等！

继续阅读以了解 beta 版和稳定版中的亮点。

文档重新设计

正如我们在 beta 版中预览的那样，文档已经重新设计了！ 它从 我们新的主页 开始，在那里我们对 Bootstrap 的功能有更完整的展示，以及更新的设计。

New homepage

文档侧边栏导航已全面改进，以始终展开组以方便浏览，全新的 DocSearch 体验，包括搜索历史记录，以及全新的响应式侧边栏抽屉，用于移动设备上的侧边栏和导航栏。

New docs page

New search

我们甚至更新了导航栏中的版本选择器，以在次要版本之间进行交叉链接！

Docs version picker

更新的按钮和输入

随着我们的文档重新设计，我们使用修改后的 padding 和 border-radius 刷新了按钮和输入。 以下是 我们按钮 的前后对比。

Updated buttons

大量新的 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 变量进行自定义的示例。

Custom button

新增 _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

新的辅助工具和实用程序

我们更新了我们的辅助工具和实用程序，使您能够更轻松地快速构建和修改自定义组件

  • 添加了新的 .text-bg-{color} 辅助工具。现在，您可以使用 .text-bg-* 辅助工具 来设置具有对比前景 color 的 background-color，而不是设置单独的 .text-* 和 .bg-* 实用程序。

  • 扩展了 font-weight 实用程序，以包括用于半粗体字体的 .fw-semibold。

  • 扩展了 border-radius 实用程序，以包括两个新的尺寸 .rounded-4 和 .rounded-5，以提供更多选项。

随着 v5 的开发继续，预计这里会有更多改进。

响应式画布

我们的画布组件现在具有 响应式变体。原始的 .offcanvas 类保持不变——它在所有视口中隐藏内容。要使其响应式，请将该 .offcanvas 类更改为任何 .offcanvas-{sm|md|lg|xl|xxl} 类。

新的示例仓库和指南

自 beta 版以来，我们已经完全重写了我们的 Webpack 指南 和 Parcel 指南。我们还添加了一个新的 Vite 指南。

Bootstrap guides

此外，我们已将所有这些指南都变成了我们新的 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 - 通过 Parcel 使用 Sass 和 JS
  • Vite - 通过 Vite 使用 Sass 和 JS
  • Bootstrap 图标字体 - 通过图标字体导入 Bootstrap 图标

每个指南都对应着该仓库中的一个新示例，几乎所有示例都可以在 StackBlitz 中直接使用。现在，您甚至不需要在计算机上配置开发环境就可以开始使用 Bootstrap。

Examples StackBlitz repo

我们还提到了几乎所有代码片段现在都有一个在 StackBlitz 中打开的按钮吗？

Code snippets 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

npm i bootstrap@v5.2.0

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

支持团队

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

相关帖子