zoukankan      html  css  js  c++  java
  • Bootstrap 标签的变体 实例样式

    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>            
  • 相关阅读:
    Maccms后门分析复现(并非官网的Maccms){10.15 第二十二天}
    BurpSuite详解
    java数据类型转换
    java常用关键字(static、final、this、super)
    工厂设计模式
    java singleton(单例设计模式)
    完成一个springboot项目的完整总结------三
    完成一个springboot项目的完整总结-------二
    完成一个springboot项目的完整总结一
    ER图的构建
  • 原文地址:https://www.cnblogs.com/wsk198726/p/4969303.html
Copyright © 2011-2022 走看看