zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Linux下使用rm删除文件,并排除指定文件
    使用use index优化sql查询
    PHP面试中经常出现的composer 问题总结
    MySQL全局锁库锁表
    《MySQL必懂系列》全局锁、表级锁、行锁
    Redis面试题(2020最新版)
    What is stabs?
    链接与加载
    MachO之Segment初探
    为什么要在预编译头中加__OBJC__?
  • 原文地址:https://www.cnblogs.com/jokerjason/p/5720536.html
Copyright © 2011-2022 走看看