• bootstrap之 Badge 角标


    添加 .am-badge class 到 <div> 或者 <span> 元素。

    默认样式

     
     
    <span class="am-badge">1</span>
    <span class="am-badge am-badge-primary">2</span>
    <span class="am-badge am-badge-secondary">3</span>
    <span class="am-badge am-badge-success">4</span>
    <span class="am-badge am-badge-warning">5</span>
    <span class="am-badge am-badge-danger">6</span>
    <span class="am-badge am-badge-success">Allmobilize</span>
    <br>
    <a class="am-badge am-badge-primary">Free</a>
    <a class="am-badge am-badge-secondary">Secondary</a>
    <a class="am-badge am-badge-success">Success</a>
    <a class="am-badge am-badge-warning">Warning</a>
    <a class="am-badge am-badge-danger">Danger</a>
    

    圆角样式

    在默认样式的基础上添加 .am-radius class。

    <span class="am-badge am-radius">1</span>
    <span class="am-badge am-badge-primary am-radius">2</span>
    <span class="am-badge am-badge-secondary am-radius">3</span>
    <span class="am-badge am-badge-success am-radius">4</span>
    <span class="am-badge am-badge-warning am-radius">5</span>
    <span class="am-badge am-badge-danger am-radius">6</span>
    <span class="am-badge am-badge-success am-radius">Allmobilize</span>
    <br>
    <a class="am-badge am-badge-primary am-radius">Free</a>
    <a class="am-badge am-badge-secondary am-radius">Secondary</a>
    <a class="am-badge am-badge-success am-radius">Success</a>
    <a class="am-badge am-badge-warning am-radius">Warning</a>
    <a class="am-badge am-badge-danger am-radius">Danger</a>
    

    直角样式

    在默认样式的基础上添加 .am-square class。

    <span class="am-badge am-square">1</span>
    <span class="am-badge am-badge-primary am-square">2</span>
    <span class="am-badge am-badge-secondary am-square">3</span>
    <span class="am-badge am-badge-success am-square">4</span>
    <span class="am-badge am-badge-warning am-square">5</span>
    <span class="am-badge am-badge-danger am-square">6</span>
    <span class="am-badge am-badge-success am-square">Allmobilize</span>
    <br>
    <a class="am-badge am-badge-primary am-square">Free</a>
    <a class="am-badge am-badge-secondary am-square">Secondary</a>
    <a class="am-badge am-badge-success am-square">Success</a>
    <a class="am-badge am-badge-warning am-square">Warning</a>
    <a class="am-badge am-badge-danger am-square">Danger</a>
  • 相关阅读:
    定时器Timer的使用
    Queue和BlockingQueue的使用以及使用BlockingQueue实现生产者-消费者
    ReentrantReadWriteLock读写锁的使用
    利用Lucene与Nutch构建简单的全文搜索引擎
    再见了,DM
    互联网公司高并发图片(缩略图)处理中间层服务架构设计一
    poj 3131 双向搜索+hash判重
    [置顶] linux常用命令大全
    堆排序
    iOS UIView非常用方法及属性详解
  • 原文地址:https://www.cnblogs.com/jokerjason/p/5720536.html
Copyright © 2020-2023  润新知