在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。如下图所示:
那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。
既然他是一个独立的组件,当然在不同的版本下有不同的文件:
☑ LESS版本:对应的源文件label.less
☑ Sass版本:对应的源文件_label.scss
☑ 编译后版本:bootstrap.css文件第4261行~第4327行
使用原理:
使用方法很简单,你可以在使用span这样的行内标签:
Example heading New
运行效果见右侧结果窗口。
实现原理:
/*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;}
颜色样式设置:
和按钮元素button类似,label样式也提供了多种颜色:
☑ label-deafult:默认标签,深灰色
☑ label-primary:主要标签,深蓝色
☑ label-success:成功标签,绿色
☑ label-info:信息标签,浅蓝色
☑ label-warning:警告标签,橙色
☑ label-danger:错误标签,红色
主要是通过这几个类名来修改背景颜色和文本颜色:
默认标签主要标签成功标签信息标签警告标签错误标签
运行效果见右侧结果窗口。
颜色实现原理:
/*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;}