添加 .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>

bootstrap之 Badge 角标的更多相关文章

  1. ShortcutBadgerDemo【安卓应用角标（badge）实现方案】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 本文主要使用的开源库是 leolin310148/ShortcutBadger,但是在其基础上做了一些修改. 什么是应用角标? 1. ...

  2. Android上的Badge，快速实现给应用添加角标

    应用角标是iOS的一个特色,原生Android并不支持.或许是因为当时iOS的通知栏比较鸡肋(当然现在已经改进了很多),而Android的通知栏功能强大?所以才出现了一方依赖于数字角标,一方坚持强大的 ...

  3. ShortcutBadger添加桌面角标（Badge）

    1.简介:角标原本是苹果的ios中的东西,android原生并不支持角标,因为google的意思是让大家用notification(提示栏)即可,不过无妨,厉害的android第三方厂商可以通过在自定 ...

  4. Android 为应用添加数字角标

    今天在论坛上看到了一个帖子,终于搞清了我很久以来的一个困惑,android到底能不能实现ios的角标效果,QQ是怎么实现的.看了这个帖子顿时终于解除了我的困惑. 先说一个下大概的思路: 大家都知道an ...

  5. 应用程序添加角标和tabBar添加角标，以及后台运行时显示

    1.设置角标的代码:   // 从后台取出来的数据可能是int型的不能直接给badgeValue(string类型的),需要通过description转化  NSString *count = [re ...

  6. iOS 未读消息角标 仿QQ拖拽 简单灵活 支持xib(源码)

    一.效果 二.简单用法 超级简单,2行代码集成:xib可0代码集成,只需拖一个view关联LFBadge类即可 //一般view上加角标 _badge1 = [[LFBadge alloc] init ...

  7. android 桌面图标添加数字角标

    是否支持角标并不与手机厂商有关,而是你当前使用的launcher开发厂商有关. 方法实现: import android.app.Application; import android.app.Not ...

  8. 通知角标(2)只用一个TextView实现

    可以只用一个TextView实现通知角标,TextView的setCompoundDrawables函数可以在TextView的上,下,左,右,4条边处分别指定一个图片.见图1: 这个图片如果在角上, ...

  9. 设置tabbar的角标与第三方库Masonry的基本使用

    // 设置tabbar的角标 [[[[[self tabBarController] viewControllers] objectAtIndex: 0] tabBarItem] setBadgeVa ...

随机推荐

  1. 对Lucene PhraseQuery的slop的理解[转载]

    所谓PhraseQuery,就是通过短语来检索,比如我想查“big car”这个短语,那么如果待匹配的document的指定项里包含了"big car"这个短语,这个documen ...

  2. (转) Virtual function

    原文地址:http://en.wikipedia.org/wiki/Virtual_function In object-oriented programming, a virtual functio ...

  3. CDZSC_2015寒假新人（2）——数学 P

    P - P Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  4. jdk配置环境变量

    介绍在linux下配置jdk环境变量的几种常用方法. 首先在linux下安装jdk,如果出现提示权限不够(且root下也提示权限不够),可用#ls -l filename命令查看一下,如果显示类似如: ...

  5. jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断

    jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...

  6. 在函数中处理html点击事件在标签中增加属性值来解决问题。

  7. 使用Spring Boot和Gradle创建AngularJS项目

    Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的 ...

  8. 360云后台（使用HTTP Cache服务器）

    工作职责:设计优化HTTP Cache服务器,负载均衡服务器,调度系统等核心系统开发优化CDN系统架构满足流量.性能.成本要求 技能要求: 精通Linux, C/C++语言,HTTP协议精通高性能服务 ...

  9. SQL Server 索引的自动维护 <第十三篇>

    在有大量事务的数据库中,表和索引随着时间的推移而碎片化.因此,为了增进性能,应该定期检查表和索引的碎片,并对具有大量碎片的进行整理. 1.确定当前数据库中所有需要分析碎片的表. 2.确定所有表和索引的 ...

  10. View not attached to window manager crash 的解决办法

    View not attached to window manager crash 的解决办法 转自:http://stackoverflow.com/questions/22924825/view- ...