跳到主要内容 跳到文档导航

使用 Bootstrap 的 CSS 自定义属性进行快速和前瞻性的设计和开发。

Bootstrap 在其编译的 CSS 中包含许多CSS 自定义属性(变量),用于实时自定义,而无需重新编译 Sass。在浏览器的检查器、代码沙箱或一般原型设计中工作时,这些提供了对常用值的轻松访问,例如我们的主题颜色、断点和主要字体堆栈。

我们所有的自定义属性都带有前缀bs-以避免与第三方 CSS 冲突。

根变量

以下是我们包含的变量(注意:root是必需的),可以在加载 Bootstrap 的 CSS 的任何地方访问。它们位于我们的_root.scss文件中并包含在我们编译的 dist 文件中。

默认

这些 CSS 变量随处可用,与颜色模式无关。

:root {
    scroll-behavior: smooth;
  }

组件变量

Bootstrap 5 越来越多地使用自定义属性作为各种组件的局部变量。通过这种方式,我们减少了编译的 CSS,确保样式不会在嵌套表格等地方继承,并允许在 Sass 编译后对 Bootstrap 组件进行一些基本的重新样式化和扩展。

查看我们的表格文档,了解我们如何使用 CSS 变量。从 v5.2.0 开始,我们的导航栏也使用 CSS 变量。我们还在我们的网格中使用 CSS 变量——主要用于新的可选 CSS 网格的列间距——未来会有更多的组件使用。

只要有可能,我们就会在基本组件级别分配 CSS 变量(例如,.navbar用于导航栏及其子组件)。这减少了对自定义位置和方式的猜测,并允许我们的团队在未来的更新中轻松修改。

前缀

大多数 CSS 变量使用前缀来避免与您自己的代码库发生冲突。前缀--是每个 CSS 变量所需前缀。

通过Sass $prefix变量自定义前缀。默认情况下,它设置为bs-(注意结尾的破折号)。

例子

CSS 变量提供与 Sass 变量类似的灵活性,但在提供给浏览器之前不需要编译。例如,这里我们使用 CSS 变量重置页面的字体和链接样式。

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

网格断点

虽然我们将网格断点包含为 CSS 变量(除了xs),但请注意CSS 变量在媒体查询中不起作用。这是 CSS 变量规范中的设计,但在未来几年可能会随着对env()变量的支持而改变。查看此 Stack Overflow 答案以获得一些有用的链接。同时,您可以在其他 CSS 情况下以及在 JavaScript 中使用这些变量。