布局容器和栅格系统

布局容器

AUI的布局容器有两种.aui-content、.aui-card和.aui-content-padded默认背景色为#ffffff；用户可以根据实际情况来定义。.aui-content-padded为增加了10px的外边距。

.aui-card为圆角类，默认有10px的外边距

<div class="aui-content">
......
</div>

常用标签在aui中的处理

<a></a>标签的默认颜色为：#0062cc;
<p></p>增加了margin-bottom为10px的边距，默认字号为14px，颜色为#8f8f94;
h标题类分别做了margin-top，margin-bottom为5px的处理；

对齐、显示、隐藏的处理

左对齐：.aui-pull-left

右对齐：.aui-pull-right

显示：.aui-show

隐藏：.aui-hide

单行文字超出省略：.aui-ellipsis-1

两行行文字超出省略：.aui-ellipsis-2

容器边距类的处理

方便用户快速使用边距类的操作，在aui中我固定了几个控制内边距类的样式
.aui-padded-*为上下左右内边距，*的值有5、10、15、20，例如.aui-padded-10为上下左右10px的内边距。

同时增加了上下为0，控制左右的处理，使用方法为.aui-padded-0-*；

栅格系统

使用过Bootstrap的用户可能会对栅格系统有所了解，根据Bootstrap的系统和针对移动设备对栅格系统重新做了定义，根据手机屏幕做了最多12列的等分。例如：.aui-col-xs-2则是进行6等分。

<div class="aui-content">
    <div class="aui-col-xs-2">...</div>
</div>

栅格系统在app的开发过程中会经常使用到，比如在演示app中图片列表、九宫格、十六宫格等都是基于栅格系统来完成布局。