CSS

1展示页面
标准的首页;导航宽度是1000px am-container;导航是固定在顶部的am-topbar am-topbar-fixed-top;导航有下拉菜单am-dropdown;菜单有标题am-dropdown-header;导航上有右对齐的注册登录按钮am-topbar-right;有am-g和am-u-lg-12同时使用,相当于am-container;响应式4列排列;图片动画显示出来;表单;只在小屏显示文章分隔线class="am-article-divider am-show-sm-only";网页底部;am-u-lg-6 am-u-md-4 am-u-sm-12
2注册登录
用到图标;按钮组am-btn-group;按钮颜色am-btn-secondary,am-btn-success,am-btn-primary;小按钮am-btn-sm;小图标am-icon-sm;基本的表单;清除浮动am-cf;左浮动am-fl;右浮动am-fr;浮动居中am-u-sm-centered;
3博客页面
博客页面左右布局;导航是100%宽度;导航有下拉菜单am-dropdown;菜单有标题am-dropdown-header;导航上有右对齐的搜索功能am-topbar-right;博客左部分有标题am-article-title,备注am-article-meta,内容;文章分隔线am-article-divider;上一页am-pagination-prev;下一页am-pagination-next;面板am-panel,默认样式am-panel-default,面板标题am-panel-hd,面板主题am-panel-bd;图片缩略图am-thumbnail;
4侧边栏页面
栏目在侧边,随屏幕大小自适应am-offcanvas,am-offcanvas-bar;侧边栏标题am-nav-header;仅小屏显示am-show-sm-only;文章标题am-article-title;文章备注am-article-meta;文章分隔线am-article-divider;移动am-u-md-push-3;居中am-u-sm-centered;清除浮动am-cf;左浮动am-align-left;右浮动am-align-right;引用blockquote;小字small;评论am-comments-list,am-comment,am-comment-avatar,am-comment-main,am-comment-hd,am-comment-meta,am-comment-author,am-comment-bd;底部
5禁用响应式
跟1页面展示差不多,只是禁用了响应式am-container;底部
6网格
网格am-g,am-u-sm-*,am-u-md-*,am-u-lg-*;最大宽度1000px am-g-fixed;不足 12 份的网格,需要在最后一列上添加 .am-u-end;小于中屏显示am-show-md-down;仅大屏显示am-show-lg-only;小于中屏隐藏am-hide-md-down;列边距,距离前列的距离am-u-sm-offset-*;列居中am-u-sm-centered;大屏时列居中am-u-lg-centered;小屏中屏列居中,大屏不居中am-u-sm-centered am-u-lg-uncentered;列排序am-u-md-push-* am-u-md-pull-* am-u-lg-reset-order;
7等分网格
等分网格am-avg-sm-* am-avg-md-* am-avg-lg-*;缩略图列表am-thumbnails;缩略图am-thumbnail;css动画
7辅助类
水平滚动am-scrollable-horizontal;禁止换行am-text-nowrap;表格am-table am-table-bordered am-table-striped;垂直滚动am-scrollable-vertical;清除浮动am-cf;左浮动am-fl;右浮动am-fr;垂直居中对齐am-vertical-align am-vertical-align-middle;底部对齐am-vertical-align am-vertical-align-bottom;隐藏am-hide;字体am-serif am-kai am-monospace;字体颜色am-text-primary am-text-secondary am-text-success am-text-warning am-text-danger;链接颜色默认蓝色,变成灰色用am-link-muted;文字大小am-text-xs am-text-sm am-text-default am-text-lg am-text-xl am-text-xxl am-text-xxxl;am-text-truncate 禁止换行,超出容器部分截断(以 ... 结束);图片替换am-text-ir;小屏可见am-show-sm-only;中屏大屏可见am-show-md-up;中屏可见am-show-md-only;大屏可见am-show-lg-up;仅大屏可见am-show-lg-only;横屏可见am-show-landscape;竖屏可见am-show-portrait;Margin .am-margin .am-margin-{size};Padding .am-padding .am-padding-{size};水平方向外边距.am-margin-horizontal .am-margin-horizontal-{size} ;水平方向内边距.am-padding-horizontal .am-padding-horizontal-{size};垂直方向外边距.am-margin-vertical .am-margin-vertical-{size} ;垂直方向内边距.am-padding-vertical .am-padding-vertical-{size};左外边距.am-margin-left .am-margin-left-{size}; 左内边距.am-padding-left .am-padding-left-{size};右外边距.am-margin-right .am-margin-right-{size} ;右内边距.am-padding-right .am-padding-right-{size};上外边距.am-margin-top .am-margin-top-{size} ;上内边距.am-padding-top .am-padding-top-{size};下外边距.am-margin-bottom .am-margin-bottom-{size};下内边距.am-padding-bottom .am-padding-bottom-{size}
8按钮
默认样式am-btn;颜色am-btn-default am-btn-primary am-btn-secondary am-btn-success am-btn-warning am-btn-danger;链接am-btn-link;圆角按钮am-radius;椭圆按钮am-round;激活状态am-active;禁用状态disabled="disabled" am-disabled都可以;按钮大小am-btn-xl am-btn-lg 默认大小 am-btn-sm am-btn-xs;块级显示的按钮am-btn-block;按钮加图标am-icon-cog am-icon-shopping-cart am-icon-spinner am-icon-spin am-icon-cloud-download
9代码
行内代码code;代码片段pre;代码块高度滚动条am-pre-scrollable
10表单
多选am-checkbox;单选am-radio;多选按钮在同一行am-form-group am-checkbox-inline;单选按钮在同一行am-radio-inline;下拉框;下拉箭头am-form-caret;文本选择域;云图标am-icon-cloud-upload;表单基本演示;圆角表单域am-form-field am-radius;椭圆表单域am-form-field am-round;禁用表单disabled;禁用域内元素fieldset disabled;禁用链接am-disabled;表单水平排列am-form-horizontal;表单文字am-form-label;表单元素行内排列am-form-inline;表单文本域颜色am-form-success am-form-warning am-form-error;带图标的表单文本域am-icon-check am-icon-warning am-icon-times;表单域的大小am-input-lg 默认大小 am-input-sm;表单域组的大小am-form-group-sm am-form-group-lg;输入框组am-form-set
11图片
响应式图片am-img-responsive;圆角am-radius;椭圆am-round;正圆am-circle;边框am-img-thumbnail;
12表格
表格am-table;边框am-table-bordered;激活am-active;圆角边框am-table-radius;禁用am-disabled;蓝色高亮am-primary;绿色高亮am-success;橙色高亮am-warning;红色高亮am-danger;斑马线效果am-table-striped;鼠标经过效果am-table-hover;紧凑型表格am-table-compact;响应式表格am-scrollable-horizontal;禁用文字换行am-text-nowrap;单元格居中对齐am-table-centered;垂直居中对齐am-text-middle;
13小徽章
小徽章am-badge am-badge-primary am-badge-secondary am-badge-success am-badge-warning am-badge-danger am-badge-success;圆角am-radius;椭圆am-round;大小am-text-sm am-text-default am-text-lg am-text-xl
14面包屑导航
默认分隔符am-breadcrumb;斜杠分隔符am-breadcrumb-slash;
15按钮组
基本使用am-btn-group 默认am-btn-default 圆角am-radius 椭圆am-round;按钮工具栏am-btn-toolbar;按钮组大小am-btn-group-lg 默认 am-btn-group-sm am-btn-group-xs;垂直排列am-btn-group-stacked;自适应宽度am-btn-group-justify;按钮下拉菜单;按钮上拉菜单
16关闭按钮
基本样式am-close;带边框的样式am-close-alt;hover旋转am-close-spin
17评论列表
单条评论am-comment am-comment-avatar am-comment-main am-comment-hd am-comment-meta am-comment-author am-comment-actions am-comment-bd am-comment-footer am-comment-actions;涉及图标am-icon-pencil am-icon-close am-icon-thumbs-up am-icon-thumbs-down am-icon-reply;评论列表am-comments-list;评论头像在右侧am-comments-list-flip; 评论高亮显示am-comment-primary am-comment-secondary am-comment-highlight am-comment-danger am-comment-warning am-comment-success
18图标
图标am-icon-qq am-icon-weixin am-icon-weibo
18图标
图标am-icon-qq am-icon-weixin am-icon-weibo am-icon-home;图标大小 默认大小 am-icon-sm am-icon-md am-icon-lg;旋转图标am-icon-spin;固定图标宽度am-icon-fw
19输入框组
输入框组am-input-group;图标am-input-group-label am-icon-user am-icon-fw am-icon-lock;输入框am-form-field;复选/单选框与输入框;输入框结合按钮 am-input-group-btn;尺寸大小am-input-group-lg 默认大小 am-input-group-sm;颜色am-input-group-primary am-input-group-secondary am-input-group-success am-input-group-warning am-input-group-danger
20列表
基本样式am-list;文字超出截断am-text-truncate;纯文字列表am-list-static;列表边框am-list-border;斑马线am-list-striped;徽章am-badge;图标am-icon-home am-icon-fw am-icon-book am-icon-pencil
21导航
基本样式am-nav;激活am-active;禁用am-disabled;分隔线am-divider;水平导航am-nav-pills;标签式导航am-nav-tabs;宽度自适应am-nav-pills am-nav-justify;导航标题am-nav-header;分隔线am-nav-divider;下拉菜单am-dropdown am-dropdown-toggle am-icon-caret-down am-dropdown-content am-dropdown-header
22导航条
默认样式am-topbar;深色导航am-topbar-inverse;logo图片替换am-text-ir;
22导航条-顶部固定
顶部固定am-topbar-fixed-top
22导航条-底部固定
底部固定am-topbar-fixed-bottom
23分页
基本样式am-pagination;禁用am-disabled;am-active激活;居中对齐am-pagination-centered;右对齐am-pagination-right;左右图标am-icon-angle-double-left am-icon-angle-double-right;
24面板
基本样式am-panel am-panel-default;面板标题am-panel-hd;面板内容am-panel-bd;面板颜色am-panel-primary am-panel-secondary am-panel-success am-panel-warning am-panel-danger;面板页脚am-panel-footer;面板组am-panel-group
25进度条
基本样式am-progress am-progress-bar;颜色am-progress-bar-secondary am-progress-bar-success am-progress-bar-warning am-progress-bar-danger;进度条高度am-progress-xs am-progress-sm am-progress;进度条条纹am-progress-striped;进度条动画am-progress-striped;进度条堆叠
26缩略图
缩略图am-thumbnail;图片标题am-thumbnail-caption;图文混排;am-avg-sm-*
27动画
结合js使用
28文章页
文章am-article;头部am-article-hd;标题am-article-title;备注am-article-meta;内容am-article-bd;文章摘要导读am-article-lead;文章分隔线am-article-divider;

JS插件

js01警告框
基本形式am-alert;关闭按钮am-close;不同状态颜色am-alert-success am-alert-warning am-alert-danger am-alert-secondary;多内容;js代码控制
js02按钮交互
按钮 loading 状态-默认文字loading;按钮 loading 状态-自定义选项;单按钮状态切换;复选框;单选框;设置默认选中状态
js03折叠面板
折叠面板组am-panel-group;折叠面板默认am-panel am-panel-default;头部am-panel-hd;标题am-panel-title;内容am-panel-bd;要隐藏的内容添加am-collapse;默认显示的内容添加am-collapse am-in;折叠菜单am-nav am-collapse;激活am-active;折叠列表am-list am-panel parent target;左外边距am-margin-left-sm
js04下拉组件
下拉列表am-dropdown am-dropdown-toggle;下拉内容am-dropdown-content;下拉标题am-dropdown-header;激活am-active;禁用am-disabled;am-divider分隔线;上拉列表am-dropdown am-dropdown-up;下拉内容是文字描述;下拉内容宽度自适应;通过js调用
js05模态窗口
基本形式am-modal am-modal-no-btn am-modal-dialog;窗口标题am-modal-hd;窗口内容am-modal-bd;模拟Alert am-modal-alert;窗口底部am-modal-footer;模拟Confirm am-modal-confirm;模拟Prompt am-modal-prompt;Modal Loading am-modal-loading;Actions am-modal-actions am-modal-actions-group am-modal-actions-header am-modal-actions-danger;Popup am-popup am-popup-inner am-popup-hd am-popup-title am-popup-bd;通过JS
js06弹出框
点击显示;Hover/Focus 显示;颜色/尺寸;通过 JS
js07加载进度条
通过js调用
js08图片轮播
基本使用am-slider am-slider-default am-slides;动态添加滚动图片;缩略图形式;多图滚动am-slider-carousel;暂停以后重新自动播放
js09侧边栏
默认样式am-offcanvas am-offcanvas-bar am-offcanvas-content;Push 效果;右侧显示am-offcanvas-bar-flip;js控制示例
js10滚动侦测
用到的样式am-u-sm-* am-u-md-* am-u-lg-* am-panel am-panel-primary am-panel-hd am-panel-bd am-u-md-offset-* am-u-lg-offset-*;通过js调用;js插入
js11滚动侦测导航
导航栏目随着页面滚动高亮显示;用到的样式am-panel am-panel-default am-panel-hd am-panel-bd
js12平滑滚动
滚动到顶部data-am-smooth-scroll;滚动到底部js;慢悠悠地滚到距离顶部 57px 的位置
js13固定元素
基本形式data-am-sticky;设置上边距data-am-sticky="{top:80};动画效果data-am-sticky="{animation: 'slide-top'};通过js调用
js14选项卡
使用演示-动态插入、删除选项卡;am-tabs am-tabs-nav am-nav am-nav-tabs am-tabs-bd am-tab-panel;激活am-active;自适应内容高度am-tab-panel am-fade;禁用触控操作;Tab 内容溢出容器问题;通过js调用
js15日期组件
基本形式;结合组件使用;更改颜色;视图模式;限制视图模式;只能选择年份;自定义事件;设置禁止选择日期
js16下拉选框
单选下拉框;selected disabled;多选下拉框;分组多选下拉框;按钮尺寸及颜色;限制列表高度;上拉选择;简易搜索;选项验证提示;js操作;与 Validator 插件结合使用
js17单选多选框
复选框am-checkbox;选中checked;禁用/未选中disabled;单选框am-radio;颜色变化;行内排列am-checkbox-inline am-radio-inline;结合表单验证插件
js18表单验证
H5 原生表单验证;am-form am-form-group am-form-field required am-checkbox-inline am-radio-inline am-form-caret;JS 表单验证;Tooltip;等值验证;自定义验证;验证 UEditor

Web组件

web01折叠面板
default(圆角灰边);am-accordion am-accordion-default am-accordion-item am-accordion-title am-accordion-bd am-collapse am-in am-accordion-content;basic(极简无边框)am-accordion-basic;gapped(扁平分离边框)am-accordion-gapped
web02分割线
default(灰色分隔线)am-divider-default;dotted(点分割线)am-divider-dotted;dashed(虚线分割线)am-divider-dashed
web03单张图片
default(灰色边框)am-figure am-figure-default am-figure-capition-btm
web04页脚
am-footer am-footer-default am-footer-switch am-footer-ysp am-footer-divider am-footer-desktop am-footer-miscs am-modal am-modal-no-btn am-switch-mode-m am-switch-mode-m-default am-modal-dialog am-modal-hd am-modal-footer-hd am-close am-close-spin am-modal-bd am-switch-mode-owner am-switch-mode-slogan
web05图片画廊
default(2列)am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-default am-gallery-item am-gallery-title am-gallery-desc;overlay(浮层标题)am-gallery-overlay;bordered(容器边框)am-gallery-bordered;imgbordered(图片边框)am-gallery-imgbordered;使用 data-rel;使用链接
web06回到顶部
default(居中按钮)am-gotop am-gotop-default am-gotop-title am-gotop-icon am-icon-chevron-up;fixed(默认 Icon)am-gotop-fixed;fixed(设置 Icon);fixed(自定义图片)am-gotop-icon-custom
web07页头
default(图标)am-header am-header-default am-header-left am-header-nav am-header-icon am-icon-home am-header-title am-header-right am-header-nav am-header-icon am-icon-bars;default(图片图标)am-header-icon-custom;default(图标+文字);default(多图标);default(结合按钮)
web08简介
default(More 在上)am-intro am-cf am-intro-default am-intro-hd am-intro-title am-intro-more am-intro-more-top am-intro-bd am-intro-left am-intro-right;default(More 在下)am-intro-more-bottom
web09内容列表
default(更多在上)am-list-news am-list-news-default am-list-news-hd am-cf am-list-news-more am-fr am-list-news-bd am-list am-list-item-dated am-list-date;default(更多在下)am-list-news-ft;default(带摘要)am-list-item-desced am-list-item-text;default(上图+摘要)am-list-item-thumbed am-list-item-thumb-top;default(左图+摘要)am-list-item-thumbed am-list-item-thumb-left am-list-thumb;default(右图+摘要);default(下图+摘要);default(下右图+摘要)
web10菜单
default(横排)am-menu am-menu-default am-menu-toggle am-menu-toggle-icon am-menu-nav am-parent am-menu-sub am-collapse am-menu-nav-channel
web11工具栏
default(字体图标)am-navbar am-cf am-navbar-default am-navbar-nav am-navbar-label;default(自定义图标)
web12分页
default(扁平按钮)am-pagination am-pagination-default am-pagination-first am-pagination-prev am-active am-pagination-next am-pagination-last;select(上下页+选择框)am-pagination am-pagination-select
web13段落
default(默认)am-paragraph am-paragraph-default paragraph-default-p
web14图片轮播
default(默认)am-slider am-slider-default am-slides;default(标题)am-slider-desc;default(多图);default(缩略图);a1(圆形控制点)am-slider-a1;a2(方形控制点)am-slider-a2;a3(底部黑边圆形控制点)am-slider-a3;a4(底部白边圆形控制点)am-slider-a4;a5(长条等分控制点)am-slider-a5;b1(方形居中左右箭头)am-slider-b1;b2(圆形居中左右箭头)am-slider-b2;b3(图片外左右箭头)am-slider-b3;b4(图片外左右圆形箭头)am-slider-b4;c1(标题+长条控制点)am-slider-c1;c2(标题+方形控制点)am-slider-c2;c3(标题+居中左右箭头)am-slider-c3;c4(标题+居底左右箭头)am-slider-c4;d1(标题+底部圆形左右箭头)am-slider-d1;d2(浮层标题+底部圆形控制点)am-slider-d2 am-slider-desc am-slider-content am-slider-title;d3(标题+缩略图导航)am-slider-d3
web15选项卡
default(蓝色选项卡)am-tabs am-tabs-default am-tabs-nav am-cf am-active am-tabs-bd am-tab-panel;d2(下边框选项卡)am-tabs-d2
web16标题栏
default(文字标题)am-titlebar am-titlebar-default am-titlebar-title am-titlebar-nav;default(图片标题);multi(单个链接)am-titlebar-multi;multi(多链接);cols(浅背景多链接)am-titlebar-cols