便签与标号

HTML代码

<span class="label label-default radius">默认</span><span class="label label-primary radius">主要</span><span class="label label-secondary radius">次要</span><span class="label label-success radius">成功</span><span class="label label-warning radius">警告</span><span class="label label-danger radius">危险</span>
<span class="badge badge-default radius">默认</span><span class="badge badge-primary radius">主要</span><span class="badge badge-secondary radius">次要</span><span class="badge badge-success radius">成功</span><span class="badge badge-warning radius">警告</span><span class="badge badge-danger radius">危险</span>

CSS代码

.label, .badge{display: inline-block;padding:2px 4px;font-size: 11.844px;font-weight: bold;line-height:14px;color: #fff;white-space: nowrap;vertical-align: baseline;background-color: #999}
/*圆角*/
.label.radius{border-radius: 3px}
.badge{padding-right:9px;padding-left:9px;border-radius:9px}
.label:empty, .badge:empty{display: none}
a.label:hover, a.label:focus, a.badge:hover, a.badge:focus{color: #fff;text-decoration: none;cursor: pointer}

/*默认*/
.label-default, .badge-default{background-color: #e6e6e6; color:#333}
.label-default[href], .badge-default[href]{background-color: #e6e6e6;color:#333}

/*主要*/
.label-primary, .badge-primary{background-color: #5a98de}
.label-primary[href], .badge-primary[href]{background-color: #5a98de}

/*主要*/
.label-secondary, .badge-secondary{background-color: #3bb4f2}
.label-secondary[href], .badge-secondary[href]{background-color: #3bb4f2}

/*成功*/
.label-success, .badge-success{background-color:#5eb95e}
.label-success[href], .badge-success[href]{background-color: #5eb95e}

/*警告*/
.label-warning, .badge-warning{background-color: #f37b1d}
.label-warning[href], .badge-warning[href]{background-color: #f37b1d}

/*危险*/
.label-danger, .badge-danger{background-color: #dd514c}
.label-danger[href], .badge-danger[href]{background-color: #dd514c}