盒子弹性布局
固定100px大小
剩余宽度自适应
自适应文本大小
盒子等比布局
span2 = 2/3 大小
span2 = 2/3 大小
span2 = 2/3 大小
span2 = 2/3 大小
span1 = 1/3 大小
span2 = 2/3 大小
盒子留白布局
左边按钮
右边按钮
左边按钮
右边按钮
右边按钮
左边按钮
右边按钮
右边按钮
右边按钮
左边按钮
右边按钮
流式布局
- 10
- 2
- 8
- 4
- 6
- 6
- 4
- 4
- 4
- 3
- 3
- 3
- 3
- 2
- 2
- 2
- 2
- 2
- 2
流式留白布局
两列布局-左边
两列布局-右边
三列布局-左边
三列布局-中间
三列布局-右边
四列布局-左边
四列布局-中间
四列布局-中间
四列布局-右边
两列布局-左边
两列布局-右边
两列布局-左边
两列布局-右边
流式盒子嵌套混搭布局
- span6
- span6
-
span3span3
-
span1span1
流式等列布局 5列:bui-fluid-5
- 1
- 1
- 2
- 1
- 2
- 3
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
流式等列留白布局 5列:bui-fluid-space-5
- 1
- 2
- 3
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
高度嵌套等比布局示例
A 高度自适应
B 2/3 高
C 1/3 高