bootstrap

row  //行 

am-form-inline //横着排列间距

am-form-horizontal //竖着间距
am-u-sm-offset-2 //偏移量
<hr> //线条
am-u-sm-centered //居中 跟am-g搭配用
am-margin-top //向上外边距
am-text-truncate //对超过宽带的文字进行截取
am-text-break //对超过宽带的文字自动换行
success: 绿色
warning: 橙色
danger: 红色

amezeui

//字体大小
.am-text-xs - 12px
.am-text-sm - 14px
.am-text-default - 16px
.am-text-lg - 18px
.am-text-xl - 24px
.am-text-xxl - 32px
.am-text-xxxl - 42px

//对齐方式

文本垂直对齐

.am-text-top - 顶对齐
.am-text-middle - 居中对齐
.am-text-bottom - 底对齐
左对齐 右对齐 居中 自适应
.am-text-left .am-text-right .am-text-center .am-text-justify
.am-sm-text-left .am-sm-text-right .am-sm-text-center .am-sm-text-justify
.am-sm-only-text-left .am-sm-only-text-right .am-sm-only-text-center .am-sm-only-text-justify
.am-md-text-left .am-md-text-right .am-md-text-center .am-md-text-justify
.am-md-only-text-left .am-md-only-text-right .am-md-only-text-center .am-md-only-text-justify
.am-lg-text-left .am-lg-text-right .am-lg-text-center .am-lg-text-justify

//浮动
<div class="am-cf">
<button class="am-btn am-btn-success am-fl">向左浮动</button>
<button class="am-btn am-btn-success am-fr">向右浮动</button>
</div>
响应式断点如下：

Class 区间
am-u-sm-* 0 - 640px
am-u-md-* 641px - 1024px
am-u-lg-* 1025px +
//区间划分sm 区间两列是等分的，md 区间为 1:2 划分，lg 区间为 1:3。
<div class="am-g doc-am-g">
<div class="am-u-sm-6 am-u-md-4 am-u-lg-3">sm-6 md-4 lg-3</div>
<div class="am-u-sm-6 am-u-md-8 am-u-lg-9">sm-6 md-8 lg-9</div>
</div>
.am-g
.am-g-fixed //max-width: 1000px;

<div class="am-g">
<div class="am-u-sm-3">3</div>
<div class="am-u-sm-3">3</div>
<div class="am-u-sm-3 am-u-end">3</div>
</div>
//选择域
<div class="am-form-group am-form-file">
<button type="button" class="am-btn am-btn-default am-btn-sm">
<i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
<input type="file" multiple>
</div>

<hr/>

<div class="am-form-group am-form-file">
<i class="am-icon-cloud-upload"></i> 选择要上传的文件
<input type="file" multiple>
</div>
//按钮图片icon
<button class="am-btn am-btn-default">
<i class="am-icon-cog"></i>
设置
</button>

<a class="am-btn am-btn-warning" href="#">
<i class="am-icon-shopping-cart"></i>
结账
</a>

<button class="am-btn am-btn-default">
<i class="am-icon-spinner am-icon-spin"></i>
加载中
</button>

<button class="am-btn am-btn-primary">
下载片片
<i class="am-icon-cloud-download"></i>
</button>
//块显示
<button type="button" class="am-btn am-btn-primary am-btn-block">块级显示的按钮</button>
<button type="button" class="am-btn am-btn-default am-btn-block">块级显示的按钮</button>
//尺寸
<button class="am-btn am-btn-default am-btn-xl">按钮 - xl</button>
<button class="am-btn am-btn-default am-btn-lg">按钮 - lg</button>
<button class="am-btn am-btn-default">按钮默认大小</button>
<button class="am-btn am-btn-default am-btn-sm">按钮 - sm</button>
<button class="am-btn am-btn-default am-btn-xs">按钮 - xs</button>

<button class="am-btn am-btn-primary am-btn-xl">按钮 - xl</button>
<button class="am-btn am-btn-primary am-btn-lg">按钮 - lg</button>
<button class="am-btn am-btn-primary">按钮默认大小</button>
<button class="am-btn am-btn-primary am-btn-sm">按钮 - sm</button>
<button class="am-btn am-btn-primary am-btn-xs">按钮 - xs</button>
//禁用
<button type="button" class="am-btn am-btn-primary" disabled="disabled">禁用状态</button>
<button type="button" class="am-btn am-btn-default" disabled="disabled">禁用状态</button>
<a href="#" class="am-btn am-btn-primary am-disabled">链接按钮禁用状态</a>
<a href="#" class="am-btn am-btn-default am-disabled">链接按钮禁用状态</a>

<button type="button" class="am-btn am-btn-primary am-active">激活状态</button>
<button type="button" class="am-btn am-btn-default am-active">激活状态</button>
<br >
<br >
<a href="#" class="am-btn am-btn-primary am-active" role="button">链接按钮激活状态</a>
<a href="#" class="am-btn am-btn-default am-active" role="button">链接按钮激活状态</a>
//按钮
<button type="button" class="am-btn am-btn-default">默认样式</button>
<button type="button" class="am-btn am-btn-primary">主色按钮</button>
<button type="button" class="am-btn am-btn-secondary">次色按钮</button>
<button type="button" class="am-btn am-btn-success">绿色按钮</button>
<button type="button" class="am-btn am-btn-warning">橙色按钮</button>
<button type="button" class="am-btn am-btn-danger">红色按钮</button>
<a class="am-btn am-btn-link">链接</a>
<a class="am-btn am-btn-default">应用按钮样式的链接</a>
.am-img-responsive 响应式图片
.am-radius 圆角
.am-round 椭圆
.am-circle 圆形
.am-img-thumbnail 边框

 

//多图片的响应式
<ul class="am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-thumbnails">
<li><img class="am-thumbnail" src="http://s.cn.bing.net/az/hprichbg/rb/TheLuxorHotel_ZH-CN12121725266_1920x1080.jpg" /></li>
。。。
</ul>
//响应式
<ul>
<li class="am-show-sm-only">仅 small 可见</li>
<li class="am-show-md-up">medium + 可见</li>
<li class="am-show-md-only">仅 medium 可见</li>
<li class="am-show-lg-up">large 可见</li>
<li class="am-show-lg-only">仅 large 可见</li>
</ul>