Bootstrap每天必学之标签与徽章


Posted in Javascript onNovember 27, 2015

1、标签

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

Bootstrap每天必学之标签与徽章

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

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

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

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

☑ 编译后版本:bootstrap.css文件第4261行~第4327行

1)、使用原理:

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

<h3>Example heading <span class="label label-default">New</span></h3>

运行效果:

Bootstrap每天必学之标签与徽章

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-warning:警告标签,橙色

☑ label-danger:错误标签,红色

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

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

运行效果:

Bootstrap每天必学之标签与徽章

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每天必学之标签与徽章

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

对应的文件版本:

☑ LESS版本:源文件badges.less

☑ Sass版本:源文件_badges.scss

☑ 编译后版本:bootstrap.css文件第4328行~第4366行

使用方法:

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

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

运行效果:

Bootstrap每天必学之标签与徽章

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>

运行效果

Bootstrap每天必学之标签与徽章

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每天必学之标签与徽章

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

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

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

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

Javascript 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
AngularJS实现路由实例
Feb 12 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
Bootstrap每天必学之导航条
Nov 27 #Javascript
javascript设计模式--策略模式之输入验证
Nov 27 #Javascript
jQuery实现图片预加载效果
Nov 27 #Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 #Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 #Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 #Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 #Javascript
You might like
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
ExtJS 入门
2010/10/29 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python实现BackPropagation算法
2017/12/14 Python
Python subprocess模块常见用法分析
2018/06/12 Python
python动态进度条的实现代码
2019/07/03 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
平面设计自荐信
2013/10/07 职场文书
生态学毕业生自荐信
2013/10/27 职场文书
车间班长岗位职责
2013/11/30 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
教学评估实施方案
2014/03/16 职场文书
公司踏青活动方案
2014/08/16 职场文书
学习普通话的体会
2014/11/07 职场文书
小学同学聚会感言
2015/07/30 职场文书
总结Python常用的魔法方法
2021/05/25 Python
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技