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 相关文章推荐
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
Aug 09 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
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
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
javascript基本语法
2016/05/31 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
python 统计代码行数简单实例
2017/05/04 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
小学教师培训感言
2014/02/11 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
支行行长竞聘报告
2014/11/06 职场文书
入党介绍人意见范文
2015/06/01 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
Redis 限流器
2022/05/15 Redis
服务器nginx权限被拒绝解决案例
2022/09/23 Servers
使用CSS实现音波加载效果
2023/05/07 HTML / CSS