Bootstrap每天必学之标签与徽章

Bootstrap每天必学之标签与徽章

1、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示：

那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。

既然他是一个独立的组件，当然在不同的版本下有不同的文件：

☑ LESS版本：对应的源文件label.less

☑ Sass版本：对应的源文件_label.scss

☑ 编译后版本：bootstrap.css文件第4261行～第4327行

1）、使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

复制代码 代码如下:

运行效果：

2）、实现原理：

/bootstrap.css文件第4261行～第4272行/

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

}

如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类：

/bootstrap.css文件第4273行～4278行/

.label[href]:hover,

.label[href]:focus {

color: #fff;

text-decoration: none;

cursor: pointer;

}

有的时候标签内没有内容的时候，可以借助CSS3的:empty伪元素将其隐藏：

.label:empty {

display: none;

}

3）、颜色样式设置：

和按钮元素button类似，label样式也提供了多种颜色：

☑ label-deafult：默认标签，深灰色

☑ label-primary：主要标签，深蓝色

☑ label-success：成功标签，绿色

☑ label-info：信息标签，浅蓝色

☑ label-whttp://arning：警告标签，橙色

☑ label-danger：错误标签，红色

主要是通过这几个类名来修改背景颜色和文本颜色：

默认标签

主要标签

成功标签

信息标签

警告标签

错误标签

运行效果：

4、颜色实现原理：

/bootstrap.css文件第4286行～第4237行/

.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、徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，如下图所示：

在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。

对应的文件版本：

☑ LESS版本：源文件badges.less

☑ Sass版本：源文件_badges.scss

☑ 编译后版本：bootstrap.css文件第4328行～第4366行

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

Inbox 42

运行效果:

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;

}

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

　 慕课网

运行效果

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

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

运行效果:

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

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

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

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程

Bootstrap实战教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。