Bootstrap 自定义主题 #

Bootstrap 提供了强大的自定义能力，你可以通过 Sass 变量、CSS 变量和自定义样式来创建独特的主题风格。

自定义方式 #

Bootstrap 提供了三种主要的自定义方式：

方式	适用场景	灵活度
CSS 覆盖	简单样式修改	低
Sass 变量	主题定制	高
CSS 变量	运行时修改	中

CSS 覆盖 #

最简单的方式是在 Bootstrap CSS 之后引入自定义 CSS：

html

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

css

/* custom.css */
.btn-primary {
  background-color: #ff6600;
  border-color: #ff6600;
}

.btn-primary:hover {
  background-color: #e65c00;
  border-color: #e65c00;
}

Sass 变量自定义 #

安装 Bootstrap 源码 #

bash

npm install bootstrap

创建自定义 SCSS 文件 #

scss

// custom.scss

// 1. 在引入 Bootstrap 之前定义变量
$primary: #ff6600;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;

// 字体设置
$font-family-base: 'Helvetica Neue', Arial, sans-serif;
$font-size-base: 1rem;

// 圆角设置
$border-radius: 0.375rem;
$border-radius-lg: 0.5rem;
$border-radius-sm: 0.25rem;

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

编译 SCSS #

bash

# 使用 sass 编译
sass custom.scss custom.css

# 使用 node-sass 编译
node-sass custom.scss custom.css

# 压缩输出
sass custom.scss custom.css --style=compressed

核心变量 #

颜色变量 #

scss

// 主题颜色
$primary: #0d6efd;
$secondary: #6c757d;
$success: #198754;
$danger: #dc3545;
$warning: #ffc107;
$info: #0dcaf0;
$light: #f8f9fa;
$dark: #212529;

// 灰度颜色
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;

// 添加自定义颜色
$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "success": $success,
  "danger": $danger,
  "warning": $warning,
  "info": $info,
  "light": $light,
  "dark": $dark,
  "custom": #7c3aed
);

字体变量 #

scss

// 字体家族
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

// 字体大小
$font-size-base: 1rem;
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;

// 标题大小
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;

// 行高
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;

间距变量 #

scss

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

断点变量 #

scss

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

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

栅格变量 #

scss

$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-row-columns: 6;

按钮变量 #

scss

$btn-padding-y: 0.375rem;
$btn-padding-x: 0.75rem;
$btn-font-family: $font-family-base;
$btn-font-size: $font-size-base;
$btn-line-height: 1.5;
$btn-border-radius: $border-radius;

$btn-padding-y-sm: 0.25rem;
$btn-padding-x-sm: 0.5rem;
$btn-font-size-sm: $font-size-sm;

$btn-padding-y-lg: 0.5rem;
$btn-padding-x-lg: 1rem;
$btn-font-size-lg: $font-size-lg;

表单变量 #

scss

$input-padding-y: 0.375rem;
$input-padding-x: 0.75rem;
$input-font-family: $font-family-base;
$input-font-size: $font-size-base;
$input-line-height: 1.5;
$input-border-radius: $border-radius;

$input-focus-border-color: tint-color($primary, 50%);
$input-focus-box-shadow: 0 0 0 0.25rem rgba($primary, .25);

导航栏变量 #

scss

$navbar-padding-y: 0.5rem;
$navbar-padding-x: 1rem;
$navbar-brand-font-size: $font-size-lg;

$navbar-dark-color: rgba($white, .55);
$navbar-dark-hover-color: rgba($white, .75);
$navbar-dark-active-color: $white;

$navbar-light-color: rgba($black, .55);
$navbar-light-hover-color: rgba($black, .7);
$navbar-light-active-color: rgba($black, .9);

CSS 变量 #

Bootstrap 5 使用 CSS 自定义属性（CSS 变量），可以在运行时修改样式：

全局 CSS 变量 #

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-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-danger: #dc3545;
  --bs-warning: #ffc107;
  --bs-info: #0dcaf0;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-bg: #fff;
}

通过 JavaScript 修改 #

javascript

// 修改主题色
document.documentElement.style.setProperty('--bs-primary', '#ff6600');

// 修改字体
document.documentElement.style.setProperty('--bs-body-font-family', 'Arial, sans-serif');

// 修改背景色
document.documentElement.style.setProperty('--bs-body-bg', '#f5f5f5');

组件 CSS 变量 #

css

/* 按钮 */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
}

/* 卡片 */
.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-border-width: 1px;
  --bs-card-border-color: rgba(0, 0, 0, .125);
  --bs-card-border-radius: 0.375rem;
}

按需引入 #

只引入需要的组件 #

scss

// 1. 必须引入
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// 2. 选择性引入组件
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/card";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/utilities";

只引入栅格系统 #

scss

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/grid";

只引入工具类 #

scss

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

主题示例 #

深色主题 #

scss

// dark-theme.scss
$primary: #6ea8fe;
$secondary: #6c757d;
$success: #3dd5f3;
$danger: #ea868f;
$warning: #ffc107;
$info: #6edff6;

$body-bg: #212529;
$body-color: #dee2e6;

$card-bg: #2b3035;
$card-border-color: rgba(255, 255, 255, .125);

$navbar-dark-color: rgba(255, 255, 255, .55);
$navbar-dark-hover-color: rgba(255, 255, 255, .75);

@import "bootstrap/scss/bootstrap";

企业主题 #

scss

// corporate-theme.scss
$primary: #0056b3;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;

$font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
$font-size-base: 0.9375rem;

$border-radius: 0;
$border-radius-lg: 0;
$border-radius-sm: 0;

$btn-font-weight: 600;

@import "bootstrap/scss/bootstrap";

圆润主题 #

scss

// rounded-theme.scss
$primary: #6366f1;
$secondary: #8b5cf6;
$success: #10b981;
$danger: #ef4444;
$warning: #f59e0b;
$info: #3b82f6;

$border-radius: 1rem;
$border-radius-lg: 1.25rem;
$border-radius-sm: 0.75rem;

$btn-border-radius: 50rem;
$btn-border-radius-sm: 50rem;
$btn-border-radius-lg: 50rem;

$card-border-radius: 1.5rem;

@import "bootstrap/scss/bootstrap";

构建工具配置 #

Webpack #

javascript

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

Vite #

javascript

// vite.config.js
export default {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables";`
      }
    }
  }
};

Gulp #

javascript

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

gulp.task('build-css', () => {
  return gulp.src('scss/custom.scss')
    .pipe(sass())
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest('css'));
});

最佳实践 #

1. 变量优先 #

scss

// 推荐：使用变量
$primary: #ff6600;

// 不推荐：硬编码
.btn-primary {
  background-color: #ff6600;
}

2. 模块化组织 #

text

scss/
├── _variables.scss
├── _mixins.scss
├── _buttons.scss
├── _forms.scss
├── _navbar.scss
└── main.scss

3. 版本控制 #

scss

// 记录 Bootstrap 版本
// Bootstrap 5.3.0
// 自定义主题 v1.0.0

下一步 #

现在你已经掌握了自定义主题，接下来学习高级用法，了解更多 Bootstrap 的高级技巧！