grid栅格系统
栅格系统是框架的主要组成部分,也是自适应的主要框架。
iceui栅格系统
iceui提供了一套响应式、移动设备优先的流式栅格系统定义了12列,随着屏幕或视口(viewport)尺寸的变化,列会根据屏幕大小自动重新排列,该栅格系统比Bootstrap更加灵活,增加了一套可自定义1-12列的等宽,Bootstrap例如想要设置5列7列等宽,只能使用col,但是该类的最大缺点就是无法根据各类屏幕尺寸显示不同的列,例如在电脑屏幕上显示7列,平板上显示5列,手机上显示2列,iceui栅格系统可根据自己的需求自定义排版,以下是基本演示:

w12

w6

w6

w4

w4

w4

w3

w3

w3

w3

w2

w2

w2

w2

w2

w2

栅格类
  1. 首字母:
  2. w 指的英文width
  3. o 指的英文order
  4. - 横杠表示向右偏移
  5. 自适应尺寸:
  6. ws >=576px 针对手机端
  7. wm >576px 针对平板
  8. w >=768px(默认使用)针对桌面显示器
  9. wl >=992px 桌面显示器
  10. wx >=1200px 桌面显示器
  11. w- 左偏移
  12. 例如:
  13. w6 占用6个网格的宽度
  14. w-2 左偏移2个网格的宽度
  15. ws6 移动端中占用6个网格
  16. ws-2 移动端中做偏移2个网格
  17. o2 设置弹性盒对象元素的顺序为2
  18. 反向栅格方式:
  19. wz 一行需要放置几列的栅格,
  20. 例如:
  21. wz5 一行可以放置5列的栅格,相当于100% / 5
  22. wz3 一行可以放置3列的栅格,相当于100% / 3
很多人会把w与wz混淆,我举个例子来说明一下,例如:w6与wz6,w6是占据了6列宽的格子,基于栅格系统整行12列的宽度,宽度占据整行的100%/(12/6);wz6是可以放置6列,宽度占据整行的100%/6
栅格系统规则
  1. 使用行来创建水平的列组
  2. 内容需要放置在列中,并且只有列可以是行的直接子节点
  3. w字母开头的列宽,需要放在.row之中
  4. 网格列是通过跨越指定的12个列来创建。 例如,设置三个相等的列,需要使用用三个.w4 来设置
  5. iceui使用flexbox(弹性盒子)而不是传统方式的浮动(例如国外的Bootstrap3「Bootstrap4才改为flexbox」,国内的layui),Flexbox 的一大优势是,没有指定宽度的网格列将自动设置为等宽与等高列
栅格基本结构
等高响应式列

我们内容多1

我们内容多2

我们内容多3

我们内容多4

内容再多也与你等高

内容再多也与你等高

等宽响应式列

col

col

col

w4

w4

w4

wz3

wz3

wz3

不等宽响应式列

w4

w8

手机、平板和桌面端

w3 wm6 ws4

w3 wm6 ws8

w3 wm6 ws4

w3 wm6 ws8

列偏移

w3

w3

w3

w3

w-6 w3

w3

排序

内容1 o3

内容2 o4

内容3 o1

内容4 o2

代码示例