Bootstrap tags and badges _javascript tips for everyday learning

1, label

In some Web pages, a tag is often added to tell the user about additional information, such as adding a new navigation item to the navigation and perhaps adding a "new" tag to tell the user. This is the newly added navigation item. As shown in the following illustration:

This effect is deliberately extracted from the bootstrap framework as a label component and highlighted in the ". Label" style.

Since he is a stand-alone component, of course, there are different files under different versions:

☑less version: corresponding source file label.less

☑sass version: corresponding source file _label.scss

☑ compiled version:bootstrap.css file No. 4261 line ~ No. 4327 Line

1), the principle of use:

The use of the method is very simple, you can use a span such as the line tag:

Copy Code code as follows:

Operation Effect:

2), the principle of realization:

/bootstrap.css file line No. 4261 ~ No. 4272 Line

. 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 you're using a LABEL element to make it look better, remove the underline in the hover state:

/bootstrap.css file line No. 4273 ~4278 Line/

. Label[href]:hover,
. Label[href]:focus {
color: #fff;
Text-decoration:none;
Cursor:pointer;
}

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

. label:empty {
Display:none
}

3), Color style settings:

Like button element buttons, label styles also provide a variety of colors:

☑label-deafult: default label, dark Gray

☑label-primary: main label, dark blue

☑label-success: success label, Green

☑label-info: information label, light blue

☑label-warning: warning label, Orange

☑label-danger: error label, Red

The main is to modify the background color and text color by using these names:

<span class= "label Label-default" > Default label </span>
<span class= "label label-primary" > main tags </ span>
<span class= "label label-success" > Success label </span>
<span class= "label Label-info" > Information labels </span>
<span class= "label label-warning" > Warning label </span>
<span class= "label Label-danger "> Error label </span>

Operation Effect:

4, the principle of color realization:

/bootstrap.css file line No. 4286 ~ No. 4237 Line

. 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. Badge

In a sense, the badge effect is extremely similar to the label effect described earlier. is also used to do some informational use. What often happens is that some systems send out information, such as when you log on to your Twitter, and if you don't see the information, the system tells you how much information is unread, as shown in the following figure:

In the bootstrap framework, this effect is described as a badge effect and is implemented using the "badge" style.

The corresponding file version:

☑less Version: source file badges.less

☑sass Version: source file _badges.scss

☑ compiled version:bootstrap.css file No. 4328 line ~ No. 4366 Line

How to use:

There's not much to say about using the method, you can make it with a span tag like a label, and then add the badge class to him:

<a href= "#" >inbox <span class= "badge" >42</span></a>

Operation Effect:

1), the principle of realization:

It is mainly set to oval, and a background color is added:

/bootstrap.css file line No. 4328 ~ No. 4341 Line

. 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;
}

Also use ': empty ' pseudo elements that are hidden when there is no content:

. badge:empty {
Display:none
}

As the beginning says, badges can be used in conjunction with buttons or navigation:

<div class= "NavBar navbar-default" role= "navigation" >
<div class= "Navbar-header" >  <a href= "# #" class= "Navbar-brand" > Mu class network </a>
</div>
 <ul class= "Nav navbar-nav" >
   <li Class= "Active" ><a href= "# #" > Home </a></li>
   <li><a href= "# #" > Series of Tutorials </a> </li>
   <li><a href= "# #" > Teacher introduction </a></li>
   <li><a href= "#" > Success Case < span class= "badge" >23</span></a></li>
   <li><a href= "# #" > About Us </a></ li>
 </ul>
</div>　

Run effect

2), button and capsule-shaped navigation set badge:

In addition, badges in button element buttons and capsule-shaped navigation nav-pills can also have similar styles, except for different colors:

<ul class= nav nav-pills > <li class=
 "active" ><a href= "#" >home <span class= "badge" >42 </span></a></li>
 <li><a href= "#" >Profile</a></li>
 <li> <a href= "#" >messages <span class= "badge" >3</span></a></li>
</ul>
< br/>

Operation Effect:

Style code See BOOTSTRAP.CSS file line No. 4345 ~ No. 4366.

Note: However, unlike the tag component, there is no color-style effect available in the badge component, but you can also quickly customize it by badges.less or _badges.scss. There is no excessive elaboration here.

Through the introduction of the above, we have a general understanding of the label and the badge, I hope that the labels and badges applied to their own website, the real practice of learning.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course