Skip to content

建立 2024-01-01 更新 2026-09-15

顏色

Bootstrap 用一組語意色票貫穿按鈕、警示、徽章與背景，不必記色碼。對應官方 Colors 與 Background。

語意名稱

class 片段 用途
primary 主色，通常是品牌藍
secondary 次要、較低調
success／danger／warning／info 成功、錯誤、警告、提示
light／dark 淺底／深底
body／body-secondary 跟隨主題的正文色

常見寫法：

  • 文字：text-primary、text-danger
  • 背景：bg-primary、bg-body-tertiary
  • 兩者一起：text-bg-primary（5.2 之後，前景對比已算好）
<div class="p-3 mb-2 text-bg-primary">Primary</div>
<p class="text-danger">這行是危險色文字。</p>

深色模式（data-bs-theme="dark"）下，text-bg-* 與 body 系列會跟著變；自訂色碼反而容易對比不足。

效果展示

推薦影音

來源：CSS coke　繁體中文

帶你走官方 Utilities → Colors，說明文字色與背景色怎麼搭配。