Bootstrap 颜色系统

了解Bootstrap的颜色变量体系和语义化颜色类名 · 难度：入门 · +15XP

Bootstrap 颜色系统

Bootstrap定义了一套语义化颜色，贯穿所有组件。

核心颜色

类名	含义	色值
	primary	主题色	蓝 #0d6efd
	secondary	次要色	灰 #6c757d
	success	成功	绿 #198754
	danger	危险	红 #dc3545
	warning	警告	黄 #ffc107
	info	信息	青 #0dcaf0
	light	浅色	#f8f9fa
	dark	深色	#212529

应用场景

<!-- 文字颜色 -->
<p class="text-primary">主题色文字</p>
<p class="text-success">成功文字</p>
<p class="text-danger">警告文字</p>
<p class="text-muted">灰色辅助文字</p>

<!-- 背景色 -->
<div class="bg-primary text-white">蓝色背景</div>
<div class="bg-success text-white">绿色背景</div>
<div class="bg-gradient-primary">渐变背景</div>

<!-- 边框色 -->
<div class="border border-primary">蓝色边框</div>
<div class="border border-3 border-danger">加粗红色边框</div>

透明度

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

💡 练习

用Bootstrap颜色类创建一组状态标签：成功/警告/危险/信息各一个，配上文字和背景颜色。