布局容器和栅格系统

2018-02-24 16:09 更新

布局容器

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中图片列表、九宫格、十六宫格等都是基于栅格系统来完成布局。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号