Bootstrap 颜色
概述
Bootstrap 提供了一套完整的颜色系统，包括主题颜色、语义颜色和工具类。这些颜色确保了设计的一致性和可访问性。
主题颜色
Bootstrap 定义了一套主题颜色，用于创建一致的设计语言：
基本颜色
html
<!-- 主要颜色 -->
<div class="p-3 mb-2 bg-primary text-white">Primary</div>
<div class="p-3 mb-2 bg-secondary text-white">Secondary</div>
<div class="p-3 mb-2 bg-success text-white">Success</div>
<div class="p-3 mb-2 bg-danger text-white">Danger</div>
<div class="p-3 mb-2 bg-warning text-dark">Warning</div>
<div class="p-3 mb-2 bg-info text-dark">Info</div>
<div class="p-3 mb-2 bg-light text-dark">Light</div>
<div class="p-3 mb-2 bg-dark text-white">Dark</div>文本颜色
使用 .text-* 类设置文本颜色：
html
<p class="text-primary">Primary 文本</p>
<p class="text-secondary">Secondary 文本</p>
<p class="text-success">Success 文本</p>
<p class="text-danger">Danger 文本</p>
<p class="text-warning">Warning 文本</p>
<p class="text-info">Info 文本</p>
<p class="text-light bg-dark">Light 文本</p>
<p class="text-dark">Dark 文本</p>
<p class="text-body">Body 文本</p>
<p class="text-muted">Muted 文本</p>
<p class="text-white bg-dark">White 文本</p>文本颜色透明度
Bootstrap 5 支持文本颜色透明度：
html
<div class="text-primary">这是默认的 primary 文本</div>
<div class="text-primary text-opacity-75">这是 75% 透明度的 primary 文本</div>
<div class="text-primary text-opacity-50">这是 50% 透明度的 primary 文本</div>
<div class="text-primary text-opacity-25">这是 25% 透明度的 primary 文本</div>背景颜色
使用 .bg-* 类设置背景颜色：
html
<div class="bg-primary text-white p-2">Primary 背景</div>
<div class="bg-secondary text-white p-2">Secondary 背景</div>
<div class="bg-success text-white p-2">Success 背景</div>
<div class="bg-danger text-white p-2">Danger 背景</div>
<div class="bg-warning text-dark p-2">Warning 背景</div>
<div class="bg-info text-dark p-2">Info 背景</div>
<div class="bg-light text-dark p-2">Light 背景</div>
<div class="bg-dark text-white p-2">Dark 背景</div>背景颜色透明度
html
<div class="bg-success p-2 text-white">这是默认的 success 背景</div>
<div class="bg-success p-2 text-white bg-opacity-75">这是 75% 透明度的 success 背景</div>
<div class="bg-success p-2 text-dark bg-opacity-50">这是 50% 透明度的 success 背景</div>
<div class="bg-success p-2 text-dark bg-opacity-25">这是 25% 透明度的 success 背景</div>
<div class="bg-success p-2 text-dark bg-opacity-10">这是 10% 透明度的 success 背景</div>渐变背景
使用 .bg-gradient 类添加渐变效果：
html
<div class="bg-primary bg-gradient text-white p-3">Primary 渐变</div>
<div class="bg-secondary bg-gradient text-white p-3">Secondary 渐变</div>
<div class="bg-success bg-gradient text-white p-3">Success 渐变</div>
<div class="bg-danger bg-gradient text-white p-3">Danger 渐变</div>边框颜色
使用 .border-* 类设置边框颜色：
html
<div class="border border-primary p-2 mb-2">Primary 边框</div>
<div class="border border-secondary p-2 mb-2">Secondary 边框</div>
<div class="border border-success p-2 mb-2">Success 边框</div>
<div class="border border-danger p-2 mb-2">Danger 边框</div>
<div class="border border-warning p-2 mb-2">Warning 边框</div>
<div class="border border-info p-2 mb-2">Info 边框</div>
<div class="border border-light p-2 mb-2">Light 边框</div>
<div class="border border-dark p-2 mb-2">Dark 边框</div>
<div class="border border-white p-2 mb-2 bg-dark">White 边框</div>链接颜色
为链接设置颜色：
html
<a href="#" class="link-primary">Primary 链接</a>
<a href="#" class="link-secondary">Secondary 链接</a>
<a href="#" class="link-success">Success 链接</a>
<a href="#" class="link-danger">Danger 链接</a>
<a href="#" class="link-warning">Warning 链接</a>
<a href="#" class="link-info">Info 链接</a>
<a href="#" class="link-light">Light 链接</a>
<a href="#" class="link-dark">Dark 链接</a>实际示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<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/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-5">
<h1 class="text-primary">Bootstrap 颜色系统</h1>
<p class="lead text-muted">展示 Bootstrap 的各种颜色应用</p>
<hr>
<!-- 主题颜色展示 -->
<h2>主题颜色</h2>
<div class="row">
<div class="col-md-3 mb-3">
<div class="bg-primary text-white p-3 rounded">
<h5>Primary</h5>
<p class="mb-0">主要颜色</p>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="bg-success text-white p-3 rounded">
<h5>Success</h5>
<p class="mb-0">成功颜色</p>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="bg-warning text-dark p-3 rounded">
<h5>Warning</h5>
<p class="mb-0">警告颜色</p>
</div>
</div>
<div class="col-md-3 mb-3">
<div class="bg-danger text-white p-3 rounded">
<h5>Danger</h5>
<p class="mb-0">危险颜色</p>
</div>
</div>
</div>
<!-- 文本颜色 -->
<h2>文本颜色</h2>
<div class="row">
<div class="col-md-6">
<p class="text-primary">这是 Primary 文本颜色</p>
<p class="text-success">这是 Success 文本颜色</p>
<p class="text-warning">这是 Warning 文本颜色</p>
<p class="text-danger">这是 Danger 文本颜色</p>
</div>
<div class="col-md-6">
<p class="text-info">这是 Info 文本颜色</p>
<p class="text-secondary">这是 Secondary 文本颜色</p>
<p class="text-dark">这是 Dark 文本颜色</p>
<p class="text-muted">这是 Muted 文本颜色</p>
</div>
</div>
<!-- 透明度示例 -->
<h2>透明度效果</h2>
<div class="bg-info p-3 rounded">
<div class="text-white">100% 不透明</div>
<div class="text-white text-opacity-75">75% 透明度</div>
<div class="text-white text-opacity-50">50% 透明度</div>
<div class="text-white text-opacity-25">25% 透明度</div>
</div>
<!-- 渐变效果 -->
<h2 class="mt-4">渐变效果</h2>
<div class="row">
<div class="col-md-6 mb-3">
<div class="bg-primary bg-gradient text-white p-3 rounded">
Primary 渐变背景
</div>
</div>
<div class="col-md-6 mb-3">
<div class="bg-success bg-gradient text-white p-3 rounded">
Success 渐变背景
</div>
</div>
</div>
<!-- 边框颜色 -->
<h2>边框颜色</h2>
<div class="row">
<div class="col-md-4 mb-3">
<div class="border border-primary border-3 p-3 rounded">
Primary 边框
</div>
</div>
<div class="col-md-4 mb-3">
<div class="border border-success border-3 p-3 rounded">
Success 边框
</div>
</div>
<div class="col-md-4 mb-3">
<div class="border border-danger border-3 p-3 rounded">
Danger 边框
</div>
</div>
</div>
<!-- 链接颜色 -->
<h2>链接颜色</h2>
<p>
<a href="#" class="link-primary me-3">Primary 链接</a>
<a href="#" class="link-success me-3">Success 链接</a>
<a href="#" class="link-warning me-3">Warning 链接</a>
<a href="#" class="link-danger">Danger 链接</a>
</p>
</div>
</body>
</html>颜色对比和可访问性
确保足够的对比度
html
<!-- 好的对比度 -->
<div class="bg-dark text-white p-3">深色背景配白色文字</div>
<div class="bg-light text-dark p-3">浅色背景配深色文字</div>
<!-- 避免低对比度 -->
<div class="bg-warning text-warning p-3">避免：背景和文字颜色相近</div>语义化使用颜色
html
<!-- 正确的语义化使用 -->
<div class="alert alert-success">
<strong>成功！</strong> 操作已完成。
</div>
<div class="alert alert-danger">
<strong>错误！</strong> 请检查输入信息。
</div>
<div class="alert alert-warning">
<strong>警告！</strong> 请注意以下事项。
</div>自定义颜色
CSS 变量
Bootstrap 5 使用 CSS 自定义属性（变量），你可以覆盖这些变量：
css
:root {
--bs-primary: #007bff;
--bs-success: #28a745;
--bs-danger: #dc3545;
}Sass 变量
如果使用 Sass，可以自定义颜色变量：
scss
$primary: #007bff;
$success: #28a745;
$danger: #dc3545;
$warning: #ffc107;
$info: #17a2b8;最佳实践
- 保持一致性：在整个项目中使用相同的颜色系统
- 考虑可访问性：确保颜色对比度符合 WCAG 标准
- 语义化使用：根据内容含义选择合适的颜色
- 测试不同环境：在不同设备和光线条件下测试颜色效果
- 避免过度使用：不要在一个页面使用太多不同的颜色
下一步
现在你已经掌握了 Bootstrap 的颜色系统，接下来我们将学习表格样式。