Bootstrap V5.3 中文手册

定制化 Customize

Bootstrap 5.3 定制化指南：从基础到高级技巧

Bootstrap 作为最流行的前端框架之一，其强大之处不仅在于提供了一套美观的预制组件，更在于它提供了高度灵活的定制能力。无论您是需要微调样式，还是进行深度的主题定制，Bootstrap 5.3 都能提供相应的工具和方法。本篇将全面介绍 Bootstrap 5.3 的定制化功能，涵盖从全局选项到组件级别的详细定制。

1. Overview (概述)

Bootstrap 5.3 提供了多种定制方法，以适应不同的项目需求、构建工具复杂度和浏览器支持要求。定制 Bootstrap 主要有两种首选路径：

通过包管理器使用 Bootstrap：这种方式允许您使用和扩展 Bootstrap 的源文件（特别是 Sass 文件），从而进行深度定制。
使用 Bootstrap 的编译分发文件或 jsDelivr：这种方式下，您可以通过添加或覆盖 CSS 规则来修改样式，而无需直接处理源文件。

选择哪种方法取决于您的项目需求。如果您希望进行大规模样式修改或利用 Sass 的强大功能（如变量、混合宏、函数），那么使用源文件是更好的选择。如果只是进行少量调整，覆盖编译后的 CSS 可能更简单快捷。

Bootstrap 5.3 的定制化系统建立在一系列 Sass 变量、映射（Maps）和 CSS 自定义属性（CSS 变量） 之上，这使得从全局样式到单个组件样式的控制都变得可能。

2. Sass：定制化的核心

使用 Sass 是定制 Bootstrap 最强大、最灵活的方式。Bootstrap 5.3 的 Sass 架构包含大量的变量、映射和混合宏，让您可以全面控制框架的样式。

引入和设置

要使用 Sass 进行定制，首先需要在您的项目中安装 Bootstrap。通常可以通过 npm 完成：

npm install bootstrap

接着，在您的主 Sass 文件（例如 custom.scss）中，按正确的顺序引入 Bootstrap 的 Sass 文件，并在适当的位置覆盖默认值：

// 1. 首先引入函数（Functions）
@import "node_modules/bootstrap/scss/functions";

// 2. 覆盖默认变量
// 在此处放置您的变量覆盖
$primary: #8630b8; // 自定义主色
$custom-colors: (
  "custom": #df711b // 添加自定义颜色到颜色映射
);

// 3. 引入默认变量
@import "node_modules/bootstrap/scss/variables";

// 4. 引入映射（Maps）
// 从 Bootstrap 5.2.0 开始，引入了一个新的 _maps.scss 文件
// 这解决了对原始映射的更新未应用于扩展它的次级映射的问题
@import "node_modules/bootstrap/scss/maps";

// 5. 合并自定义映射到主题映射
// 例如，将自定义颜色合并到主题颜色中
$theme-colors: map-merge($theme-colors, $custom-colors);

// 6. 引入其余的Bootstrap部分
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/utilities";
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
// 引入其他需要的组件

// 7. 引入工具类（Utilities）
@import "node_modules/bootstrap/scss/utilities/api";

// 8. 添加您的自定义CSS
// 在这里添加您自己的样式规则

覆盖 Sass 函数

在某些高级定制场景下，您可能需要覆盖 Bootstrap 的 Sass 函数（如 color-contrast）。这可以通过在引入 Bootstrap 的 functions 之后、variables 之前重新定义函数来实现：

@import "node_modules/bootstrap/scss/functions";

// 重新定义函数以覆盖其行为
@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light) {
  // 您的自定义实现
}

// 然后继续引入variables和其他文件
@import "node_modules/bootstrap/scss/variables";

3. Options：全局配置选项

Bootstrap 5.3 提供了一系列全局 Sass 变量，通常称为 $enable-* 变量，用于启用或禁用特定功能。这些变量让您能够轻松切换全局 CSS 偏好设置，从而控制框架的整体样式和行为。

以下是一些重要的全局选项变量：

变量	默认值	描述
`$enable-dark-mode`	`true`	是否在整个项目及组件中启用内置的深色模式支持。
`$enable-rounded`	`true`	是否在各种组件上启用预定义的 `border-radius` 样式。
`$enable-shadows`	`false`	是否在各种组件上启用预定义的装饰性 `box-shadow` 样式。
`$enable-gradients`	`false`	是否通过各种组件上的 `background-image` 样式启用预定义渐变。
`$enable-transitions`	`true`	是否在各种组件上启用预定义的 `transition`。
`$enable-reduced-motion`	`true`	是否启用 `prefers-reduced-motion` 媒体查询，根据用户偏好抑制某些动画/过渡效果。
`$enable-grid-classes`	`true`	是否为网格系统生成 CSS 类（如 `.row`, `.col-md-1` 等）。
`$enable-container-classes`	`true`	是否为布局容器生成 CSS 类（Bootstrap 5.2.0 新增）。
`$enable-caret`	`true`	是否在 `.dropdown-toggle` 上启用伪元素插入符。
`$enable-button-pointers`	`true`	是否为非禁用按钮元素添加”手型”光标。
`$enable-validation-icons`	`true`	是否在文本输入和某些自定义表单的验证状态中启用 `background-image` 图标。
`$enable-negative-margins`	`false`	是否启用负边距工具类。
`$enable-important-utilities`	`true`	是否在工具类中使用 `!important` 后缀。
`$enable-smooth-scroll`	`true`	是否全局应用 `scroll-behavior: smooth`。

要覆盖这些选项，只需在引入 Bootstrap 的 variables 文件之前重新定义相应的变量：

// 覆盖默认变量
$enable-rounded: false; // 禁用圆角
$enable-shadows: true;  // 启用阴影
$enable-gradients: true; // 启用渐变

// 然后引入Bootstrap的variables
@import "node_modules/bootstrap/scss/variables";

4. Color：颜色系统

Bootstrap 5.3 拥有一个扩展的颜色系统，包括大量的 Sass 变量、CSS 变量和工具类。颜色系统基于主题颜色（theme colors） 和调色板（palette） 构建，您可以轻松地自定义它。

主题颜色

Bootstrap 定义了一组核心的主题颜色，这些颜色用于生成各种组件和工具类的颜色变体。默认的主题颜色包括：primary（主色）、secondary（次要色）、success（成功色）、danger（危险色）、warning（警告色）、info（信息色）、light（浅色）和 dark（深色）。

您可以通过覆盖 $theme-colors 映射来自定义这些颜色：

// 覆盖主题颜色
$primary: #8630b8; // 自定义主色
$secondary: #6c757d; 
$success: #198754;
// ...其他颜色

// 或者添加新的颜色到主题颜色映射
$custom-colors: (
  "custom": #df711b,
  "accent": #ff6b6b
);

$theme-colors: map-merge($theme-colors, $custom-colors);

调色板扩展

Bootstrap 5.3 大幅更新了其调色板，为前景色和背景色提供了新的二级、三级和强调色。主题颜色已扩展为包含微妙的背景色、微妙的边框色和更深的文本颜色。例如，对于主色（primary），现在有以下相关变量：

$primary-bg-subtle: 主色的浅背景变体
$primary-border-subtle: 主色的浅边框变体
$primary-text-emphasis: 主色的深文本变体

这些新的颜色变体使得创建更具视觉层次感和响应颜色模式的界面变得更加容易。

5. Color modes：颜色模式

Bootstrap 5.3 引入了对多种颜色模式的原生支持，包括浅色模式（light mode） 和深色模式（dark mode），甚至允许您创建自定义颜色模式。

启用颜色模式

颜色模式的支持默认是启用的（由 $enable-dark-mode 变量控制）。您可以通过在根 <html> 元素上设置 data-bs-theme 属性来明确选择颜色模式：

<!DOCTYPE html>
<html lang="en" data-bs-theme="dark"> <!-- 启用深色模式 -->
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap深色模式示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

使用 Sass 定制颜色模式

当使用 Sass 时，您可以通过 color-mode() 混合宏来生成颜色模式的样式。这个混合宏可以基于数据属性（默认） 或媒体查询来生成样式：

// 基于数据属性生成颜色模式样式（默认方式）
@include color-mode(dark) {
  // 深色模式下的自定义样式
  .custom-element {
    background-color: $dark-bg;
    color: $dark-text;
  }
}

// 或者基于媒体查询生成颜色模式样式
// 这对于根据系统偏好自动切换模式很有用
@include color-mode(dark, $media: true) {
  .custom-element {
    background-color: $dark-bg;
    color: $dark-text;
  }
}

创建自定义颜色模式

除了内置的浅色和深色模式，您还可以创建任意数量的自定义颜色模式。只需定义新的数据属性值，然后使用 color-mode() 混合宏为这些模式编写样式：

<html lang="en" data-bs-theme="custom"> <!-- 启用自定义颜色模式 -->

// 为自定义颜色模式定义样式
@include color-mode(custom) {
  --bs-body-bg: #f0f0f0;
  --bs-body-color: #333;
  .btn-primary {
    --bs-btn-bg: #your-custom-color;
    --bs-btn-border-color: #your-custom-color;
  }
  // 其他组件样式
}

6. Components：组件定制

Bootstrap 5.3 的每个组件都包含CSS 变量，这使得实时自定义和主题化变得更加容易。您可以在组件级别进行样式覆盖，而不影响全局样式。

组件级别的变量覆盖

每个组件页面都已更新，包含了相关 CSS 变量的参考指南。例如，按钮组件包含以下 CSS 变量：

--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
--#{$prefix}btn-font-size: #{$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);

您可以通过 Sass 或 CSS 来自定义这些变量，两种方式都得到良好支持。

使用 Sass 定制组件

在使用 Sass 时，您可以通过覆盖组件特定的变量来定制组件。例如，要修改按钮的边框半径和填充：

// 覆盖按钮变量
$btn-border-radius: 0.5rem;
$btn-border-radius-sm: 0.25rem;
$btn-border-radius-lg: 0.75rem;
$btn-padding-x: 1.5rem;
$btn-padding-y: 0.75rem;

// 然后引入Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

使用 CSS 定制组件

如果您使用编译后的 Bootstrap CSS，也可以通过 CSS 变量来定制组件：

:root {
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.75rem;
}

/* 或者针对特定颜色模式 */
[data-bs-theme="dark"] {
  --bs-btn-bg: #your-dark-mode-color;
  --bs-btn-border-color: #your-dark-mode-color;
}

7. CSS variables：CSS 自定义属性

Bootstrap 5.3 大量使用了 CSS 自定义属性（CSS 变量），这为实时自定义和主题化提供了强大支持。从 Bootstrap 5.2.0 开始，几乎所有组件都包含了 CSS 变量。

全局 CSS 变量

Bootstrap 5.3 在 :root 级别定义了大量的 CSS 变量，用于控制全局样式。这些变量涵盖了颜色、排版、间距、边框等方面：

:root {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-primary: #0d6efd;
  // ...更多变量
}

使用 CSS 变量进行实时定制

CSS 变量的一个主要优势是可以在浏览器中实时修改，而无需重新编译 Sass。这使得动态主题切换和实时样式调整成为可能：

// 通过JavaScript动态修改CSS变量
document.documentElement.style.setProperty('--bs-primary', '#8630b8');
document.documentElement.style.setProperty('--bs-body-bg', '#f8f9fa');

您也可以在内联样式中覆盖 CSS 变量：

<body style="--bs-body-color: #333;">
  <!-- 页面内容 -->
</body>

响应颜色模式的 CSS 变量

Bootstrap 5.3 中的许多组件已被更新为使用更多的全局 CSS 变量（如 --bs-border-color），以更好地响应颜色模式的变化。这意味着当您在浅色模式和深色模式之间切换时，这些组件会自动适应新的颜色模式。

8. Optimize：优化建议

在定制 Bootstrap 时，也需要注意性能优化和代码维护性。以下是一些优化建议：

按需引入组件

Bootstrap 允许您只引入实际需要的组件，而不是整个框架。这可以显著减少最终 CSS 文件的大小：

// 只引入需要的组件
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/maps";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/buttons"; // 只需要按钮组件
@import "node_modules/bootstrap/scss/card";    // 只需要卡片组件
// 引入其他需要的组件...

使用 PurgeCSS 清理未使用的 CSS

使用 PurgeCSS 等工具可以移除未使用的 CSS，进一步减小文件大小。这对于使用预制 Bootstrap 构建的生产环境特别有用。

控制工具类的生成范围

Bootstrap 生成了大量的工具类（utility classes），但您可能并不需要所有它们。通过配置 $utilities 映射，您可以控制生成哪些工具类：

// 禁用不需要的工具类
$utilities: (
  "align": null, // 不生成对齐工具类
  "float": null, // 不生成浮动工具类
  // ...其他工具类
);

性能最佳实践

优先使用标准工具类组合（如 d-flex d-md-block），而不是创建过多的自定义类。
只在确实需要时使用自定义工具类，以避免代码膨胀。
在团队项目中确保所有成员理解自定义类的含义，以保持一致性。

Bootstrap 5.3 提供了一个强大而灵活的定制化系统，使您能够根据项目需求精确控制框架的外观和行为。无论您是使用 Sass 进行深度定制，还是通过 CSS 变量进行实时调整，Bootstrap 5.3 都能提供相应的工具和支持。

核心定制方法对比

定制方法	适用场景	优势	局限性
Sass 变量和映射	大规模样式修改，主题系统开发	最强大的定制能力，编译时处理	需要 Sass 编译环境
CSS 变量	实时主题切换，少量样式调整	无需重新编译，浏览器中实时生效	对于复杂定制可能不够灵活
覆盖编译后的 CSS	少量调整，快速原型开发	简单快捷，无需构建流程	难以维护，可能与其他样式冲突

开始定制

要开始定制 Bootstrap 5.3，建议您：

确定定制需求：明确您需要进行的修改范围和程度。
选择合适的定制方法：根据需求选择使用 Sass、CSS 变量或覆盖 CSS。
遵循正确的文件引入顺序：特别是在使用 Sass 时，确保以正确的顺序引入文件。
逐步进行修改：从小处开始，逐步测试每次修改的效果。
性能优化：在生产环境中使用 PurgeCSS 和按需引入组件来优化文件大小。

通过充分利用 Bootstrap 5.3 的定制化功能，您可以创建出既符合品牌特色又保持 Bootstrap 便利性和响应式特性的独特界面。

声明：此栏目页面的正文内容并非源自Bootstrap v5.3官方网站，而是通过Deepseek总结及人工编辑。关于Bootstrap v5.3官方网站内容的翻译请查看详情页面。

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

定制化 Customize

1. Overview (概述)

2. Sass：定制化的核心

引入和设置

覆盖 Sass 函数

3. Options：全局配置选项

4. Color：颜色系统

主题颜色

调色板扩展

5. Color modes：颜色模式

启用颜色模式

使用 Sass 定制颜色模式

创建自定义颜色模式

6. Components：组件定制

组件级别的变量覆盖

使用 Sass 定制组件

使用 CSS 定制组件

7. CSS variables：CSS 自定义属性

全局 CSS 变量

使用 CSS 变量进行实时定制

响应颜色模式的 CSS 变量

8. Optimize：优化建议

按需引入组件

使用 PurgeCSS 清理未使用的 CSS

控制工具类的生成范围

性能最佳实践

核心定制方法对比

开始定制