深入理解BootStrap Item12 -- 标签(label)与徽章(badge)
1、标签
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。如下图所示:
那么在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>
运行效果:
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>
运行效果:
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框架中,把这种效果称作为徽章效果,使用“badge
”样式来实现。
对应的文件版本:
☑ LESS版本:源文件badges.less
☑ Sass版本:源文件_badges.scss
☑ 编译后版本:bootstrap.css
文件第4328行~第4366行
使用方法:
使用方法,其实也没什么太多可说的,你可以像标签一样,使用span标签来制作,然后为他加入badge类:
<a href="#">Inbox <span class="badge">42</span></a>
运行效果:
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>
运行效果
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.css文件第4345行~第4366行。
注意:不过和标签组件不一样的是:在徽章组件中没有提供多种颜色风格的效果,不过你也可以通过badges.less或者_badges.scss快速自定义。此处对不做过多阐述。
深入理解BootStrap Item12 -- 标签(label)与徽章(badge)相关推荐
- Bootstrap—标签label和徽章badge
label .label label-default 默认的灰色标签 .label label-primary "primary" 类型的蓝色标签 .label label-suc ...
- cocos2dx[3.2]——新字体标签Label
[唠叨] 在3.x中,废弃了2.x里的LabelTTF.LabelAtlas.LabelBMFont三个字体类,取而代之的是全新的字体标签Label. 实际上Label是将三个字体类进行了融合,进行统 ...
- cocos2dx[3.x](6) ——新字体标签Label
在3.x中,废弃了2.x里的LabelTTF.LabelAtlas.LabelBMFont三个字体类,取而代之的是全新的字体标签Label. 实际上Label是将三个字体类进行了融合,进行统一的管理与 ...
- 总结Cocos2d-x 3.0 中新字体标签Label
来源网址:http://cn.cocos2d-x.org/tutorial/show?id=1624 在3.x中,废弃了2.x里的LabelTTF.LabelAtlas.LabelBMFont三个字体 ...
- 小tips:JS之按位取反,语法标签label,正则表达式中replace的0,1是什么?
JS按位取反 Javascript 按位取反运算符 (~) ,对一个表达式执行位非(求非)运算.如 ~1 = -2; ~2 = -3; 来看看~1的计算步骤: 将1(这里叫:原码)转二进制 = 000 ...
- BootStrap之标签页切换
标签页切换 标签页切换 标签页插件 第一个官方例子 调用tab("show")显示tab-pane中的内容 第一个例子的HTML+CSS代码 fade in效果 函数介绍 前提条件 ...
- java label 标签_Java标签(Label)
本篇文章帮大家学习java标签(Label),包含了Java标签(Label)使用方法.操作技巧.实例演示和注意事项,有一定的学习价值,大家可以用来参考. Java 中的标签是为循环设计的,是为了在多 ...
- k8s标签(label)的使用
1.在yaml文件里添加标签 apiVersion: v1 kind: Pod metadata:labels:app: test02run: kubia ...... ...... 2.查看列表时显 ...
- Java - 标签(label)
标签(label) 在Java中, 标签必须在循环之前使用, 一个循环之中嵌套另一个循环的开关, 从多重嵌套中continue或break. 语法 label: @Testpublic void te ...
最新文章
- 配置apache+php环境详解
- 深入浅出设计模式原则之里氏代换原则(Liskov Substitution Principle)
- 微服务架构何去何从?
- [密码学基础][信息安全][每个信息安全博士生应该知道的52件事][Bristol Cryptography][第一篇]不同类型的处理器
- go json的key为数字怎么解析_golang向interface{}解析json时把所有的数字都当成float64...
- oracle 删除行记录,使用实体框架从oracle数据库中删除记录
- 剑指offer(C++)-JZ82:二叉树中和为某一值的路径(一)(数据结构-树)
- jQuery addClass
- 宋宝华:论Linux的页迁移(Page Migration)完整版
- Verilog语法概述(一)
- 深度学习之目标检测--Pytorch实战
- 全面风险管理体系架构图
- Java基础学习:尚硅谷项目三 开发团队调度软件
- 简单典型二阶系统_MIT—微分方程与线性代数笔记2.1 二阶常微分方程
- 基于MATLAB的全局多项式插值法(趋势面法)与逆距离加权(IDW)法插值与结果分析
- 用popart构建常染色体单倍型网络(Autosomal haplotypes network construction with popart)...
- Spring Cloud NetFilx学习
- 《succes can be a lonely road》 【istrangeboy精品英文励志短文系列】之最美英文励志诗《成功是一条孤独之路》英译汉
- 电脑软件怎么设置开机自启动
- 拥抱SVG:苦恼于图片适配 in Android?