Bootstrap5徽章組件：簡潔標籤與狀態標識

徽章組件：Bootstrap5的“小巧信息標籤”

在網頁設計中，我們常常需要用簡短的文字或數字來標識內容狀態、分類或提示。比如“通知”旁邊的小紅點、“熱門”商品標籤、或者導航欄裏的消息數量。這些小元素如果用普通的文字樣式會顯得突兀，而用專門的徽章組件（Badge）就能既美觀又簡潔地完成這項工作。Bootstrap5的徽章組件就是爲這類場景設計的，它體積小、樣式統一，還支持多種顏色和尺寸，讓信息展示更清晰。

快速上手：引入與基礎用法¶

要使用Bootstrap5徽章，首先需要在HTML中引入Bootstrap的CSS文件（JS文件可選，徽章本身無需交互時可只加載CSS）。通過CDN直接引入最新版Bootstrap5：

<head>
  <!-- 引入Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- 你的頁面內容 -->
</body>

基礎徽章代碼：使用<span>標籤包裹內容，搭配badge基礎類和背景顏色類（如bg-primary）：

<span class="badge bg-primary">標籤</span>

這樣就能生成一個藍色背景、白色文字的基礎徽章。

基礎樣式與顏色變化¶

Bootstrap5的徽章支持多種樣式，讓你能靈活適配不同場景：

1. 顏色變體¶

通過bg-*類設置背景色，常見顏色有：
- bg-primary（藍色）、bg-secondary（灰色）、bg-success（綠色）
- bg-warning（黃色）、bg-danger（紅色）、bg-info（淺藍）
- bg-light（白色背景，文字深色）、bg-dark（黑色背景）

示例：

<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危險</span>
<span class="badge bg-info">提示</span>

2. 大小調整¶

用badge-sm（小號）和badge-lg（大號）控制尺寸：

<span class="badge bg-primary badge-sm">小</span>
<span class="badge bg-primary">中</span>
<span class="badge bg-primary badge-lg">大</span>

3. 藥丸形狀（Pill）¶

通過badge-pill類讓徽章更圓潤醒目，適合顯示通知數量等場景：

<span class="badge bg-danger badge-pill">5</span>  <!-- 紅色藥丸形通知 -->
<span class="badge bg-success badge-pill">熱門</span>  <!-- 分類標籤 -->

實用場景示例¶

徽章的核心價值在於解決實際問題，以下是幾個常見場景：

1. 通知數量提示¶

聊天窗口、郵件列表中的未讀消息數量：

<button class="btn btn-primary">
  消息 <span class="badge bg-danger badge-pill">3</span>
</button>

效果：按鈕旁顯示紅色小圓點數字“3”，直觀提示未讀消息。

2. 分類標籤¶

商品列表中標記“熱門”“新品”“推薦”：

<div class="card">
  <div class="card-body">
    <h5 class="card-title">
      智能手機 <span class="badge bg-warning text-dark">新品</span>
    </h5>
    <p class="card-text">超輕薄設計，長續航...</p>
  </div>
</div>

3. 導航欄通知¶

網頁右上角的未讀消息提示：

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">我的網站</a>
    <span class="badge bg-primary rounded-pill position-absolute top-0 end-0 m-2">
      新
    </span>
  </div>
</nav>

（用position-absolute讓徽章懸浮在右上角）

4. 列表項狀態標記¶

待辦事項列表中標記進度：

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    完成文檔 <span class="badge bg-success">已完成</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    寫報告 <span class="badge bg-warning text-dark">進行中</span>
  </li>
</ul>

進階組合與嵌套¶

徽章可以和其他元素靈活組合，提升信息豐富度：

1. 按鈕+徽章組合¶

按鈕上疊加通知：

<button class="btn btn-outline-secondary">
  收藏 <span class="badge bg-light text-primary">128</span>
</button>

2. 列表項嵌套¶

列表中使用徽章作爲標籤：

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">科技資訊</div>
      <span class="badge bg-info">最新</span>
    </div>
  </li>
</ol>

注意事項與最佳實踐¶

語義化使用：徽章是裝飾性元素，應放在內容相關位置（如標題後、按鈕旁），避免用<div>代替<span>，因爲<span>是行內元素，不會破壞佈局。
顏色對比：確保背景色與文字色有足夠對比度（如紅色背景用白色文字，白色背景用深色文字），避免視覺混亂。
避免過度使用：徽章過多會顯得雜亂，僅對關鍵信息（如未讀數量、重要分類）使用，次要信息用普通文字即可。
響應式適配：Bootstrap5自帶響應式特性，小屏幕下徽章會自動適配，無需額外設置。

通過以上示例，你已經能快速掌握Bootstrap5徽章組件的基礎用法。它雖小卻能解決大問題，讓網頁信息展示更簡潔、直觀，快去試試吧！