amazeui学习笔记--css(常用组件1)--小徽章Badge
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>
元素。
默认样式
<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-round
class。
<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,改变徽章大小。
<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的更多相关文章
- amazeui学习笔记--css(常用组件16)--文章页Article
amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...
- amazeui学习笔记--css(常用组件8)--列表list
amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb
amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...
- amazeui学习笔记--css(常用组件15)--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- amazeui学习笔记--css(常用组件14)--缩略图Thumbnail
amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...
- amazeui学习笔记--css(常用组件13)--进度条Progress
amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...
- amazeui学习笔记--css(常用组件12)--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
- amazeui学习笔记--css(常用组件11)--分页Pagination
amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...
随机推荐
- MySQL Field排序法
检索 id = 2 or id = 5 or id = 9 or id = 56 or id = 38.然后按照 2 , 5, 9, 56, 38 这个顺序排列,这是题目要求 以下为解决方案: 1 ...
- 【Henu ACM Round#16 C】Graph and String
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 根据题意:先明确以下规则: 1.如果两个点之间没有边,那么这两个点只能是a或c,且不能相同 2.如果两个点之间有边,那么他们之间的差 ...
- Excel显示当前日期
https://zhidao.baidu.com/question/431460329693825764.html 直接选中单元格,在公示栏输入=now()
- 一题多解(三)—— Python 字符串的拼接
1. format def event_log(name, time): print('Event: {}, happens at {}'.format(name, str(time))) 2. 使用 ...
- 5.cocos2d锚点
创建一个层T1LayerAnchorPoint AppDelegate.cpp bool AppDelegate::applicationDidFinishLaunching() { // initi ...
- 下载安装与配置Excel 2013数据挖掘加载项(SQL Server 2012 SP1 + SQLServer2012_DMAddin.msi)
一.系统要求 在安装这个数据挖掘加载项前,你的机器必须要可以支持如下的相关系统设备: (1)操作系统:windows 7 和 windows 8,暂时不支持 windows 10. (2)excel ...
- 初学h5须知
9.41.浏览器是页面的环境(类似水是鱼的环境)2.浏览器结构:title 标题,题目 URL 网址 ...
- 如何优雅的写UI——(5)选项卡功能实现
先在我们的选项卡可以说能用了,每个标签页都能点进去,但是这还远远没到能用的地步,比如说你把窗口最大化后. 立马就露出马脚了,所以这篇我们要先讲讲tabctrl的最基本的功能实现 改变选项卡大小 上图的 ...
- Windows学习总结(2)——30+ Windows命令提示符快捷键汇总
即便你平时经常用到 Windows 命令提示符,可能也会对本文将提到的快捷键数量感到惊讶.其实我们可以使用快捷键来简化命令提示符中的选择操作,或对文本进行重复操作,下面我们会列出完整列表. 大家都知道 ...
- 南阳oj 士兵杀敌(二) 题目116 NYOJ 数据结构
/*士兵杀敌(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描写叙述 南将军手下有N个士兵.分别编号1到N.这些士兵的杀敌数都是已知的. 小工是南将军手下的军师, ...