Bootstrap - 徽章

上一頁
下一頁

本章將討論 Bootstrap 徽章以及建立徽章的類。徽章常用於突出顯示網頁上的重要細節，例如標題、警告和通知計數器。

Bootstrap 徽章是數字指示或通知計數器（有多少專案與連結相關聯）。

徽章

為了根據直接父元素的大小進行縮放，徽章使用比較字型縮放和em單位。在頁面連結中，從版本 5 開始不再支援焦點或懸停樣式。

以下示例演示瞭如何使用 Bootstrap 建立內聯徽章。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <h1>Sample heading <span class="badge bg-secondary">New</span></h1>
  <h2>Sample heading <span class="badge bg-secondary">Offer</span></h2>
  <h3>Sample heading <span class="badge bg-secondary">New</span></h3>
  <h4>Sample heading <span class="badge bg-secondary">Offer</span></h4>
  <h5>Sample heading <span class="badge bg-secondary">New</span></h5>
  <h6>Sample heading <span class="badge bg-secondary">Offer</span></h6>
  </body>
  </html>

按鈕

徽章可以用作連結或按鈕的一部分來提供計數器。由於徽章的樣式化方式，使用者只能看到徽章的內容，從而直觀地暗示了其用途。根據具體情況，這些徽章在句子、連結或按鈕的末尾可能會顯得像是隨機新增的單詞或數字。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
    <body>
    <button type="button" class="btn btn-success" style="margin: 20px;">
      Messages <span class="badge text-bg-warning">6</span>
    </button>
  </body>
  </html>

通知

此示例說明了一個視覺隱藏類，其中包含一部分額外的文字，使用者可以在其中看到數字“32”表示通知的數量。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-success position-relative" style="margin: 20px;">
    Notifications
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
      32+
      <span class="visually-hidden">unread notifications</span>
    </span>
  </button>
</body>
  </html>

定位

.badge可以使用top-0、start-100、translate-middle實用工具進行修改，並放置在連結或按鈕的角落。讓我們看看下面的示例，瞭解它通常是如何工作的。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-primary position-relative" style="margin: 20px;">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">
      55+
      <span class="visually-hidden">unread notifications</span>
    </span>
  </button>
</body>
  </html>

指示器

Bootstrap 徽章是與連結關聯的專案數量的數字指示。使用徽章突出顯示新或未讀的專案。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-info position-relative" style="margin: 20px;">
    Webinar
    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-primary border border-light rounded-circle">
      <span class="visually-hidden">New notifications</span>
    </span>
  </button>
</body>
  </html>

背景顏色

使用.text-bg-{color} 輔助類，使用者可以設定背景顏色並使用對比的前景顏色。過去，需要手動配對首選的.text-{color}和.bg-{color}實用工具進行樣式化；但是，使用者仍然可以根據需要這樣做。

使用 Bootstrap 背景顏色框架提供的text-bg-primary、text-bg-info、text-bg-success等實用工具類，可以立即更改徽章的外觀。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
      </head>
      <body style="margin: 20px;">
      <span class="badge text-bg-primary">Primary</span>
      <span class="badge text-bg-info">Info</span>
      <span class="badge text-bg-secondary">Secondary</span>
      <span class="badge text-bg-success">Success</span>
      <span class="badge text-bg-light">Light</span>
      <span class="badge text-bg-dark">Dark</span>
      <span class="badge text-bg-warning">Warning</span>
      <span class="badge text-bg-danger">Danger</span>
      </body>
      </html>

藥丸徽章

使用者可以透過使用.rounded-pill修飾符類設計成藥丸形狀的徽章，或者具有更圓角的徽章，如下面的示例所示。

要快速修改徽章的外觀，請使用 Bootstrap 背景顏色框架中提供的.rounded-pill實用工具類。

示例

您可以使用編輯和執行選項編輯和嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
    <body style="margin: 20px;">
    <span class="badge rounded-pill text-bg-primary">Primary</span>
    <span class="badge rounded-pill text-bg-secondary">Secondary</span>
    <span class="badge rounded-pill text-bg-info">Info</span>
    <span class="badge rounded-pill text-bg-success">Success</span>
    <span class="badge rounded-pill text-bg-light">Light</span>
    <span class="badge rounded-pill text-bg-dark">Dark</span>
    <span class="badge rounded-pill text-bg-danger">Danger</span>
    <span class="badge rounded-pill text-bg-warning">Warning</span>
    </body>
  </html>
列印頁面
上一頁
下一頁
廣告