添加 .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. PHP学习笔记二十四【Get Set】

    <?php Class Person{ private $n1; private $n2; private $n3; //使用__set方法来管理所有的属性 public function __ ...

  2. break，continue,return 区别

    using System;using System.Collections.Generic;using System.Text; namespace breakcontinue_test{    cl ...

  3. 触控(Touch)

    1 使用触控实现一个简易的画板 1.1 问题 触控(Touch)是一个UITouch类型的对象,当用户触摸了屏幕上的视图时自动被创建,通常使用触控实现绘图.涂鸦.手写等功能.本案例使用触控实现一个简易 ...

  4. 小插曲之变量和字符串 - 零基础入门学习Python003

    小插曲之变量和字符串 让编程改变世界 Change the world by program 变量 (此处只是省略N多细节,详细通过视频学习) 变量名就像我们现实社会的名字,把一个值赋值给一个名字时, ...

  5. Redis应用场景-整理

    1.  MySql+Memcached架构的问题 Memcached采用客户端-服务器的架构,客户端和服务器端的通讯使用自定义的协议标准,只要满足协议格式要求,客户端Library可以用任何语言实现. ...

  6. Linux系统编程（15）——shell脚本语法

    Shell字符串 字符串是shell编程中最常用最有用的数据类型(除了数字和字符串,也没啥其它类型好用了),字符串可以用单引号,也可以用双引号,也可以不用引号.单双引号的区别跟PHP类似. 单引号 s ...

  7. VS2008远程调试方法

    在网上找了好多资料才把这个调试环境搭好,下面总结一下: 先说明两个概念: 1.      目标机:远程需要调试的机子,也就是被调试程序exe所在的机子,该机子可以安装VS2008或者不安装vs2008 ...

  8. Java 舍入模式 数字的格式化

    舍入模式: UP向远离0的方向舍入 始终对非零舍弃部分前面的数字加 1.此舍入模式始终不会减少计算值的绝对值. 例如:1.6 → 2      -1.6 → -2      1.1 → 2      ...

  9. Android APK安装包瘦身[转]

    很显然,APK安装包越小越好.下面从代码,资源文件,使用策略几个方面简要介绍下: 代码 保持良好的编程习惯,不要重复或者不用的代码,谨慎添加libs,移除使用不到的libs. 使用proguard混淆 ...

  10. linux常用查看硬件设备信息命令（转载）

    系统 # uname -a                                       # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue         ...