布局容器和栅格系统

布局容器

AUI的布局容器有两种.aui-content和.aui-content-padded。.aui-content-padded为增加了0.75rem的内边距。

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

常用标签在aui中的处理

<a></a>标签的默认颜色为：#0062cc;
<p></p>默认字号为14px，颜色为#f5f5f5;

对齐、显示、隐藏的处理

左对齐：.aui-pull-left
右对齐：.aui-pull-right
显示：.aui-show
隐藏：.aui-hide
隐藏：.aui-invisible 元素不可见，但是依然会占据空间
单行文字超出省略：.aui-ellipsis 或 .aui-ellipsis-1
两行行文字超出省略：.aui-ellipsis-2

容器边距类的处理

方便用户快速使用边距类的操作，在aui中固定了几个控制内边距类的样式：

.aui-padded-[0,5,10,15] 为上下左右内边距，例如 .aui-padded-10 为上下左右 0.5rem 的内边距。
.aui-padded-[t,b,l,r]-[0,5,10,15] 可以单独设置上下左右内边距，例如 .aui-padded-t-10 为上 0.5rem 的内边距， .aui-padded-l-5 为左 0.25rem 的内边距。

.aui-margin-[0,5,10,15] 为上下左右外边距，例如 .aui-margin-10 为上下左右 0.5rem 的外边距。
.aui-margin-[t,b,l,r]-[0,5,10,15] 可以单独设置上下左右外边距，例如 .aui-margin-t-10 为上 0.5rem 的外边距， .aui-margin-l-5 为左 0.25rem 的外边距。

栅格系统

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

<div class="aui-row">
    <div class="aui-col-xs-2">...</div>
</div>
<-- aui-row-padded为每个栅格之间增加0.25rem的间隙 -->
<div class="aui-row aui-row-padded">
    <div class="aui-col-xs-2">...</div>
</div>

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