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 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
js继承的实现代码
Aug 05 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
js中unicode转码方法详解
Oct 09 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
May 07 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
谈谈新手如何学习PHP
2006/12/23 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python实现调度算法代码详解
2017/12/01 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
Python装饰器用法实例总结
2018/05/26 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python Kmeans算法原理深入解析
2019/08/23 Python
python常用排序算法的实现代码
2019/11/08 Python
python exit出错原因整理
2020/08/31 Python
.NET程序员的数据库面试题
2012/10/10 面试题
母校寄语大全
2014/04/10 职场文书
政府采购方案
2014/06/12 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2014年实习生工作总结
2014/11/27 职场文书
教师个人教学总结
2015/02/11 职场文书
公司表扬稿范文
2015/05/05 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
生产车间管理制度
2015/08/04 职场文书
品德与社会教学反思
2016/02/24 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js
nginx日志格式分析和修改
2022/04/28 Servers