Bootstrap每天必学之标签与徽章资源-CSDN文库

69 浏览量 2020-11-23 18:32:57 上传评论收藏 174KB PDF 举报

资源推荐

资源详情

资源评论

Bootstrap每天必学之标签与徽章每天必学之标签与徽章

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：：默认标签，深灰色

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38677255

粉丝: 6
资源: 931

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip