1、标签
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。如下图所示:
那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件,并且以“.label”样式来实现高亮显示。
既然他是一个独立的组件,当然在不同的版本下有不同的文件:
☑ LESS版本:对应的源文件label.less
☑ Sass版本:对应的源文件_label.scss
☑ 编译后版本:bootstrap.css文件第4261行~第4327行
1)、使用原理:
使用方法很简单,你可以在使用span这样的行内标签:
运行效果:
2)、实现原理:
/bootstrap.css文件第4261行~第4272行/
1 2 3 4 5 6 7 8 9 10 11 12 | .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行/
1 2 3 4 5 6 | .label[href]:hover, .label[href]:focus { color : #fff ; text-decoration : none ; cursor : pointer ; } |
有的时候标签内没有内容的时候,可以借助CSS3的:empty伪元素将其隐藏:
1 2 3 | .label:empty { display : none ; } |
3)、颜色样式设置:
和按钮元素button类似,label样式也提供了多种颜色:
☑ label-deafult:默认标签,深灰色
☑ label-primary:主要标签,深蓝色
☑ label-success:成功标签,绿色
☑ label-info:信息标签,浅蓝色
☑ label-warning:警告标签,橙色
☑ label-danger:错误标签,红色
主要是通过这几个类名来修改背景颜色和文本颜色:
1 2 3 4 5 6 | < 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 > |
运行效果:
4、颜色实现原理:
/bootstrap.css文件第4286行~第4237行/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | .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类:
1 | < a href = "#" >Inbox < span class = "badge" >42</ span ></ a > |
运行效果:
1)、实现原理:
主要将其设置为椭圆形,并且加了一个背景色:
/bootstrap.css文件第4328行~第4341行/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .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`伪元素,当没有内容的时候隐藏:
1 2 3 | .badge:empty { display : none ; } |
正如开头所说,可以将徽章与按钮或者导航之类配合使用:
1 2 3 4 5 6 7 8 9 10 11 12 | < 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也可以有类似的样式,只不过是颜色不同而以:
1 2 3 4 5 6 | < 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快速自定义。此处对不做过多阐述。
通过上文的介绍大家对标签和徽章是不是有了大概的了解,希望大家把标签和徽章应用到自己的网站中,真正的做到学以致用。
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程Bootstrap实战教程
如对本文有疑问,请提交到交流社区,广大热心网友会为你解答!! 点击进入社区
联系客服