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、文章