布局容器和栅格系统

最后更新于:2022-04-01 01:24:05

## 布局容器 AUI的布局容器有两种`.aui-content`、`.aui-card`和`.aui-content-padded`默认背景色为#ffffff;用户可以根据实际情况来定义。`.aui-content-padded`为增加了10px的外边距。<br/> `.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`<br/> 右对齐:`.aui-pull-right`<br /> 显示:`.aui-show`<br/> 隐藏:`.aui-hide`<br/> 单行文字超出省略:`.aui-ellipsis-1`<Br/> 两行行文字超出省略:`.aui-ellipsis-2`<Br/> * * * * * ### 容器边距类的处理 方便用户快速使用边距类的操作,在aui中我固定了几个控制内边距类的样式 `.aui-padded-*`为上下左右内边距,`*`的值有5、10、15、20,例如`.aui-padded-10`为上下左右10px的内边距。<br /> 同时增加了上下为0,控制左右的处理,使用方法为.aui-padded-0-*;<Br/> * * * * * ## 栅格系统 使用过Bootstrap的用户可能会对栅格系统有所了解,根据Bootstrap的系统和针对移动设备对栅格系统重新做了定义,根据手机屏幕做了最多12列的等分。例如:`.aui-col-xs-2`则是进行6等分。 ~~~ <div class="aui-content"> <div class="aui-col-xs-2">...</div> </div> ~~~ 栅格系统在app的开发过程中会经常使用到,比如在演示app中图片列表、九宫格、十六宫格等都是基于栅格系统来完成布局。
';