BS5 CSS 变量

学习使用 Bootstrap 5 的 CSS 自定义属性（变量）来覆盖主题颜色和样式。 · 难度：入门 · +15XP

CSS 变量简介

Bootstrap 5 使用 CSS 自定义属性（变量）来定义主题颜色、字体、间距等。你可以在不修改源码的情况下，通过重新声明变量来定制主题。

常用变量

代码示例

<style>
  :root {
    --bs-primary: #ff6600;
    --bs-body-bg: #f0f0f0;
  }
</style>
<button class='btn btn-primary'>自定义橙色按钮</button>

练习提示

在右侧代码中，在 style 标签内覆盖 --bs-primary 和 --bs-border-radius 变量，观察按钮和卡片圆角的变化。