amazeui学习笔记--css（常用组件1）--小徽章Badge

一、总结

1、am-badge：添加am-badge来声明小徽章对象 <span class="am-badge am-badge-primary">2</span>

2、badge位置：badge可以放在span或者a标签中  <a class="am-badge am-badge-primary">Free</a>

3、圆角样式或者椭圆样式：am-radius 和 am-round

4、小徽章大小：小徽章大小可以通过改变里面字体的大小来实现：<span class="am-badge am-badge-secondary am-text-sm">small</span>

二、小徽章Badge

Badge

添加 .am-badge class 到 <div> 或者 <span> 元素。

默认样式

 Copy
1 2 3 4 5 6 Allmobilize
Free Secondary Success Warning Danger
<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。

 Copy
1 2 3 4 5 6 Allmobilize
Free Secondary Success Warning Danger
<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-round class。

 Copy
1 2 3 4 5 6 Allmobilize
Free Secondary Success Warning Danger
<span class="am-badge am-round">1</span>

<span class="am-badge am-badge-primary am-round">2</span>

<span class="am-badge am-badge-secondary am-round">3</span>

<span class="am-badge am-badge-success am-round">4</span>

<span class="am-badge am-badge-warning am-round">5</span>

<span class="am-badge am-badge-danger am-round">6</span>

<span class="am-badge am-badge-success am-round">Allmobilize</span>

<br>

<a class="am-badge am-badge-primary am-round">Free</a>

<a class="am-badge am-badge-secondary am-round">Secondary</a>

<a class="am-badge am-badge-success am-round">Success</a>

<a class="am-badge am-badge-warning am-round">Warning</a>

<a class="am-badge am-badge-danger am-round">Danger</a>

大小

结合辅助类中的字号 class，改变徽章大小。

 Copy
default small normal large x large
<span class="am-badge am-badge-primary">default</span>

<span class="am-badge am-badge-secondary am-text-sm">small</span>

<span class="am-badge am-badge-success am-text-default">normal</span>

<span class="am-badge am-badge-warning am-text-lg">large</span>

<span class="am-badge am-badge-danger am-text-xl">x large</span>

amazeui学习笔记--css（常用组件1）--小徽章Badge的更多相关文章

  1. amazeui学习笔记--css（常用组件16）--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  2. amazeui学习笔记--css（常用组件8）--列表list

    amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...

  3. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  4. amazeui学习笔记--css（常用组件2）--面包屑导航Breadcrumb

    amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...

  5. amazeui学习笔记--css（常用组件15）--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  6. amazeui学习笔记--css（常用组件14）--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  7. amazeui学习笔记--css（常用组件13）--进度条Progress

    amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...

  8. amazeui学习笔记--css（常用组件12）--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  9. amazeui学习笔记--css（常用组件11）--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

随机推荐

  1. K-近邻算法学习

    # -- coding: utf-8 -- from numpy import * import operator def createDataSet(): group = array([[1.0,1 ...

  2. 【Henu ACM Round#14 C】Duff and Weight Lifting

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 2^y可以由两个2^(y-1)相加得到. 则有一个贪心的策略. 就是2^x尽量都变成2^(x+1) (即能够凑就尽量凑) 如果x还有 ...

  3. 洛谷 P1889 士兵站队

    P1889 士兵站队 题目描述 在一个划分成网格的操场上, n个士兵散乱地站在网格点上.由整数 坐标 (x,y) 表示.士兵们可以沿网格边上.下左右移动一步,但在同时刻任一网格点上只能有名士兵.按照军 ...

  4. linux命令行学习-dig(DNS查询器)

    在web开发中.总要熟悉的就是http协议.而发起一个http開始前最先要经历的一个过程就是DNS解析.简单说就是域名怎样终于解析到实际serverip的过程. 而在研究DNS解析和排除DNS解析类故 ...

  5. Android Studio 中 gradle 构建 堆栈空间不足

    Error:Unable to start the daemon process. This problem might be caused by incorrect configuration of ...

  6. Checkpoint & cache & persist

    checkpoint checkpoint(检查点)是Spark为了避免长链路,大计算量的Rdd不可用时,需要长时间恢复而引入的.主要就是将通过大量计算而获得的这类Rdd的数据直接持久化到外部可靠的存 ...

  7. Snapshot Standby

    INTRODUCTION Snapshot standby database是ORACLE 11g的新特性.允许Physical standby短时间的使用read write模式. Snapshot ...

  8. javascript创建对象的方法--组合模式

    javascript创建对象的方法--组合模式 一.总结 0.作用:解决原型模式对象独有属性创建麻烦的问题 1.组合模式使用普遍:jquery就是用的组合模式,组合模式使用非常普遍 2.组合模式优点: ...

  9. Day6上午解题

    预计分数:100+100+30=230 实际分数:90+25+10=125 T1少判了一种情况,T2的贪心是错的,T3被卡了... T1 模拟水题,注意20的可以用3个5块的找 #include< ...

  10. 在Sql中将 varchar 值 '1,2,3,4,5,6' 转换成数据类型 int

    --问题:将aa转换为Int类型失败 string aa="3,5,11,56,88,45,23"; select * from ERPBuMen where ID in(aa) ...