在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。如下图所示:
那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。
既然他是一个独立的组件,当然在不同的版本下有不同的文件:
☑ LESS版本:对应的源文件label.less
☑ Sass版本:对应的源文件_label.scss
☑ 编译后版本:bootstrap.css文件第4261行~第4327行
1)、使用原理:
使用方法很简单,你可以在使用span这样的行内标签:
运行效果:
2)、实现原理:
/bootstrap.css文件第4261行~第4272行/
rush:css;">
.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行/
rush:css;">
.label[href]:hover,.label[href]:focus {
color: #fff;
text-
decoration: none;
cursor: pointer;
}
有的时候标签内没有内容的时候,可以借助CSS3的:empty伪元素将其隐藏:
rush:css;">
.label:empty {
display: none;
}
3)、颜色样式设置:
和按钮元素button类似,label样式也提供了多种颜色:
☑ label-deafult:默认标签,深灰色
☑ label-primary:主要标签,深蓝色
☑ label-success:成功标签,绿色
☑ label-info:信息标签,浅蓝色
☑ label-warning:警告标签,橙色
☑ label-danger:错误标签,红色
主要是通过这几个类名来修改背景颜色和文本颜色:
rush:xhtml;">
默认标签
标签
标签
标签
标签
错误标签
运行效果:
4、颜色实现原理:
/bootstrap.css文件第4286行~第4237行/
rush:css;">
.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后,如果你信息没有看,系统会告诉你有多少信息未读,如下图所示:
效果称作为徽章效果,使用“badge”样式来实现。
对应的文件版本:
☑ LESS版本:源文件badges.less
☑ Sass版本:源文件_badges.scss
☑ 编译后版本:bootstrap.css文件第4328行~第4366行
使用方法:
使用方法,其实也没什么太多可说的,你可以像标签一样,使用span标签来制作,然后为他加入badge类:
运行效果:
1)、实现原理:
主要将其设置为椭圆形,并且加了一个背景色:
/bootstrap.css文件第4328行~第4341行/
rush:css;">
.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`伪元素,当没有内容的时候隐藏:
rush:css;">
.badge:empty {
display: none;
}
正如开头所说,可以将徽章与按钮或者导航之类配合使用: