Every day, Bootstrap must learn labels and badges _ javascript skills

Source: Internet
Author: User
Every day, Bootstrap has to learn about the tags and badges and has little knowledge about the Bootstrap tags and badges. I hope you can learn more about the Bootstrap tags and badges through this article. 1. Labels

In some Web pages, a tag is often added to indicate some additional information. For example, if a new navigation item is added to the navigation, a "new" tag may be added, to tell the user. This is the newly added navigation item. As shown in:

In the Bootstrap framework, this effect is extracted into a tag component and highlighted in the ". label" style.

Since it is an independent component, of course there are different files in different versions:

☑LESS version:Corresponding source file label. less

☑Sass version:Corresponding source file _ label. scss

☑Compiled version:Bootstrap.css file 4,261st lines ~ 4,327th rows

1) usage principle:

The method is simple. You can use the line label like span:

The Code is as follows:

Example heading New

Running effect:

2) implementation principle:

/Bootstrap.css file 4,261st lines ~ 4,272nd rows/

.label {display: inline;padding: .2em .6em .3em;font-size: 75%;font-weight: bold;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;border-radius: .25em;}

If the label element is used for creation, remove the underline in the hover state to make it more beautiful:

/Bootstrap.css file 4,273rd lines ~ 4278 rows/

.label[href]:hover,.label[href]:focus {color: #fff;text-decoration: none;cursor: pointer;}

Sometimes, when there is no content in the tag, you can use the empty pseudo element of CSS3 to hide it:

.label:empty {display: none;}

3) Color Style settings:

Similar to the button element, the label style also provides multiple colors:

☑Label-deafult:Default label, dark gray

☑Label-primary:Main tag, dark blue

☑Label-success:Success tag, green

☑Label-info:Information tag, light blue

☑Label-warning:Warning Label, orange

☑Label-danger:Error tag, red

You can modify the background color and text color by using these class names:

Default tag main tag successful Tag Information tag warning tag error tag

Running effect:

4. Color implementation principle:

/Bootstrap.css file 4,286th lines ~ 4,237th rows/

.label-default {background-color: #999;}.label-default[href]:hover,.label-default[href]:focus {background-color: #808080;}.label-primary {background-color: #428bca;}.label-primary[href]:hover,.label-primary[href]:focus {background-color: #3071a9;}.label-success {background-color: #5cb85c;}.label-success[href]:hover,.label-success[href]:focus {background-color: #449d44;}.label-info {background-color: #5bc0de;}.label-info[href]:hover,.label-info[href]:focus {background-color: #31b0d5;}.label-warning {background-color: #f0ad4e;}.label-warning[href]:hover,.label-warning[href]:focus {background-color: #ec971f;}.label-danger {background-color: #d9534f;}.label-danger[href]:hover,.label-danger[href]:focus {background-color: #c9302c;}

2. Badges

In a sense, the badge effect is very similar to the tag effect described above. It is also used for prompts. It is often the information sent by some systems. For example, if you log on to your twitter, the system will tell you how much information has not been read, as shown in:

In the Bootstrap framework, this effect is called a badge effect and implemented using the "badge" style.

Corresponding file version:

☑LESS version:Source File badges. less

☑Sass version:Source file _ badges. scss

☑Compiled version:Bootstrap.css file 4,328th lines ~ 4,366th rows

Usage:

There is nothing to say about how to use it. You can use the span label like a label and add the badge class to it:

Inbox 42

Running effect:

1) implementation principle:

It is mainly set to an elliptical shape, and a background color is added:

/Bootstrap.css file 4,328th lines ~ 4,341st rows/

.badge {display: inline-block;min-width: 10px;padding: 3px 7px;font-size: 12px;font-weight: bold;line-height: 1;color: #fff;text-align: center;white-space: nowrap;vertical-align: baseline;background-color: #999;border-radius: 10px;}

You can also use the ': empty' pseudo element to hide it when there is no content:

.badge:empty {display: none;}

As mentioned at the beginning, the badge can be used with buttons or navigation:

 

MOOC

  • Homepage
  • Series tutorials
  • Instructor Introduction
  • Success Story 23
  • About us

Running Effect

2), buttons and capsule navigation settings badges:

In addition, the badge can have a similar style in the button element button and capsule navigation nav-pills, except that the color varies:

 
 
  • Home 42
  • Profile
  • Messages 3

Running effect:

For the sample code, please refer to the bootstrap.css file line 4,345th ~ 4,366th rows.

Note: Unlike the tag component, the badge component does not provide a variety of color effects, but you can also use badges. less or _ badges. scss to quickly customize it. I will not elaborate too much here.

Through the introduction above, do you have a rough understanding of tags and badges? I hope you can apply tags and badges to your own websites and apply them to your websites.

Related Article

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.