您的位置：首页 > Web前端 > BootStrap

Bootstrap 标签的变体实例样式

2015-11-16 16:33 399 查看

Bootstrap 标签样式，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 标签的变体</title>
<style type="text/css">
.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}
.label[href]:hover,.label[href]:focus{color:#fff;text-decoration:none;cursor:pointer}
.label:empty{display:none}
.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}
</style>
</head>
<body>
<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>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Bootstrap 标签的变体 实例样式

Bootstrap 标签的变体实例样式