自定义 Bootstrap

使用 CSS 自定义属性

Bootstrap 5 在根元素上定义了大量 CSS 自定义属性（CSS 变量），可以直接覆盖它们来改变主题：

:root {
    --bs-primary: #7952b3;
    --bs-primary-rgb: 121, 82, 179;
    --bs-body-color: #333;
    --bs-body-bg: #f8f9fa;
    --bs-border-radius: 0.5rem;
    --bs-font-sans-serif: "Noto Sans SC", system-ui, sans-serif;
}

覆盖 CSS 变量后，整个 Bootstrap 框架中所有使用该变量的地方都会同步更新，无需逐个修改。

Sass 变量定制

如果你使用 Sass 构建项目，可以通过覆盖变量来深度定制：

安装 Sass 源码

npm install [email protected]

创建自定义样式文件

// custom.scss
// 1. 覆盖 Bootstrap 默认变量
$primary: #7952b3;
$secondary: #6c757d;
$border-radius: 0.5rem;
$font-family-sans-serif: "Inter", system-ui, sans-serif;

// 2. 导入 Bootstrap 源码
@import "bootstrap/scss/bootstrap";

// 3. 添加自定义样式
.hero-section {
    background: linear-gradient(135deg, $primary, darken($primary, 15%));
}

使用 Vite 构建

// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "src/styles/custom";`
            }
        }
    }
})

常用自定义项

修改主题色

Bootstrap 使用 $theme-colors 映射管理所有主题色：

// 添加新颜色
$custom-colors: (
    "orange": #fd7e14,
    "teal": #20c997
);

// 合并到主题色
$theme-colors: map-merge($theme-colors, $custom-colors);

自定义断点

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
);

间距映射

$spacer: 1rem;
$spacers: (
    0: 0,
    1: $spacer * .25,
    2: $spacer * .5,
    3: $spacer,
    4: $spacer * 1.5,
    5: $spacer * 3
);

按需导入

如果只需要 Bootstrap 的部分功能，可以按需导入 Sass 模块，减小打包体积：

// 只需要网格系统和工具类
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/utilities";

CSS Grid 布局

Bootstrap 5.3 开始支持 CSS Grid 布局模式，作为传统 Flexbox 网格的替代：

<div class="grid">
    <div class="g-col-4">占4列</div>
    <div class="g-col-4">占4列</div>
    <div class="g-col-4">占4列</div>
</div>

<!-- 显式指定行/列位置 -->
<div class="grid">
    <div class="g-col-6 g-start-4">从第4列开始，占6列</div>
</div>