Bootstrap-5-Customization-and-Theming

字数统计: 2.7k阅读时长: 11 min

 2026/07/29 

第33课：Bootstrap 5 定制与主题——Sass 变量覆盖、工具类、实用 API

Bootstrap 5 的默认样式可以满足大多数场景，但真实项目往往需要与品牌视觉保持一致。Bootstrap 5 提供了三个层面的定制能力：CSS 变量（自定义属性）覆盖、Sass 变量和映射、以及实用 API（Utility API）。通过组合这些工具，可以系统性地修改颜色、间距、圆角、字体等全局设计令牌，打造专属的主题系统，而不必写冗余的覆盖样式。本节课将深入这三种定制机制的原理与实战。

1. CSS 变量覆盖：最轻量的定制方式

Bootstrap 5 内部大量使用 CSS 自定义属性（CSS 变量）来定义颜色、字体、圆角等。全局变量定义在 :root 上，组件级变量定义在组件选择器上。你可以直接覆盖这些变量来改变默认样式，无需编译 Sass。

/* 在引入 Bootstrap CSS 之后，覆盖根变量 */
:root {
  --bs-primary: #ff6b35;
  --bs-primary-rgb: 255, 107, 53;
  --bs-body-font-family: 'Noto Sans SC', system-ui, sans-serif;
  --bs-border-radius: 0.5rem;
}

1.1 Bootstrap 5 的核心 CSS 变量体系

变量类别	示例变量	作用范围
主题颜色	`--bs-primary`、`--bs-danger`	所有组件的主色调。
RGB 颜色	`--bs-primary-rgb`	用于 `rgba()` 透明度场景（如阴影、遮罩）。
字体	`--bs-body-font-family`	全局正文字体。
圆角	`--bs-border-radius`	按钮、卡片、输入框等的默认圆角。
间距	`--bs-gutter-x`	栅格列间距。

1.2 覆盖主题颜色的完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 变量覆盖</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --bs-primary: #e63946;
      --bs-primary-rgb: 230, 57, 70;
      --bs-success: #2a9d8f;
      --bs-success-rgb: 42, 157, 143;
      --bs-body-bg: #f8f9fa;
    }
    .btn-primary {
      --bs-btn-bg: var(--bs-primary);
      --bs-btn-border-color: var(--bs-primary);
    }
  </style>
</head>
<body class="p-4">
  <button class="btn btn-primary">自定义主色按钮</button>
  <button class="btn btn-success">自定义成功色按钮</button>
  <div class="bg-primary text-white p-3 mt-3 rounded">自定义背景色</div>
</body>
</html>

注意事项：

必须同时覆盖 RGB 值（如 --bs-primary-rgb），否则依赖 rgba() 的样式（如 .btn 的聚焦阴影、.shadow）会失效。
CSS 变量覆盖的优先级高于 Bootstrap 默认值，因为自定义样式表在 Bootstrap 之后加载。
此方式适合 CDN 引入 Bootstrap 的项目，无需构建工具。

2. Sass 变量和映射：系统性的主题定制

当需要彻底改变整套设计令牌（如生成多套主题、修改大量组件参数）时，Sass 变量是最强大的工具。Bootstrap 5 的源码使用 Sass 编写，所有视觉属性都通过变量控制。

2.1 安装 Bootstrap 5 的 Sass 源文件

1	npm install bootstrap

在你的 Sass 入口文件中：

// 1. 先覆盖 Bootstrap 默认变量
$primary: #e63946;
$success: #2a9d8f;
$font-family-base: 'Noto Sans SC', system-ui, sans-serif;
$border-radius: 0.5rem;
$border-radius-lg: 0.75rem;

// 2. 再引入 Bootstrap
@import "bootstrap/scss/bootstrap";

顺序至关重要：变量覆盖必须在 @import 之前，因为 Bootstrap 使用 !default 标记——仅当变量未被定义时才使用默认值。

2.2 核心 Sass 变量一览

变量类别	示例变量	说明
颜色	`$primary`、`$danger`	主题颜色，用于生成调色板。
字体	`$font-family-base`	基础字体栈。
字号	`$font-size-base`	根字号（默认 1rem = 16px）。
间距	`$spacer`、`$spacers` 映射	间距单位（默认 1rem），生成 m/p 工具类。
圆角	`$border-radius`	默认圆角大小。
按钮	`$btn-padding-y`、`$btn-border-radius`	按钮的内部参数。
卡片	`$card-border-radius`、`$card-cap-bg`	卡片样式参数。
表单输入	`$input-btn-padding-y`	输入框和按钮共享的垂直内边距。

2.3 修改 Sass 映射（Map）

Bootstrap 使用 Sass 映射（$theme-colors、$spacers 等）来生成大量工具类和组件变体。你可以向映射中添加或删除条目。

扩展现有映射（不破坏默认值）：

// 在 @import 之前
$theme-colors: (
  "primary": $primary,
  "success": $success,
  "danger":  $danger,
  "brand":   #8e44ad   // 新增自定义颜色
);

$spacers: (
  6: $spacer * 4,       // 新增 6 级间距（4rem）
  7: $spacer * 5        // 新增 7 级间距（5rem）
);

这样即可自动生成 .btn-brand、.bg-brand、.text-brand、.m-6、.p-7 等新工具类。

完全替换映射：

$theme-colors: (
  "main": #2c3e50,
  "accent": #e74c3c,
  "neutral": #95a5a6
);
// 此时 .btn-primary 等不再存在，需使用 .btn-main

注意：完全替换会移除 Bootstrap 默认的所有颜色，可能导致依赖默认颜色的组件（如 .alert-primary）失效。务必在替换前评估影响。

2.4 启用/禁用组件

Bootstrap 5 允许通过变量控制哪些组件被编译到最终的 CSS 中，减少文件体积。

// 仅引入需要的组件
$enable-cssgrid: true;          // 启用 CSS Grid 系统（默认 false）
$enable-shadows: true;          // 启用阴影工具类
$enable-negative-margins: true; // 启用负 margin 类

// 排除不需要的组件
$include-accordion: false;
$include-carousel: false;
$include-popover: false;
$include-toasts: false;

@import "bootstrap/scss/bootstrap";

3. 实用 API（Utility API）：生成自定义工具类

Bootstrap 5 引入了一个强大的 Sass API，允许你以编程方式生成自定义工具类。这是框架最底层的定制机制，适合构建大型设计系统。

3.1 了解 `$utilities` 映射

Bootstrap 所有工具类（m-*、p-*、text-*、bg-* 等）都由 $utilities 映射定义。每个工具类对应一个条目：

// Bootstrap 内部定义（简化示例）
$utilities: (
  "margin": (
    property: margin,
    class: m,
    values: map-merge($spacers, (auto: auto)),
    responsive: true
  ),
  "padding": (
    property: padding,
    class: p,
    values: $spacers,
    responsive: true
  ),
  "background-color": (
    property: background-color,
    class: bg,
    values: map-merge($theme-colors, (body: $body-bg, white: white, transparent: transparent))
  )
);

3.2 添加自定义工具类

// 在 @import 之前
$utilities: map-merge(
  $utilities,
  (
    // 新增一个 "opacity" 工具类：.opacity-0 ~ .opacity-100
    "opacity": (
      property: opacity,
      class: opacity,
      values: (
        0: 0,
        25: .25,
        50: .5,
        75: .75,
        100: 1,
      ),
      responsive: true
    ),
    // 新增一个 "cursor" 工具类：.cursor-pointer 等
    "cursor": (
      property: cursor,
      class: cursor,
      values: (
        auto: auto,
        pointer: pointer,
        grab: grab,
        not-allowed: not-allowed,
      )
    )
  )
);

@import "bootstrap/scss/bootstrap";

生成的类：.opacity-0、.opacity-md-50、.cursor-pointer、.cursor-grab 等。

3.3 修改或禁用现有工具类

// 禁用所有 rounded 工具类
$enable-rounded: false;

// 或仅从 utilities 中移除某类（更精细控制）
$utilities: map-remove($utilities, "rounded", "shadow");

4. 综合实战：使用 Sass 构建品牌主题

假设需要创建一个公司品牌主题：主色 #1a73e8（蓝色），圆角较小（4px），全局正文字体为 Inter。

项目结构：

src/
  scss/
    _variables.scss    // 变量覆盖
    main.scss          // 入口文件
  index.html

**_variables.scss**：

// 颜色
$primary: #1a73e8;
$secondary: #5f6368;
$success: #0f9d58;
$danger: #ea4335;

// 字体
$font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 0.9375rem; // 15px

// 圆角
$border-radius: 0.25rem;
$border-radius-lg: 0.375rem;

// 按钮
$btn-padding-y: 0.5rem;
$btn-padding-x: 1.25rem;
$btn-font-weight: 500;

// 阴影
$enable-shadows: true;
$box-shadow: 0 1px 3px rgba(0,0,0,0.08);
$box-shadow-lg: 0 4px 12px rgba(0,0,0,0.12);

**main.scss**：

1 2	@import "variables"; @import "bootstrap/scss/bootstrap";

编译命令（使用 Vite 或 Webpack）：

1	npx sass src/scss/main.scss dist/css/theme.css

课后练习

一、概念自测（选择题 / 填空题）

（单选） 在通过 CSS 变量覆盖 Bootstrap 主题色时，为什么还需要同时设置 --bs-primary-rgb？
A. 它是备用的回退值。
B. Bootstrap 的 rgba() 场景依赖 RGB 值生成半透明颜色。
C. 它用于生成深色模式。
D. 没有实际作用，只是规范要求。
（单选） 在 Sass 中覆盖 Bootstrap 变量时，必须将覆盖声明放在 @import 之前的理由是？
A. Sass 语法要求。
B. Bootstrap 变量使用 !default，只对未定义的变量赋值。
C. 放在后面会编译错误。
D. 放在后面会使文件体积变大。
（填空） Bootstrap 5 的 Sass 工具类生成系统被称为 ______，它定义了所有工具类的属性、类名、值映射。
（判断） 使用 CSS 变量覆盖 Bootstrap 主题色时，可以直接修改 --bs-primary 而不需要重新编译 Sass。
A. 正确
B. 错误

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要为一个项目定制 Bootstrap 5 主题。要求如下：

使用 CSS 变量覆盖方式（CDN 引入 Bootstrap，无需编译）。
主色改为 #4f46e5（靛蓝色），成功色改为 #059669（翠绿色）。
全局背景色改为 #fafafa。
默认圆角改为 0.375rem（6px）。
正文字体改为 'Segoe UI', system-ui, sans-serif。
按钮改为圆角 8px，并添加轻微阴影。
页面上展示一个按钮（主色）、一个成功提示框（.alert-success）、一个带主色背景的卡片，验证自定义主题效果。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的完整 HTML 文件。提示词中需明确指定覆盖的变量名称、各组件展示方式。

课后练习答案

一、概念自测答案

B
- 解析：Bootstrap 大量使用 rgba(var(--bs-primary-rgb), 0.5) 等半透明场景，若不同时覆盖 RGB 值，这些样式将失效。
B
- 解析：Bootstrap 的 Sass 变量使用 !default 标记，仅在变量未定义时才赋值。提前声明即可覆盖。
Utility API（或 $utilities）
- 解析：Bootstrap 5 引入的 Utility API 通过 $utilities Sass 映射定义和生成所有工具类。
A（正确）
- 解析：CSS 自定义属性可直接在浏览器的样式表中覆盖，无需构建步骤。这也是 CDN 引入时最推荐的定制方式。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请生成一个使用 Bootstrap 5 CDN 的页面，通过 CSS 变量覆盖定制主题。要求：

引入 Bootstrap 5 CDN 的 CSS。

在 <style> 中覆盖以下 CSS 变量：

--bs-primary: #4f46e5; --bs-primary-rgb: 79, 70, 229;

--bs-success: #059669; --bs-success-rgb: 5, 150, 105;

--bs-body-bg: #fafafa;

--bs-border-radius: 0.375rem;

--bs-body-font-family: 'Segoe UI', system-ui, sans-serif;

为按钮额外设置 --bs-btn-border-radius: 0.5rem; --bs-btn-box-shadow: 0 2px 4px rgba(0,0,0,0.1);

页面展示：一个 <button class="btn btn-primary"> 主要操作按钮、一个 <div class="alert alert-success"> 成功提示框、一个 <div class="card"><div class="card-body bg-primary text-white"> 主色卡片。

所有样式变更仅通过 CSS 变量完成，不写任何自定义 CSS 选择器。代码简洁，注释说明每个变量的作用。直接输出完整 HTML 文件。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/07/29/Bootstrap-Customization/

发表日期：July 29th 2026, 3:00:00 am

更新日期：July 28th 2026, 10:27:15 am

Next Post

Tailwind-CSS-Philosophy-and-Configuration
Previous Post

Bootstrap-5-Common-Components-Navbar-Cards-Modals

CATALOG

1. 第33课：Bootstrap 5 定制与主题——Sass 变量覆盖、工具类、实用 API