弹性布局/栅格
使用弹性布局可以轻松在手机、Pad平板、电脑三种设备中得到更好的布局支持,它和table一样,但与table的区别在于结构简单、语法清晰、更自由
基础用法介绍
我们将页面宽度以百分比的形式划分为12个等级
ks-row 表示一行
在 ks-row 中添加 ks-col表示一列
给 ks-col 标签添加栅格属性:span/sm/pc/hd等
如何区分不同的设备
KSAUI为不同设备分配了不同的标签属性,下面是对应表
手机(<576px)|默认 |
平板(<1024px) |
电脑(≥1024px) |
高分屏(≥1900px) |
span="*" |
sm="*" |
pc="*" |
hd="*" |
因为宽度是百分比,如果你的项目不需要考虑1024以下的项目,可以直接用.ks-col-*
基础用法
手机6/12 | 电脑2/12
手机6/12 | 电脑10/12
手机3/12 | 平板5/12 | 电脑6/12
手机9/12 | 平板7/12 | 电脑6/12
加上边距
ks-row标签添加 spacing 属性, 属性值1-6
同一个父级内混搭
1/12
2/12
2/12
3/12
4/12
12/12
1/12
5/12
6/12
12列 demo
11/12
1/12
10/12
2/12
9/12
3/12
8/12
4/12
7/12
5/12
6/12
6/12
5/12
7/12
4/12
8/12
3/12
9/12
2/12
10/12
1/12
11/12