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>
  • 相关阅读:
    .net从网络接口地址获取json,然后解析成对象(一)
    .net获取本地ip地址
    .net上传文件,利用npoi读取文件信息到datatable里
    .net利用NPOI生成excel文件
    .NET获取城市信息(将三字代码转换成城市名)
    JS下拉页面时一个横幅的样式和js
    整数中1出现的次数(1~n)
    连续子数组的最大和
    最小的K个数
    数组中出现次数超过一半的数字
  • 原文地址:https://www.cnblogs.com/jokerjason/p/5720536.html
Copyright © 2011-2022 走看看