18.1 徽章（Badge）的結構

徽章一般用於導航欄、標題、按鈕、頭像右側的一個小區域，用於計數（如n條未讀消息）或標識新發布new、熱門hot等。經過使用相對字體大小和em單位，徽章能夠縮放以匹配直接父元素的大小。從Bootstrap5開始，徽章再也不具備連接的焦點或懸停樣式。bootstrap

徽章的結構很是簡單，就是一個span標籤，裏面包含兩個類，badge代表是徽章，bg-*是背景顏色。還能夠用text-*設置字體顏色。markdown

<span class="badge bg-secondary">文字內容</span>
複製代碼

18.2 徽章用於文字

徽章用於文字時，自動調整大小與文字匹配。post

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>徽章</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
        <h1>Example heading <span class="badge bg-info ">New</span></h1>
        <h2>Example heading <span class="badge bg-danger ">Hot</span></h2>
        <h3>Example heading <span class="badge bg-info ">New</span></h3>
        <h4>Example heading <span class="badge bg-info ">New</span></h4>
        <h5>Example heading <span class="badge bg-info ">New</span></h5>
        <h6>Example heading <span class="badge bg-info ">New</span></h6>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
複製代碼

18.3 用於按鈕

徽章能夠做爲連接或按鈕的一部分來提供計數器。學習

<button type="button" class="btn btn-primary">
   未讀消息 <span class="badge bg-secondary">4</span>
</button>
複製代碼

請注意，根據它們的使用方式，徽章可能會讓屏幕閱讀器和相似輔助技術的用戶感到困惑。雖然徽章的樣式提供了一個關於其用途的視覺提示，但這些用戶只需看到徽章的內容。根據具體狀況，這些徽章可能看起來像是句子、連接或按鈕末尾的隨機附加單詞或數字。字體

除非上下文是清楚的（如「未讀消息」示例，其中理解爲「4」是通知的數量），不然請考慮將附加上下文包括在視覺上隱藏的附加文本片斷中。spa

<button type="button" class="btn btn-primary">
    我的中心 <span class="badge bg-secondary">9</span>
    <span class="visually-hidden">未讀消息</span>
 </button>
複製代碼

注意，這個隱藏標籤不會顯示在用戶面前，鼠標懸停也沒有提示，若是你想鼠標懸停有提示，能夠給按鈕或者徽章添加title，不一樣的是，加在按鈕上，鼠標在整個按鈕懸停都有提示，加在span標籤上，只有鼠標指到數字9的時候纔有提示，懸停有延時，要放在上面幾秒鐘。3d

<button type="button" class="btn btn-primary">
            我的中心 <span class="badge bg-secondary" title="您有9條未讀消息" >9</span>
        </button>

        <button type="button" class="btn btn-primary" title="您有9條未讀消息" > 我的中心 <span class="badge bg-secondary" >9</span> </button>
複製代碼

18.4 背景顏色

使用提供的實用程序類快速更改徽章的外觀。請注意，使用Bootstrap的默認.bg-light時，您可能須要一個文本顏色實用程序，如.text-dark，以得到正確的樣式。這是由於背景實用程序只設置背景顏色。code

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
複製代碼

18.5 膠囊徽章

使用.rounded-pill實用程序類使徽章更圓，邊界半徑更大。

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
複製代碼

今天的課程就到這裏，請關注我，及時學習俺老劉原創的《Bootstrap5零基礎到精通》第19節 Bootstrap5 Buttons按鈕組件用法，順便說一下，Bootstrap5按鈕組件功能十分強大，內容也比較多，要作好心理準備。

若是這篇文章對你有幫助，記得隨手點贊哦！

《Bootstrap5零基礎到精通》第18節 Bootstrap5 Badge徽章圖標組件用法

18.1 徽章（Badge）的結構

18.2 徽章用於文字

18.3 用於按鈕

18.4 背景顏色

18.5 膠囊徽章