章节
问答
课签
笔记
评论
占位
占位

标签

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

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

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

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

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

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

使用原理:

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

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

运行效果见右侧结果窗口。

实现原理:

/*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;
}

颜色样式设置:

和按钮元素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.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;
}

任务

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?