添加 .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. C#winform修改IP,dns

     /// 将IP,DNS设置为自动获取        ///        private void setDHCP()        {            string  _doscmd = & ...

  2. js基础-需要注意的地方

    ---因为跟别的语言很像,所以只记录要注意的地方 1.== 和 === 的区别 ===要求类型也相等 "5"==5 = ture "5"===5 = false ...

  3. iOS-OC-基础-NSDate常用方法

    NSDate常用方法 /*=============================NSDate日期类的使用=============================*/ // 获取当前时间,获得的时 ...

  4. VS代码清理批处理

    批处理清理VS工程 del /f /q /s *.ncb del /f /q /s *.sdf del /f /q /s /A H *.suo del /f /q /s *.ipch del /f / ...

  5. 继续Python爬虫

    先贴上代码 # coding:utf-8 import urllib2 import urllib import re gjc = urllib.quote('你好') url = 'http://s ...

  6. 我和Python的第一次亲密接触 - 零基础入门学习Python001

    我和Python的第一次亲密接触 让编程改变世界 Change the world by program 小甲鱼经常说,学习一门编程语言就是要深入其中,要把编程语言想象为你的女朋友你的情人,这样你学习 ...

  7. Bone Collector II（HDU 2639 DP）

    Bone Collector II Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  8. HTML骨架-深入理解

    HTML是WEB开发最基本的语言之一,也是最重要的语言之一,我们在浏览网页时做看到的内容是最直接的呈现形式就是HTML代码.<!DOCTYPE html PUBLIC "-//W3C/ ...

  9. C# Exception类

    一.异常类 1.在C#中所有的异常都是使用一个异常类型的示例对象表示的,这些异常类型都是继承自System.Exception类型,或者直接使用System.Exception类型的实例对象: 2.在 ...

  10. java 下拉框级联及相关（转）

    ActionLintsner都实现此接口,其它监听器可以监听的事件都可以被它捕获 public interface ActionListener extends EventListenerThe li ...