Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use badge icon components in Bootstrap". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how to use the badge icon component in Bootstrap.

1 structure of badge (Badge)

Badges are usually used in the navigation bar, title, button, and a small area to the right of the avatar to count (such as n unread messages) or to identify newly released new, hot hot, and so on. By using relative font size and em units, the badge can be scaled to match the size of the immediate parent element. Starting with Bootstrap5, badges no longer have the focus or hover style of a link.

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

Text content 2 badges are used for text

When the badge is used for text, it automatically resizes to match the text.

badge

Example heading New Example heading Hot Example heading New

3 for buttons

Badges can provide counters as part of a link or button.

Unread message 4

Note that depending on how they are used, badges may confuse users of screen readers and similar assistive technologies. Although the style of the badge provides a visual hint of its purpose, these users only need to see the contents of the badge. Depending on the situation, these badges may look like random additional words or numbers at the end of sentences, links, or buttons.

Unless the context is clear (such as the "unread messages" example, where "4" is the number of notifications), consider including additional context in visually hidden additional text fragments.

Personal Center 9 unread message

Note that this hidden tag will not be displayed in front of the user, and there is no hint for hovering over the mouse, if you want to hover with a hint, you can add title to the button or badge, the difference is that adding on the button, the mouse hover over the entire button has a hint, added on the span tag, there is only a hint when the mouse points to the number 9, there is a delay in hovering, and it should be placed on it for a few seconds.

Personal Centre 9 personal Centre 9

4 background color

Use the provided utility class to quickly change the appearance of the badge. Note that when using Bootstrap's default. Bg-light, you may need a text color utility, such as. Text-dark, to get the correct style. This is because the background utility sets only the background color.

PrimarySecondarySuccessDangerWarningInfoLightDark

5 capsule badge

Use the .rounded-pill utility class to make the badge more round and have a larger boundary radius.

PrimarySecondarySuccessDangerWarningInfoLightDark

At this point, I believe you have a deeper understanding of "how to use badge icon components in Bootstrap". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.