Bootstrap 颜色系统 #

Bootstrap 提供了一套完整的颜色系统，包括主题色、背景色、文本颜色等，帮助你快速创建视觉一致的界面。

主题颜色 #

Bootstrap 定义了 8 种主题颜色，每种颜色都有其特定的用途：

颜色名	变量	值	用途
primary	`$primary`	`#0d6efd`	主要操作、品牌色
secondary	`$secondary`	`#6c757d`	次要操作
success	`$success`	`#198754`	成功状态
danger	`$danger`	`#dc3545`	危险/错误状态
warning	`$warning`	`#ffc107`	警告状态
info	`$info`	`#0dcaf0`	信息提示
light	`$light`	`#f8f9fa`	浅色背景
dark	`$dark`	`#212529`	深色背景

颜色预览 #

text

┌─────────────────────────────────────────────────────────────────┐
│  Primary   │  Secondary  │  Success   │  Danger    │  Warning  │
│  #0d6efd   │  #6c757d    │  #198754   │  #dc3545   │  #ffc107  │
├─────────────────────────────────────────────────────────────────┤
│  Info      │  Light      │  Dark      │            │           │
│  #0dcaf0   │  #f8f9fa    │  #212529   │            │           │
└─────────────────────────────────────────────────────────────────┘

文本颜色 #

使用 .text-* 类设置文本颜色：

基础用法 #

html

<p class="text-primary">主要文本颜色</p>
<p class="text-secondary">次要文本颜色</p>
<p class="text-success">成功文本颜色</p>
<p class="text-danger">危险文本颜色</p>
<p class="text-warning">警告文本颜色</p>
<p class="text-info">信息文本颜色</p>
<p class="text-light bg-dark">浅色文本（需要深色背景）</p>
<p class="text-dark">深色文本</p>

灰度颜色 #

html

<p class="text-body">默认文本颜色</p>
<p class="text-muted">弱化文本颜色</p>
<p class="text-black-50">50% 黑色</p>
<p class="text-white-50 bg-dark">50% 白色</p>

链接颜色 #

html

<a href="#" class="link-primary">主要链接</a>
<a href="#" class="link-secondary">次要链接</a>
<a href="#" class="link-success">成功链接</a>
<a href="#" class="link-danger">危险链接</a>
<a href="#" class="link-warning">警告链接</a>
<a href="#" class="link-info">信息链接</a>
<a href="#" class="link-light">浅色链接</a>
<a href="#" class="link-dark">深色链接</a>

链接悬停时会自动变暗：

html

<a href="#" class="link-primary">悬停时颜色会变暗</a>

背景颜色 #

使用 .bg-* 类设置背景颜色：

基础用法 #

html

<div class="bg-primary text-white p-3">主要背景色</div>
<div class="bg-secondary text-white p-3">次要背景色</div>
<div class="bg-success text-white p-3">成功背景色</div>
<div class="bg-danger text-white p-3">危险背景色</div>
<div class="bg-warning text-dark p-3">警告背景色</div>
<div class="bg-info text-dark p-3">信息背景色</div>
<div class="bg-light text-dark p-3">浅色背景</div>
<div class="bg-dark text-white p-3">深色背景</div>
<div class="bg-white text-dark p-3">白色背景</div>
<div class="bg-transparent text-dark p-3">透明背景</div>

渐变背景 #

Bootstrap 5.1+ 支持渐变背景：

html

<div class="bg-primary bg-gradient text-white p-3">主要渐变背景</div>
<div class="bg-secondary bg-gradient text-white p-3">次要渐变背景</div>
<div class="bg-success bg-gradient text-white p-3">成功渐变背景</div>
<div class="bg-danger bg-gradient text-white p-3">危险渐变背景</div>
<div class="bg-warning bg-gradient text-dark p-3">警告渐变背景</div>
<div class="bg-info bg-gradient text-dark p-3">信息渐变背景</div>
<div class="bg-dark bg-gradient text-white p-3">深色渐变背景</div>

透明度 #

Bootstrap 5.2+ 支持背景透明度：

html

<div class="bg-primary bg-opacity-100 p-3">100% 不透明</div>
<div class="bg-primary bg-opacity-75 p-3">75% 不透明</div>
<div class="bg-primary bg-opacity-50 p-3">50% 不透明</div>
<div class="bg-primary bg-opacity-25 p-3">25% 不透明</div>
<div class="bg-primary bg-opacity-10 p-3">10% 不透明</div>

组件中的颜色 #

按钮 #

html

<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
<button class="btn btn-success">成功按钮</button>
<button class="btn btn-danger">危险按钮</button>
<button class="btn btn-warning">警告按钮</button>
<button class="btn btn-info">信息按钮</button>
<button class="btn btn-light">浅色按钮</button>
<button class="btn btn-dark">深色按钮</button>

轮廓按钮 #

html

<button class="btn btn-outline-primary">主要轮廓</button>
<button class="btn btn-outline-secondary">次要轮廓</button>
<button class="btn btn-outline-success">成功轮廓</button>
<button class="btn btn-outline-danger">危险轮廓</button>
<button class="btn btn-outline-warning">警告轮廓</button>
<button class="btn btn-outline-info">信息轮廓</button>
<button class="btn btn-outline-light">浅色轮廓</button>
<button class="btn btn-outline-dark">深色轮廓</button>

警告框 #

html

<div class="alert alert-primary">主要提示信息</div>
<div class="alert alert-secondary">次要提示信息</div>
<div class="alert alert-success">成功提示信息</div>
<div class="alert alert-danger">危险提示信息</div>
<div class="alert alert-warning">警告提示信息</div>
<div class="alert alert-info">信息提示信息</div>
<div class="alert alert-light">浅色提示信息</div>
<div class="alert alert-dark">深色提示信息</div>

徽章 #

html

<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning text-dark">警告</span>
<span class="badge bg-info">信息</span>
<span class="badge bg-light text-dark">浅色</span>
<span class="badge bg-dark">深色</span>

卡片 #

html

<div class="card text-white bg-primary mb-3">
  <div class="card-header">头部</div>
  <div class="card-body">
    <h5 class="card-title">主要卡片</h5>
    <p class="card-text">卡片内容</p>
  </div>
</div>

<div class="card text-white bg-secondary mb-3">
  <div class="card-body">
    <h5 class="card-title">次要卡片</h5>
  </div>
</div>

列表组 #

html

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">主要项</li>
  <li class="list-group-item list-group-item-secondary">次要项</li>
  <li class="list-group-item list-group-item-success">成功项</li>
  <li class="list-group-item list-group-item-danger">危险项</li>
  <li class="list-group-item list-group-item-warning">警告项</li>
  <li class="list-group-item list-group-item-info">信息项</li>
  <li class="list-group-item list-group-item-light">浅色项</li>
  <li class="list-group-item list-group-item-dark">深色项</li>
</ul>

表格 #

html

<table class="table">
  <thead>
    <tr>
      <th>类型</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td>主要</td>
      <td>主要信息行</td>
    </tr>
    <tr class="table-success">
      <td>成功</td>
      <td>成功信息行</td>
    </tr>
    <tr class="table-danger">
      <td>危险</td>
      <td>危险信息行</td>
    </tr>
    <tr class="table-warning">
      <td>警告</td>
      <td>警告信息行</td>
    </tr>
  </tbody>
</table>

表单验证颜色 #

Bootstrap 为表单验证提供了特定的颜色：

html

<!-- 有效状态 -->
<div class="mb-3">
  <label class="form-label">有效输入</label>
  <input type="text" class="form-control is-valid" value="正确">
  <div class="valid-feedback">输入正确！</div>
</div>

<!-- 无效状态 -->
<div class="mb-3">
  <label class="form-label">无效输入</label>
  <input type="text" class="form-control is-invalid" value="错误">
  <div class="invalid-feedback">请输入正确的内容。</div>
</div>

自定义颜色 #

Sass 变量 #

在自定义 Sass 文件中覆盖默认颜色：

scss

// 在引入 Bootstrap 之前定义
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;
$light: #f8f9fa;
$dark: #343a40;

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

添加自定义颜色 #

scss

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

@import "bootstrap/scss/bootstrap";

使用自定义颜色：

html

<button class="btn btn-custom">自定义按钮</button>
<div class="bg-custom text-white p-3">自定义背景</div>
<p class="text-custom">自定义文本颜色</p>

CSS 变量 #

Bootstrap 5 使用 CSS 自定义属性，可以在运行时修改颜色：

css

:root {
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-danger: #dc3545;
  --bs-warning: #ffc107;
  --bs-info: #0dcaf0;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
}

通过 JavaScript 动态修改：

javascript

document.documentElement.style.setProperty('--bs-primary', '#ff6600');

颜色对比度 #

Bootstrap 自动处理文本与背景的对比度：

html

<!-- 自动选择合适的文本颜色 -->
<div class="bg-primary text-white">白色文本</div>
<div class="bg-warning text-dark">深色文本</div>

对比度要求 #

背景色	推荐文本色	原因
primary	white	深色背景
secondary	white	深色背景
success	white	深色背景
danger	white	深色背景
warning	dark	浅色背景
info	dark	浅色背景
light	dark	浅色背景
dark	white	深色背景

颜色工具类 #

文本透明度 #

html

<p class="text-primary text-opacity-75">75% 透明度</p>
<p class="text-primary text-opacity-50">50% 透明度</p>
<p class="text-primary text-opacity-25">25% 透明度</p>

背景透明度 #

html

<div class="bg-primary bg-opacity-75 p-3">75% 背景透明度</div>
<div class="bg-primary bg-opacity-50 p-3">50% 背景透明度</div>
<div class="bg-primary bg-opacity-25 p-3">25% 背景透明度</div>

实战案例 #

彩色卡片组 #

html

<div class="row g-4">
  <div class="col-md-3">
    <div class="card text-white bg-primary">
      <div class="card-body">
        <h5 class="card-title">用户数</h5>
        <p class="card-text display-4">1,234</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card text-white bg-success">
      <div class="card-body">
        <h5 class="card-title">收入</h5>
        <p class="card-text display-4">¥56K</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card text-white bg-warning">
      <div class="card-body">
        <h5 class="card-title">订单</h5>
        <p class="card-text display-4">89</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card text-white bg-danger">
      <div class="card-body">
        <h5 class="card-title">待处理</h5>
        <p class="card-text display-4">12</p>
      </div>
    </div>
  </div>
</div>

状态标签 #

html

<span class="badge bg-success">已完成</span>
<span class="badge bg-warning text-dark">进行中</span>
<span class="badge bg-danger">已取消</span>
<span class="badge bg-secondary">待审核</span>
<span class="badge bg-info">新订单</span>

彩色导航 #

html

<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌</a>
  </div>
</nav>

<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌</a>
  </div>
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">品牌</a>
  </div>
</nav>

深色模式支持 #

html

<div class="bg-dark text-white p-4">
  <h3>深色主题</h3>
  <p>适合夜间使用的深色背景。</p>
  <button class="btn btn-light">浅色按钮</button>
</div>

最佳实践 #

1. 语义化使用颜色 #

html

<!-- 推荐：根据含义选择颜色 -->
<button class="btn btn-danger">删除</button>
<button class="btn btn-success">保存</button>
<div class="alert alert-warning">警告信息</div>

<!-- 不推荐：随意使用颜色 -->
<button class="btn btn-danger">保存</button>
<button class="btn btn-success">删除</button>

2. 确保对比度 #

html

<!-- 推荐：对比度足够 -->
<div class="bg-primary text-white">白色文本</div>
<div class="bg-warning text-dark">深色文本</div>

<!-- 不推荐：对比度不足 -->
<div class="bg-warning text-white">对比度不足</div>

3. 一致性 #

html

<!-- 推荐：整个项目使用一致的颜色 -->
<!-- 成功操作始终使用 success -->
<button class="btn btn-success">保存</button>
<button class="btn btn-success">提交</button>
<button class="btn btn-success">确认</button>

下一步 #

现在你已经掌握了 Bootstrap 的颜色系统，接下来学习按钮组件，了解如何创建各种样式的按钮！