Bootstrap < Fundamentals 21 > Badge (badges)

Source: Internet
Author: User

Bootstrap badge (badges). Badges are similar to labels, and the main difference is that the edges of the badges are more rounded.

Badges (badges) are primarily used to highlight new or unread items. To use badges, simply add the <span class= "badge" > to these elements such as links, Bootstrap navigation, and so on.

The following example demonstrates this:

<! DOCTYPE html>

The results are as follows:

When there are no new or unread items, through CSS : The empty selector, the badge folds up to indicate that there is no content inside.

Activating navigation State

You can place badges in the capsule navigation and list navigation in the activation state. Activate the link by using <span class= "badge" > , as shown in the following example:

<! DOCTYPE html>Home Page</a> </li> <li><a href= "#" > Introduction </a></li> <li> <a href= "#" > <span class= "badge pull-right" >3</span>message</a> </li></ul></body>

The results are as follows:

Series Articles:Bootstrap < Fundamentals > CSS Overview

bootstrap< Basic two > network system

bootstrap< Basic three > typesetting

bootstrap< basic Four > code

Bootstrap < Fundamentals five > forms

bootstrap< basic six > form

Bootstrap < basic seven > button

Bootstrap < basics eight > pictures

bootstrap< Basic Nine > Auxiliary class

bootstrap< Basic 10 > responsive Utility

bootstrap< Basic 11 > Font icons (glyphicons)

Bootstrap < Basics 12 > drop-down menu (dropdowns)

bootstrap< Basic 13 > button Group

bootstrap< Basic 14 > button drop-down menu

bootstrap< Basic 15 > Input Frame Group

bootstrap< basic 16 > Navigation elements

bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < basics 21 > badges (Badges)

Bootstrap < Fundamentals 21 > Badge (badges)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.