A brief analysis of how to use the badge icon component in Bootstrap-Bootstrap Tutorial-php.cn

A brief analysis of how to use the badge icon component in Bootstrap

青灯夜游

Release： 2021-11-30 19:07:32

forward

2785 people have browsed it

How to use the badge icon component in

Bootstrap? The following article will explain the usage of the Bootstrap5 Badge badge icon component through code examples. I hope it will be helpful to you!

A brief analysis of how to use the badge icon component in Bootstrap

1 Structure of Badge

Badges are usually used in a small area on the right side of the navigation bar, title, button, and avatar for counting. (such as n unread messages) or identify new releases, popular hots, etc. By using relative font sizes and em units, the badge can be scaled to match the size of the immediate parent element. Starting with Bootstrap 5, badges no longer have link focus or hover styles. [Related recommendation: "bootstrap tutorial"]

The structure of the badge is very simple, it is a span tag, which contains two classes. badge indicates that it is a badge, bg-* is the background color. You can also use text-* to set the font color.

 <span class="badge bg-secondary">文字内容</span>

Copy after login

2 When the badge is used for text

When the badge is used for text, it will automatically adjust the size to match the text.

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

Copy after login

3 For Buttons

Badges can provide counters as part of links or buttons.

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

Copy after login

Please note that depending on how they are used, badges may be confusing to users of screen readers and similar assistive technologies. While the style of the badge provides a visual cue as to its purpose, these users only see the content of the badge. Depending on the context, these badges may look like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as in the "Unread Messages" example, where it is understood that "4" is the number of notifications), consider including additional context in an additional text snippet that is visually hidden.

<button type="button" class="btn btn-primary">
    个人中心 <span class="badge bg-secondary">9</span>
    <span class="visually-hidden">未读消息</span>
 </button>

Copy after login

Note that this hidden label will not be displayed in front of the user, and there will be no prompt when the mouse is hovering. If you want a prompt when the mouse is hovering, you can add a button or badge. The difference is that when added to a button, a prompt will appear when the mouse hovers over the entire button. When added to a span label, a prompt will appear only when the mouse points to the number 9. There will be a delay when hovering, so it must be placed a few days above. seconds.

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

Copy after login

4 Background Color

Quickly change the appearance of the badge using the provided utility classes. Note that when using Bootstrap's default .bg-light you may need a text color utility like .text-dark to get the correct styling. This is because the background utility only sets the background color.

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

Copy after login

5 Capsule Badge

Use the .rounded-pill utility class to make the badge rounder and with a larger border radius.

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

Copy after login

A brief analysis of how to use the badge icon component in Bootstrap

For more knowledge about bootstrap, please visit: bootstrap basic tutorial! !

The above is the detailed content of A brief analysis of how to use the badge icon component in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!