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. MySQL Field排序法

    检索 id = 2 or id = 5 or id = 9 or id = 56 or id = 38.然后按照 2 , 5, 9, 56, 38 这个顺序排列,这是题目要求   以下为解决方案: 1 ...

  2. 【Henu ACM Round#16 C】Graph and String

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 根据题意:先明确以下规则: 1.如果两个点之间没有边,那么这两个点只能是a或c,且不能相同 2.如果两个点之间有边,那么他们之间的差 ...

  3. Excel显示当前日期

    https://zhidao.baidu.com/question/431460329693825764.html 直接选中单元格,在公示栏输入=now()

  4. 一题多解(三)—— Python 字符串的拼接

    1. format def event_log(name, time): print('Event: {}, happens at {}'.format(name, str(time))) 2. 使用 ...

  5. 5.cocos2d锚点

    创建一个层T1LayerAnchorPoint AppDelegate.cpp bool AppDelegate::applicationDidFinishLaunching() { // initi ...

  6. 下载安装与配置Excel 2013数据挖掘加载项(SQL Server 2012 SP1 + SQLServer2012_DMAddin.msi)

    一.系统要求 在安装这个数据挖掘加载项前,你的机器必须要可以支持如下的相关系统设备: (1)操作系统:windows 7 和  windows 8,暂时不支持 windows 10. (2)excel ...

  7. 初学h5须知

    9.41.浏览器是页面的环境(类似水是鱼的环境)2.浏览器结构:title    标题,题目                           URL      网址                ...

  8. 如何优雅的写UI——(5)选项卡功能实现

    先在我们的选项卡可以说能用了,每个标签页都能点进去,但是这还远远没到能用的地步,比如说你把窗口最大化后. 立马就露出马脚了,所以这篇我们要先讲讲tabctrl的最基本的功能实现 改变选项卡大小 上图的 ...

  9. Windows学习总结(2)——30+ Windows命令提示符快捷键汇总

    即便你平时经常用到 Windows 命令提示符,可能也会对本文将提到的快捷键数量感到惊讶.其实我们可以使用快捷键来简化命令提示符中的选择操作,或对文本进行重复操作,下面我们会列出完整列表. 大家都知道 ...

  10. 南阳oj 士兵杀敌(二) 题目116 NYOJ 数据结构

     /*士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5 描写叙述 南将军手下有N个士兵.分别编号1到N.这些士兵的杀敌数都是已知的. 小工是南将军手下的军师, ...