Home > Article > Web Front-end > A brief analysis of how to use the badge icon component in Bootstrap
A brief analysis of how to use the badge icon component in Bootstrap
- 青灯夜游forward
- 2021-11-30 19:07:322706browse
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!
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>
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>
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>
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>
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>
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>
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>
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!
Related articles
See more- A brief discussion on how to wrap columns in Bootstrap grid layout
- A brief discussion on how to sort and offset columns in Bootstrap grid layout
- How to use tables in Bootstrap? A brief analysis of the usage of powerful tables
- How to add navigation components and tab components in Bootstrap? A brief analysis of usage
- How to add navigation toolbar in Bootstrap? A brief analysis on the usage of Navbar component