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

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.