添加 .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. 0118——UIButtton

    1.Button的定义 UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; Button有六种类型 enum { UI ...

  2. 1218.2——property关键字

    由于我们定义的成员变量是私有的,所有外部是无法访问的,为了能够访问我们写set和get方法 但是由于代码量过于复杂冗长,引入了@property (声明)和 @synthesize(实现) 后来又简化 ...

  3. WP8.1 页面导航 缓存问题

    最近开始学习wp8.1开发,在页面的导航学习时发现了一点问题,即当使用Frame.Navigate()方法进行页面的跳转时,每次都会重新实例化一个页面.而在新的页面采用Frame.GoBack()或者 ...

  4. OpenCV——Mat,IplImage,CvMat类型转换

    Mat,cvMat和IplImage这三种类型都可以代表和显示图像,三者区别如下 Mat类型侧重于计算,数学性较高,openCV对Mat类型的计算也进行了优化. 而CvMat和IplImage类型更侧 ...

  5. Win8.1系统下安装nodeJS

    Nodejs简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.js ...

  6. jdk配置环境变量

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

  7. JS多选日期

    项目需要一个可以选择多个日期的日期选择框,从网上找到一个单选的选择框源码 (http://blog.5d.cn/user2/samuel/200503/61881.html),修改成可以多选. 使用方 ...

  8. Java中操作时间比较好用的类

    项目中经常用到日期的操作,包括日期的格式化.下面是几个比较常用的工具类. import java.text.SimpleDateFormat; import java.util.Date; impor ...

  9. hdu 1337 The Drunk Jailer

    http://acm.hdu.edu.cn/showproblem.php?pid=1337 #include <cstdio> #include <cstring> #def ...

  10. 理解*ptr++

    这是C语言中指针的基本用法之一,我们先来看一个小例子.下面是代码: int main(void) { char *p = "Hello"; while(*p++) printf(& ...