添加 .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. MVC 界面开发

    1.什么是设计模式 mvc只是其中一种,对某一类具体问题,总结出来的一套最优的解决方案 1.MVC: 1.Model(模型)     View(视图)    Controller(控制器) 的缩写 M ...

  2. Qt 'void QWidget::show()' is inaccessible

    今天在编写Qt窗体头文件时,尽然碰到了这样的报错,'void QWidget::show()' is inaccessible,'QWidget' is not an accessible base ...

  3. Windows7下MySQL5.6.15免安装版的配置（来自yang362046076）

    1.下载mysql-5.5.20-win32.zip,解压到D:\dev,D盘的dev文件夹下就会出现mysql-5.5.20-win32目录,将其重命名为mysql. 2.配置MYSQL的环境变量  ...

  4. 轻量级jquery框架之--树(tree)

    前言 在常用的UI组件中,树形组件与数据列表组件可以说是构成一个管理平台基本的两大数据核心组件.树形组件用于系统菜单,数据列表用于数据表现,两者配合即可完成一个简单的数据系统.要实现一个支持复选.工具 ...

  5. bootstrap模态框垂直居中

    很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...

  6. 图片ppm编码格式

    ppm图片有2种格式, ASCII格式和binary格式. (1)ppm头部分 由三部分组成,这三部分由回车或换行分割,但PPM的标准中是要求空格. 第一行通常是P3或P6,说明是PPM格式: 第二行 ...

  7. 解决mac ssh连linux中文乱码的问题[转]

    将Mac下/etc/ssh_config中的SendEnv LANG LC_*这一行用#号注释掉 reference: http://www.zhihu.com/question/20117388

  8. dojo Tree 添加、删除节点

    var tree=this.tree; var store=tree.model.store; if(this.node){ console.log(this.node) var children=t ...

  9. SQL查询 addScalar()或addEntity()

    Hibernate除了支持HQL查询外,还支持原生SQL查询.   对原生SQL查询执行的控制是通过SQLQuery接口进行的,通过执行Session.createSQLQuery()获取这个接口.该 ...

  10. I2C_周立功标准驱动程序_c代码

    /****************************************Copyright (c)********************************************** ...