布局容器和柵格系統(tǒng)

布局容器

AUI的布局容器有兩種.aui-content、.aui-card和.aui-content-padded默認(rèn)背景色為#ffffff；用戶可以根據(jù)實(shí)際情況來(lái)定義。.aui-content-padded為增加了10px的外邊距。

.aui-card為圓角類，默認(rèn)有10px的外邊距

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

常用標(biāo)簽在aui中的處理

<a></a>標(biāo)簽的默認(rèn)顏色為：#0062cc;
<p></p>增加了margin-bottom為10px的邊距，默認(rèn)字號(hào)為14px，顏色為#8f8f94;
h標(biāo)題類分別做了margin-top，margin-bottom為5px的處理；

對(duì)齊、顯示、隱藏的處理

左對(duì)齊：.aui-pull-left

右對(duì)齊：.aui-pull-right

顯示：.aui-show

隱藏：.aui-hide

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

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

容器邊距類的處理

方便用戶快速使用邊距類的操作，在aui中我固定了幾個(gè)控制內(nèi)邊距類的樣式
.aui-padded-*為上下左右內(nèi)邊距，*的值有5、10、15、20，例如.aui-padded-10為上下左右10px的內(nèi)邊距。

同時(shí)增加了上下為0，控制左右的處理，使用方法為.aui-padded-0-*；

柵格系統(tǒng)

使用過(guò)Bootstrap的用戶可能會(huì)對(duì)柵格系統(tǒng)有所了解，根據(jù)Bootstrap的系統(tǒng)和針對(duì)移動(dòng)設(shè)備對(duì)柵格系統(tǒng)重新做了定義，根據(jù)手機(jī)屏幕做了最多12列的等分。例如：.aui-col-xs-2則是進(jìn)行6等分。

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

柵格系統(tǒng)在app的開發(fā)過(guò)程中會(huì)經(jīng)常使用到，比如在演示app中圖片列表、九宮格、十六宮格等都是基于柵格系統(tǒng)來(lái)完成布局。