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>
  • 相关阅读:
    设计模式(一)工厂模式Factory(创建型)
    Caused by: org.springframework.beans.factory.BeanCreationException
    从Delphi 7升级到Delphi XE
    system strategies of Resources Deadlock
    Service Manager流程,派BC_REPLY,唤醒FregServer流程,返回BR_TRANSACTION_COMPLETE,睡眠等待proc-&gt;wait
    Sqlserver2000联系Oracle11G数据库进行实时数据的同步
    火柴移动面试题
    Eclipse4.4设备egit插件提交本地项目代码到远程仓库
    V离MWare至Openstack至FDIO
    【BZOJ1791】【IOI2008】【基环树】island(status第一速度)
  • 原文地址:https://www.cnblogs.com/jokerjason/p/5720536.html
Copyright © 2011-2022 走看看