1、Badge

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

  圆角:在默认样式的基础上添加 .am-radius class。

  椭圆:在默认样式的基础上添加 .am-round class。

  大小:结合辅助类中的字号 class,改变徽章大小。am-text-sm

2、面包屑导航:

  .am-breadcrumb 默认分隔符  写在父级 ol\ul

  am-breadcrumb am-breadcrumb-slash 斜杠分割

  结合icon  <li><a href="#" class="am-icon-home">首页</a></li>

3、按钮

4、关闭按钮

  在元素上添加 .am-close   形状是&times;

  带边框是:添加 .am-close-alt

  使用 Icon Font   class="am-close am-close-alt am-icon-times"

  hover 旋转  .am-close-spin

5、评论列表 am-comment  (文档)

6、icon图标

  在 HTML 上添加添加 am-icon-{图标名称} class。

  .am-icon-sm放大 150%。。。。

  .am-icon-btn 可以是一个图标按钮

  .am-icon-spin icon旋转

  添加 .am-icon-fw 将图标设置为固定的宽度,解决宽度不一致问题

7、链接列表:

  链接列表:使用 <ul> 结构嵌套链接列表,添加 .am-list

  截断列表:在 <a> 上添加 .am-text-truncate class 可以实现文字超出一行时截断为 ...

  纯文字列表:在 .am-list 的基础上添加 .am-list-static

  列表边框:在容器上添加 .am-list-border class。

  斑马纹:添加 .am-list-striped class。

  添加 Badge  class="am-badge am-badge-success"

  添加 ICON  <i class="am-icon-home am-icon-fw"></i>

8、导航

  导航样式组件,在 <ul> 链接列表中添加 .am-nav class

  <ul> 添加 .am-nav class 以后就是一个基本的垂直导航。默认样式中并没有限定导航的宽度,可以结合网格使用。

  在 .am-nav 的基础上再添加 .am-nav-pills,形成一个水平导航。

  在 .am-nav 的基础上添加 .am-nav-tabs,形成一个标签式的导航。激活的标签在 <li> 上添加.am-active

  宽度自适应:在水平导航或标签式导航上添加 .am-nav-justify 让 <li> 平均分配宽度(通过display: table-cell 实现)。

  .am-nav-header 导航标题,直接放在 <li> 中。

  .am-nav-divider 导航分隔线,添加到空的 <li> 上。

9、导航条

  在容器上添加 .am-topbar class,然后按照示例组织所需内容

  在容器上添加 .am-topbar-inverse,调整为背景色为主色调的样式,内部结构同上。

  在 .am-topbar 上添加 .am-topbar-fixed-top class,实现顶部固定。

  在 .am-topbar 上添加 .am-topbar-fixed-bottom class,实现底部固定

10、分页

  分页组件,<ul> / <ol> 添加 .am-pagination class, 包含一系列 <li>。在 <li> 上添加状态 class:

  .am-disabled - 禁用(不可用)

  .am-active - 激活

  居中:在默认样式的基础上添加 .am-pagination-centered class。

  靠右:在默认样式的基础上添加 .am-pagination-right class。

  左右对齐:添加 .am-pagination-prev 及 .am-pagination-next 到 <li>,创建一个仅包含 上一页 和 下一页 的分页组件。

11、进度条:

  进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息。

  <div class="am-progress">

    <div class="am-progress-bar" style="width: 40%">40%</div>

  进度条高度:在 .am-progress 添加 .am-progress-xs .am-progress-sm 可以设置进度条高度。

  进度条条纹:在进度条容器上添加 .am-progress-striped 显示条纹效果,可结合进度条颜色 class 使用。

  进度条动画:进度条容器上添加 .am-active 激活进度条动画(CSS Animation)。

12、缩略图

  在 <img> 添加 .am-thumbnail 类;也可以在 <img> 外面添加一个容器,如 <div><figure><a> 等,再将 class 添加到容器上。

  图片标题:am-thumbnail-caption

  在am-thumbnail内加入.am-caption可以添加任何类型的HTML内容标题、段落、或按钮。

13、css3动画

14、文章

AmazeUI 框架知识点-组件的更多相关文章

  1. AmazeUI 框架知识点-元素

    1.按钮  .am-btn 圆角按钮 .am-radius 椭圆形按钮 .am-round 按钮激活状态 .am-active 禁用状态 .am-disabled 2.按钮尺寸.am-btn-xl . ...

  2. AmazeUI 框架知识点-布局和样式整理

    1.Amaze UI 将所有元素的盒模型设置为 border-box.这下好了,妈妈再也不用担心没计算好 padding.border 而使布局破相了. 2.Amaze UI 将浏览器的基准字号设置为 ...

  3. 程序员必懂:javaweb三大框架知识点总结

    原文链接:http://www.cnblogs.com/SXTkaifa/p/5968631.html javaweb三大框架知识点总结 一.Struts2的总结 1.Struts 2的工作流程,从请 ...

  4. 工作流,WEB框架,UI组件网络收集整理

    工作流,WEB框架,UI组件网络收集整理 在博客园上逛了好多年,随手收录了一些工作流,WEB开发框架,UI组件,现在整理一下与大家分享. 由于个人能力与精力有限,望各位园友在评论中补充,我将全部整理到 ...

  5. 第三章、drf框架 - 序列化组件 | Serializer

    目录 第三章.drf框架 - 序列化组件 | Serializer 序列化组件 知识点:Serializer(偏底层).ModelSerializer(重点).ListModelSerializer( ...

  6. PHP yii框架FormWidget组件

    本篇文章介绍的是PHP yii框架Form组件,方便在view层更好调用此功能,话不多说上代码:1.先继承yii本身Widget类 <?php/** * User: lsh */ namespa ...

  7. 最好用的js前端框架、组件、文档在线预览插件

    这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...

  8. 基于Vue的Quasar Framework 介绍 这个框架UI组件很全面

    基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...

  9. 以jar包的形式来使用前端的各种框架、组件。

    springboot(二):web综合开发 - 纯洁的微笑博客 http://www.ityouknow.com/springboot/2016/02/03/spring-boot-web.html ...

随机推荐

  1. Ubuntu 安装php+mysql 环境

    新系统安装完毕后,首先运行apt-get update 更新apt库. 然后安装ssh,输入apt-get install openssh-server,安装ssh是为了可以远程操作,不然坐在机房实在 ...

  2. c#反射机制

    一:反射的定义 审查元数据并收集关于它的类型信息的能力.元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等. Sys ...

  3. java享元模式(flyweight)

    有个问题: Integer i1 = 12; Integer i2 = 12; System.out.println(i1 == i2);//输出true Integer i1 = 130; Inte ...

  4. oracle 存储过程的用法

    create or replace procedure  myPro(inParams in number,outParams out number) is str varchar(200); beg ...

  5. ES6扫盲

    原文阅读请点击此处 一.let和const { // let声明的变量只在let命令所在的代码块内有效 let a = 1; var b = 2; } console.log(a); // 报错: R ...

  6. PHP预定义接口之 ArrayAccess

    最近这段时间回家过年了,博客也没有更新,感觉少学习了好多东西,也错失了好多的学习机会,就像大家在春节抢红包时常说的一句话:一不留神错过了好几亿.废话少说,这篇博客给大家说说关于PHP预定义接口中常用到 ...

  7. thinkphp导入导出excel表单数据

    在PHP项目经常要导入导出Excel表单. 先去下载PHPExcel类库文件,放到相应位置. 我在thinkphp框架中的位置为ThinkPHP/Library/Org/Util/ 导入 在页面上传e ...

  8. iOS 导出 ipa 包时 四个选项的意义

    iOS 导出 ipa 包时 四个选项的意义 如图  在 iOS 到处 ipa包的时候 会有四个选项 1.Save for iOS App Store Deployment 保存到本地 准备上传App ...

  9. **crontab的使用方式介绍和no crontab for root 提示的处理

    crontab的使用方式介绍   定时任务参数详解如下:  crontab -l     |  crontab -e    www.2cto.com   #*/30 * * * * ntpdate 1 ...

  10. 基于netty-socketio的web推送服务

    实时消息的推送,PC端的推送技术可以使用socket建立一个长连接来实现.传统的web服务都是客户端发出请求,服务端给出响应.但是现在直观的要求是允许特定时间内在没有客户端发起请求的情况下服务端主动推 ...