Bootstrap 5.2.0的详细介绍

Bootstrap v5.2.0终于稳定了!我们解决了更多的错误，改进了更多的文档，编写了新的指南，建立了新的功能环境范例，还有更多！请继续阅读测试版和稳定版的亮点。

继续阅读，了解测试版和稳定版的亮点。

文档的重新设计

正如我们在测试版中所预览的那样，文档已经被重新设计了从我们的新主页开始，我们对Bootstrap的功能有了更完整的表述，并更新了设计：

文档侧边栏的导航已被彻底修改，以使浏览更容易，一个全新的带有搜索历史的DocSearch体验，以及在移动端侧边栏和导航栏的新的响应式offcanvas抽屉：

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

更新按钮和输入

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

大量的新的CSS变量

我们几乎所有的组件现在都有CSS变量，以实现真正的实时定制，更容易的主题化，以及（很快）从黑暗模式开始的颜色模式支持。你可以在每个文档页面上看到有哪些CSS变量，比如我们的按钮：

scss --#{$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 ，以解决原始地图的更新没有应用到扩展它的二级地图的问题。这并不理想，但它解决了人们在使用定制地图时的一个长期存在的问题。

例如，对$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构建现在应该是这样的，有一个单独的地图导入：

```diff // 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-* 帮助器来设置一个具有对比前景的background-color ，而不是设置单独的.text-* 和.bg-* 实用程序，color 。

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

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

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

响应性的offcanvas

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

新的实例库和指南

从测试版开始，我们已经完全重写了我们的Webpack指南和Parcel指南。我们还增加了一个新的Vite指南：

此外，我们还在新的twbs/examplesrepo中把这些指南中的每一个都变成了一个功能齐全的例子。我们甚至还在该库中增加了几个例子，并计划创建更多的例子：

• 启动器- 我们的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图标

每个指南都与该repo中的一个新例子相匹配，而且几乎所有的例子都可以在StackBlitz中立即使用。现在你甚至不需要在你的电脑上配置开发环境就可以开始使用Bootstrap。

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

还有更多!

• 引入了新的$enable-container-classes 选项：- 现在，当选择实验性的CSS Grid布局时，.container-* 类仍将被编译，除非该选项被设置为false 。容器现在也保持它们的沟槽值。

• 更厚的表格分隔线现在可以选择加入：- 我们删除了表格组之间较厚且较难覆盖的边框，并将其移至一个你可以应用的可选类，.table-group-divider 。请看表格文档中的例子。

• Scrollspy已经被重写以使用交叉点观察者API，这意味着你不再需要相对的父级包装器，废弃了offset 配置，以及更多。希望你的Scrollspy实现能在导航高亮中更加准确和一致。

• 增加了.form-check-reverse 修改器，以翻转标签和相关复选框/收音机的顺序。

• 通过新的.table-striped-columns 类，增加了对表格的条纹列支持。

• 增加了一个新的实验性保留数据属性data-bs-config，可以将简单的组件配置作为JSON字符串存放。

• 为Scrollspy添加了新的smooth-scroll 。

获取版本

前往https://getbootstrap.com获取最新信息，它也被推送到了npm：

sh npm i [email protected]