Web Front-end
Bootstrap Tutorial
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
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 id="Example-nbsp-heading-nbsp-span-nbsp-class-badge-nbsp-bg-info-nbsp-New-span">Example heading <span class="badge bg-info ">New</span></h1>
<h2 id="Example-nbsp-heading-nbsp-span-nbsp-class-badge-nbsp-bg-danger-nbsp-Hot-span">Example heading <span class="badge bg-danger ">Hot</span></h2>
<h3 id="Example-nbsp-heading-nbsp-span-nbsp-class-badge-nbsp-bg-info-nbsp-New-span">Example heading <span class="badge bg-info ">New</span></h3>
<h4 id="Example-nbsp-heading-nbsp-span-nbsp-class-badge-nbsp-bg-info-nbsp-New-span">Example heading <span class="badge bg-info ">New</span></h4>
<h5 id="Example-nbsp-heading-nbsp-span-nbsp-class-badge-nbsp-bg-info-nbsp-New-span">Example heading <span class="badge bg-info ">New</span></h5>
<h6 id="Example-nbsp-heading-nbsp-span-nbsp-class-badge-nbsp-bg-info-nbsp-New-span">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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1381
52
How to get the bootstrap search bar
Apr 07, 2025 pm 03:33 PM
How to use Bootstrap to get the value of the search bar: Determines the ID or name of the search bar. Use JavaScript to get DOM elements. Gets the value of the element. Perform the required actions.
How to do vertical centering of bootstrap
Apr 07, 2025 pm 03:21 PM
Use Bootstrap to implement vertical centering: flexbox method: Use the d-flex, justify-content-center, and align-items-center classes to place elements in the flexbox container. align-items-center class method: For browsers that do not support flexbox, use the align-items-center class, provided that the parent element has a defined height.
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to view the date of bootstrap
Apr 07, 2025 pm 03:03 PM
Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.
