AmazeUI 框架知识点-组件
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 形状是
×
带边框是:添加 .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 框架知识点-组件的更多相关文章
- AmazeUI 框架知识点-元素
1.按钮 .am-btn 圆角按钮 .am-radius 椭圆形按钮 .am-round 按钮激活状态 .am-active 禁用状态 .am-disabled 2.按钮尺寸.am-btn-xl . ...
- AmazeUI 框架知识点-布局和样式整理
1.Amaze UI 将所有元素的盒模型设置为 border-box.这下好了,妈妈再也不用担心没计算好 padding.border 而使布局破相了. 2.Amaze UI 将浏览器的基准字号设置为 ...
- 程序员必懂:javaweb三大框架知识点总结
原文链接:http://www.cnblogs.com/SXTkaifa/p/5968631.html javaweb三大框架知识点总结 一.Struts2的总结 1.Struts 2的工作流程,从请 ...
- 工作流,WEB框架,UI组件网络收集整理
工作流,WEB框架,UI组件网络收集整理 在博客园上逛了好多年,随手收录了一些工作流,WEB开发框架,UI组件,现在整理一下与大家分享. 由于个人能力与精力有限,望各位园友在评论中补充,我将全部整理到 ...
- 第三章、drf框架 - 序列化组件 | Serializer
目录 第三章.drf框架 - 序列化组件 | Serializer 序列化组件 知识点:Serializer(偏底层).ModelSerializer(重点).ListModelSerializer( ...
- PHP yii框架FormWidget组件
本篇文章介绍的是PHP yii框架Form组件,方便在view层更好调用此功能,话不多说上代码:1.先继承yii本身Widget类 <?php/** * User: lsh */ namespa ...
- 最好用的js前端框架、组件、文档在线预览插件
这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...
- 基于Vue的Quasar Framework 介绍 这个框架UI组件很全面
基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...
- 以jar包的形式来使用前端的各种框架、组件。
springboot(二):web综合开发 - 纯洁的微笑博客 http://www.ityouknow.com/springboot/2016/02/03/spring-boot-web.html ...
随机推荐
- Ubuntu 安装php+mysql 环境
新系统安装完毕后,首先运行apt-get update 更新apt库. 然后安装ssh,输入apt-get install openssh-server,安装ssh是为了可以远程操作,不然坐在机房实在 ...
- c#反射机制
一:反射的定义 审查元数据并收集关于它的类型信息的能力.元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等. Sys ...
- java享元模式(flyweight)
有个问题: Integer i1 = 12; Integer i2 = 12; System.out.println(i1 == i2);//输出true Integer i1 = 130; Inte ...
- oracle 存储过程的用法
create or replace procedure myPro(inParams in number,outParams out number) is str varchar(200); beg ...
- ES6扫盲
原文阅读请点击此处 一.let和const { // let声明的变量只在let命令所在的代码块内有效 let a = 1; var b = 2; } console.log(a); // 报错: R ...
- PHP预定义接口之 ArrayAccess
最近这段时间回家过年了,博客也没有更新,感觉少学习了好多东西,也错失了好多的学习机会,就像大家在春节抢红包时常说的一句话:一不留神错过了好几亿.废话少说,这篇博客给大家说说关于PHP预定义接口中常用到 ...
- thinkphp导入导出excel表单数据
在PHP项目经常要导入导出Excel表单. 先去下载PHPExcel类库文件,放到相应位置. 我在thinkphp框架中的位置为ThinkPHP/Library/Org/Util/ 导入 在页面上传e ...
- iOS 导出 ipa 包时 四个选项的意义
iOS 导出 ipa 包时 四个选项的意义 如图 在 iOS 到处 ipa包的时候 会有四个选项 1.Save for iOS App Store Deployment 保存到本地 准备上传App ...
- **crontab的使用方式介绍和no crontab for root 提示的处理
crontab的使用方式介绍 定时任务参数详解如下: crontab -l | crontab -e www.2cto.com #*/30 * * * * ntpdate 1 ...
- 基于netty-socketio的web推送服务
实时消息的推送,PC端的推送技术可以使用socket建立一个长连接来实现.传统的web服务都是客户端发出请求,服务端给出响应.但是现在直观的要求是允许特定时间内在没有客户端发起请求的情况下服务端主动推 ...