Bootstrap must-learn labels and badges every day_javascript skills

1. Tags

In some web pages, a tag is often added to tell the user 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 a newly added navigation item. As shown below:

Then this effect is specially extracted into a label component in the Bootstrap framework, 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: Line 4261~Line 4327 of bootstrap.css file

1), usage principle:

The method of use is very simple, you can use an inline tag like span:

Operating effect:

2), implementation principle:

/Line 4261~Line 4272 of the bootstrap.css file/

.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 use the a tag element to make it, in order to make it more beautiful, remove the underline and the like in the hover state:

/Line 4273~Line 4278 of the bootstrap.css file/

.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 CSS3’s :empty pseudo-element to hide it:

.label:empty {
display: none;
}

3), color style setting:

Similar to the button element button, the label style also provides a variety of colors:

☑ label-deafult: Default label, dark gray

☑ label-primary：primary label, dark blue

☑ label-success: Success label, green

☑ label-info: Information label, light blue

☑ label-warning: warning label, orange

☑ label-danger: wrong label, red

Mainly use these class names to modify the background color and text color:

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">错误标签</span>

Operating effect:

4. Color implementation principle:

/Line 4286~Line 4237 of the bootstrap.css file/

.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 very similar to the label effect introduced earlier. It is also used to make some prompt messages. What often appears are messages sent by some systems. For example, after you log in to your Twitter, if you have not read the messages, the system will tell you how many messages are unread, as shown in the figure below:

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

Corresponding file version:

☑ LESS version: Source file badges.less

☑ Sass version: Source file_badges.scss

☑ Compiled version: Line 4328~Line 4366 of bootstrap.css file

How to use:

In fact, there is not much to say about how to use it. You can use span tags to make them like tags, and then add the badge class to it:

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

运行效果:

1）、实现原理：

主要将其设置为椭圆形，并且加了一个背景色：

/bootstrap.css文件第4328行～第4341行/

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

同样也使用`:empty`伪元素，当没有内容的时候隐藏：

.badge:empty {
display: none;
}

正如开头所说，可以将徽章与按钮或者导航之类配合使用：

<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　    <a href="##" class="navbar-brand">慕课网</a>
　</div>
 <ul class="nav navbar-nav">
     <li class="active"><a href="##">网站首页</a></li>
     <li><a href="##">系列教程</a></li>
     <li><a href="##">名师介绍</a></li>
     <li><a href="##">成功案例<span class="badge">23</span></a></li>
     <li><a href="##">关于我们</a></li>
 </ul>
</div>

运行效果

2）、按钮和胶囊形导航设置徽章：

另外，徽章在按钮元素button和胶囊形导航nav-pills也可以有类似的样式，只不过是颜色不同而以：

<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 />

 运行效果:

样式代码请查看bootstrap.css文件第4345行～第4366行。

注意：不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。

通过上文的介绍大家对标签和徽章是不是有了大概的了解，希望大家把标签和徽章应用到自己的网站中，真正的做到学以致用。