溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Bootstrap中如何使用徽章圖標(biāo)組件

發(fā)布時(shí)間：2021-12-02 12:44:48 來源：億速云 閱讀：191 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“Bootstrap中如何使用徽章圖標(biāo)組件”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Bootstrap中如何使用徽章圖標(biāo)組件”吧!

Bootstrap中如何使用徽章圖標(biāo)組件

1 徽章（Badge）的結(jié)構(gòu)

徽章通常用于導(dǎo)航欄、標(biāo)題、按鈕、頭像右側(cè)的一個(gè)小區(qū)域，用于計(jì)數(shù)（如n條未讀消息）或標(biāo)識(shí)新發(fā)布new、熱門hot等。通過使用相對(duì)字體大小和em單位，徽章可以縮放以匹配直接父元素的大小。從Bootstrap5開始，徽章不再具有鏈接的焦點(diǎn)或懸停樣式。

徽章的結(jié)構(gòu)非常簡(jiǎn)單，就是一個(gè)span標(biāo)簽，里面包含兩個(gè)類，badge表明是徽章，bg-*是背景顏色。還可以用text-*設(shè)置字體顏色。

 <span class="badge bg-secondary">文字內(nèi)容</span>

2  徽章用于文字

徽章用于文字時(shí)，自動(dòng)調(diào)整大小與文字匹配。

<!doctype html>
<html>
  <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>
      <br><br><br>
        <h2>Example heading <span class="badge bg-info ">New</span></h2>
        <h3>Example heading <span class="badge bg-danger ">Hot</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>
        <h7>Example heading <span class="badge bg-info ">New</span></h7>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用徽章圖標(biāo)組件

3 用于按鈕

徽章可以作為鏈接或按鈕的一部分來提供計(jì)數(shù)器。

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

Bootstrap中如何使用徽章圖標(biāo)組件

請(qǐng)注意，根據(jù)它們的使用方式，徽章可能會(huì)讓屏幕閱讀器和類似輔助技術(shù)的用戶感到困惑。雖然徽章的樣式提供了一個(gè)關(guān)于其用途的視覺提示，但這些用戶只需看到徽章的內(nèi)容。根據(jù)具體情況，這些徽章可能看起來像是句子、鏈接或按鈕末尾的隨機(jī)附加單詞或數(shù)字。

除非上下文是清楚的（如“未讀消息”示例，其中理解為“4”是通知的數(shù)量），否則請(qǐng)考慮將附加上下文包括在視覺上隱藏的附加文本片段中。

<button type="button" class="btn btn-primary">
    個(gè)人中心 <span class="badge bg-secondary">9</span>
    <span class="visually-hidden">未讀消息</span>
 </button>

Bootstrap中如何使用徽章圖標(biāo)組件

注意，這個(gè)隱藏標(biāo)簽不會(huì)顯示在用戶面前，鼠標(biāo)懸停也沒有提示，如果你想鼠標(biāo)懸停有提示，可以給按鈕或者徽章添加title，不同的是，加在按鈕上，鼠標(biāo)在整個(gè)按鈕懸停都有提示，加在span標(biāo)簽上，只有鼠標(biāo)指到數(shù)字9的時(shí)候才有提示，懸停有延時(shí)，要放在上面幾秒鐘。

        <button type="button" class="btn btn-primary">
            個(gè)人中心 <span class="badge bg-secondary" title="您有9條未讀消息" >9</span>
        </button>

        <button type="button" class="btn btn-primary" title="您有9條未讀消息" >
            個(gè)人中心 <span class="badge bg-secondary" >9</span>
        </button>

Bootstrap中如何使用徽章圖標(biāo)組件

4 背景顏色

使用提供的實(shí)用程序類快速更改徽章的外觀。請(qǐng)注意，使用Bootstrap的默認(rèn).bg-light時(shí)，您可能需要一個(gè)文本顏色實(shí)用程序，如.text-dark，以獲得正確的樣式。這是因?yàn)楸尘皩?shí)用程序只設(shè)置背景顏色。

<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>

Bootstrap中如何使用徽章圖標(biāo)組件

5 膠囊徽章

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

<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>

Bootstrap中如何使用徽章圖標(biāo)組件

到此，相信大家對(duì)“Bootstrap中如何使用徽章圖標(biāo)組件”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手