This is the 18th day of my participation in Gwen Challenge
“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day.
18.1 Structure of Badge
Badges are commonly used in navigation bars, titles, buttons, a small area to the right of an avatar, to count (e.g., n unread messages) or to identify new releases new, hot, etc. By using relative font sizes and EM units, badges can be scaled to match the size of the immediate parent element. Starting with Bootstrap5, badges no longer have linked focus or hover styles.
Badge structure is very simple, is a SPAN tag, containing two classes, badge indicates the badge, BG -* is the background color. You can also use text-* to set the font color.
<span class="badge bg-secondary"< span style = "max-width: 100%; clear: both; min-height: 1em;Copy the code18.2 Badges are used for text
Badge when used for text, automatically resizes to match text.
<! doctype html> <html lang="zh-CN"> <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 > badge < / title > < / head > < body > < div class =" container "> < 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 the code
18.3 Buttons
Badges can be used as part of links or buttons to provide counters.
<button type="button" class="btn btn-primary"> unread messages <spanclass="badge bg-secondary">4</span>
</button>
Copy the code
Unless the context is clear (as in the “unread message” example, where “4” is understood to be the number of notifications), consider including the additional context in the visually hidden additional text fragment.
<button type="button" class="btn btn-primary""> <span style =" max-width: 100%class="badge bg-secondary">9</span>
<span class="visually-hidden">Unread messages</span>
</button>
Copy the code
Note that the hidden tags will not display in front of the user, hovering and no hint, if you think there is a prompt mouseover, you can add a title, or for the button badges, add on the button, the mouse hover in the whole button has a hint, add in span on the label, only refers to the number nine mouse have a prompt, hover time delay, I’m gonna put it on for a couple of seconds.
<button type="button" class="btn btn-primary""> <span style =" max-width: 100%class="badge bg-secondary" title="You have nine unread messages" >9</span>
</button>
<button type="button" class="btn btn-primary" title="You have nine unread messages" >Personal center<span class="badge bg-secondary" >9</span>
</button>
Copy the code
18.4 Background color
Use the provided utility class to quickly change the look of the badge. Note that when using the default.bg-light of Bootstrap, you may need a text color utility, such as.text-dark, to get the correct style. 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 the code
18.5 Capsule badges
Use the.rounded-pill utility class to make the badge rounder 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 the code
Today’s course is here, please pay attention to me, timely learning an old Liu original “Bootstrap5 zero basis to master” section 19 Bootstrap5 Buttons component use, by the way, Bootstrap5 button component function is very powerful, content is also more, to be prepared.
If this article is helpful, please feel free to like it!