amaze ui还是很强大的，用的熟练的话工作效率是能有很大的提升，但是说实话，固定的样式是有点丑。
Amaze UI 中， 行 .am-g 的宽度被设置为 100%， 未限定最大宽度，会随着窗口自动缩放
.am-g {
margin: 0 auto;
width: 100%;
}
网格布局会形成左右内边距，可以在行 .am-g 上添加 .am-g-collapse，移除列的内边距（padding）。
[class*="am-u-"] {
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
float: left;
position: relative;
}
.am-g-collapse [class*="am-u-"] {
padding-left: 0;
padding-right: 0;
}
注意：如果am-u-xx-n中不足12等分，则最后一个am-u-xx-n向右浮动。
[class*="am-u-"] + [class*="am-u-"]:last-child {
float: right;
}
因此，可以在最后一列加上.am-u-end使其左浮动
[class*="am-u-"] + [class*="am-u-"]:last-child {
float: right;
}
列边距啪啪啪，添加 am-u-sm-offset-、am-u-sm-offset-、am-u-lg-offset- 设置列的左边距。am-u-sm-push-则相反
.am-u-sm-offset-1 {
margin-left: 8.33333333%;
}
.am-u-sm-push-11 {
left: 91.66666667%;
}
单独使用.am-container形成容器，会产生左右内边距，注意：在手机端(<641px)为1rem
.am-container {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
width: 100%;
max-width: 1000px;
}
@media only screen and (min-width:641px) {
.am-container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
总结：Amaze UI使用通过am-g或与am-container形成不带最大宽度和带最大宽度为1000px的行布局，列布局则通过am-u-xx-n自定义布局
带最大宽度为1000px的行布局，可在行 .am-g 上添加 .am-g-collapse， 移除.am-container的内边距
<div class="am-container">
<div class="am-g">
<am-u-xx-n></am-u-xx-n> //自定义
</div>
</div>
满屏铺满的行布局，已取消内边距。在行 .am-g 上添加 .am-g-collapse，移除列的内边距（padding）。
<div class="am-g am-g-collapse">
<am-u-xx-n></am-u-xx-n> //自定义
</div>
浮动相关
am-fl 左浮动 .am-fr 右浮动 .am-center 水平居中 .am-cf 清除浮动
.am-align-xx浮动,与普通的左浮动右浮动相比较差不多，只不过是将浮动的元素加了自身浮动相反的外边距和底部边距
[class*='am-align-'] {
margin-bottom: 1rem;
}
.am-align-left {
margin-right: 1rem;
float: left;
}
.am-align-right {
margin-left: 1rem;
float: right;
}
Amaze UI尺寸定于
-xs最小 -sm小 -default中等 -lg大 -xl超大
am-text-{size} 文字大小
am-btn-{size} 按钮大小
am-input-{size} 输入框文字大小，个人理解行高。只支持sm和lg(2.6版本)
am-icon-sm 放大150%
am-icon-md 放大 200% (不写默认)
am-icon-lg 放大 250%
Amaze UI定义了几个常见的颜色
default-默认；primary-蓝色；secondary-浅蓝色；success-绿色；warning-橙色；danger-红色；link-透明
am-text-{color} 设置文字颜色
am-btn-{color} 按钮设置颜色
通过上面的尺寸、颜色就能很快的定义一个amaze ui的button，例如
<button type="button" class="am-btn am-btn-default am-radius">默认样式</button>
在按钮样式的基础上添加 .am-btn class表明这是amaze ui按钮，添加.am-btn-{color}设置颜色；添加.am-btn-{size}设置大小，不写默认；添加.am-radius创建圆角按钮。
块级按钮，添加 .am-btn-block class。
.am-btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
源码可见：button为块级元素，取消内边距，宽度100%，铺满整个div。
带有Icon图标的按钮
<button class="am-btn am-btn-default">
<i class="am-icon-cog"></i>
设置
</button>
跟本身的按钮使用方式是一模一样的，通过在内部加i标签，形成icon图标。
注意：button按钮点击会产生border，假如用了link样式就出现白底蓝边，用a标签可以解决
button JS交互 loading状态
<button type="button" class="am-btn am-btn-primary btn-loading-example"
data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中...', resetText: '加载过了'}">
按钮 - button 元素
</button>
spinner 加载动画图标，适用于支持 CSS3 动画、非 input 元素，写图标名称即可
loadingText 加载时显示的文字， 默认为 loading
resetText 重置以后的显示的文字，默认为原来的内容
js调用
$('.btn-loading-example').click(function () {
var $btn = $(this)
$btn.button('loading');//loading状态
$btn.button('reset');//复原
});
Amaze UI内外边距辅助类
Amaze UI在设计中，horizontal表示水平方向；scrollable表示垂直方向。
水平滚动：内容超出容器宽度时显示水平滚动条
am-scrollable-horizontal
垂直滚动: 内容超过设置的高度以后显示滚动条，默认设置的高度为 240px
am-scrollable -vertical
四周外边距：
.am-margin
.am-margin-{size}
水平方向外边距：
.am-margin-horizontal
.am-margin-horizontal-{size}
垂直方向外边距：
.am-margin-vertical
.am-margin-vertical-{size}
左外边距：
.am-margin-left
.am-margin-left-{size}
其padding同理可得
Amaze UI给img定义了一些简单的样式，去掉图片原本的边框线，所以img元素中展示的其本身大小，可以通过.am-img-responsive满屏撑满
.am-img-responsive {
display: block;
max-width: 100%;
height: auto;
}
也可以通过.am-img-thumbnail添加边宽线
在Amaze UI使用表单时，需要在容器上添加 .am-form class，容器里的子元素才会应用 Amaze UI 定义的样式。
表单水平排列。在form表单中添加 .am-form-horizontal class 并结合网格系统使用
<form class="am-form am-form-horizontal">
<div class="am-form-group">
<label for="doc-ipt-3" class="am-u-sm-2 am-form-label">电子邮件</label>
<div class="am-u-sm-10">
<input type="email" id="doc-ipt-3" placeholder="输入你的电子邮件">
</div>
</div>
</form>
简答的来说，am-form-group中的元素会一行内排列
行内排列，在外围容器上添加 .am-form-inline。 注意： 行内排列的元素并没有设置右边距，默认使用 inline-block 元素的间距，压缩 HTML 后行内表单元素的右边距会消失，需要自行处理。
<form class="am-form-inline" role="form">
<div class="am-form-group">
<input type="email" class="am-form-field" placeholder="电子邮件">
</div>
<div class="am-form-group">
<input type="password" class="am-form-field" placeholder="密码">
</div>
</form>
简答的来说，am-form-group中的元素会从左往右进行排列
建议所有的input框全部放在am-form中，因为amaze ui已经帮我们封装好了。
.am-form select,
.am-form textarea,
.am-form input[type="text"],
.am-form input[type="password"],
.am-form input[type="datetime"],
.am-form input[type="datetime-local"],
.am-form input[type="date"],
.am-form input[type="month"],
.am-form input[type="time"],
.am-form input[type="week"],
.am-form input[type="number"],
.am-form input[type="email"],
.am-form input[type="url"],
.am-form input[type="search"],
.am-form input[type="tel"],
.am-form input[type="color"],
.am-form-field {
display: block;
width: 100%;
padding: 0.5em;
font-size: 1.6rem;
line-height: 1.2;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 0;
-webkit-appearance: none;
-webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
表格
Amaze UI通过给table添加.am-table设置基本样式；通过添加 .am-table-bordered 类生成边框线通过添加；通过添加 .am-table-radius 类生成外层圆角边宽；通过添加 .am-table-striped 类生成斑马线效果；通过添加 .am-table-hover 类生成hover 效果；
<table class="am-table am-table-bordered am-table-radius am-table-striped am-table-hover">
<thead>
<tr>
<th>网站名称</th>
<th>网址</th>
<th>创建时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amaze UI</td>
<td>http://amazeui.org</td>
<td>2012-10-01</td>
</tr>
</tbody>
</table>
模拟弹窗
下面就是Amaze UI一个常见的弹窗，官方文档中.am-modal后面还跟了.am-modal-alert或.am-modal-confirm,经过个人研究得出，没有实际用处，只是语义化而已。
//模拟弹窗开关
<button type="button" id='btn'></button>
//模拟弹窗
<div class="am-modal" tabindex="-1" id="modal">
<div class="am-modal-dialog">
<div class="am-modal-hd">//模拟弹窗头部
<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>×</a>
//a标签表示可以关闭当前弹窗的按钮
</div>
<div class="am-modal-bd">
//模拟弹窗内容区
</div>
<div class="am-modal-footer">
//模拟弹窗底部，底部一般放按钮，在一行等比例显示
<span class="am-modal-btn" data-am-modal-cancel>取消</span>
<span class="am-modal-btn" data-am-modal-confirm>提交</span>
</div>
</div>
</div>
//js调用，通过按钮点击事件触发
$('#btn').onclick = function(){
$('#model').modal({
width: number //可不写，
height: number //可不写，
onConfirm:function(options){
//对应点击事件 <span class="am-modal-btn" data-am-modal-confirm>提交</span>
}
onCancel:function(options){
//对应点击事件 <span class="am-modal-btn" data-am-modal-cancel>取消</span>
}
})
}