布局
目录
盒子弹性布局
盒子等比布局
盒子留白布局
流式布局
流式留白布局
流式及盒子嵌套混搭布局
流式等列布局
流式等列留白布局

盒子弹性布局

固定100px大小
剩余宽度自适应
自适应文本大小
示例:
<div class="bui-box"> <div style="width:100px;">固定100px大小</div> <div class="span1">剩余宽度自适应</div> <div>自适应文本大小</div> </div>
场景示例

盒子等比布局

span1 = 1/3 大小
span2 = 2/3 大小
span2 = 2/12 大小
span2 = 2/12 大小
span2 = 2/12 大小
span5 = 5/12 大小
span1 = 1/12 大小
示例:
<div class="bui-box"> <div class="span1"> span1 = 1/3 大小 </div> <div class="span2"> span2 = 2/3 大小 </div> </div>

盒子留白布局

左边按钮
右边按钮
左边按钮
右边按钮
右边按钮
左边按钮
右边按钮
右边按钮
右边按钮
左边按钮
右边按钮
示例:
<div class="bui-box-space"> <div class="span1"> <div class="bui-btn">左边按钮</div> </div> <div class="span1"> <div class="bui-btn">右边按钮</div> </div> </div>

流式布局

  • 10
  • 2
  • 8
  • 4
  • 6
  • 6
  • 4
  • 4
  • 4
  • 3
  • 3
  • 3
  • 3
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
示例:
<ul class="bui-fluid"> <li class="span10"> 10 </li> <li class="span2"> 2 </li> </ul>
场景示例
  • 首页
  • 新闻
  • 图片
  • 视频
  • 视频
  • 视频

流式留白布局

两列布局-左边
两列布局-右边
三列布局-左边
三列布局-中间
三列布局-右边
四列布局-左边
四列布局-中间
四列布局-中间
四列布局-右边
两列布局-左边
两列布局-右边
两列布局-左边
两列布局-右边
示例:
<div class="bui-fluid-space"> <div class="span6"> <div class="bui-btn">两列布局-左边</div> </div> <div class="span6"> <div class="bui-btn">两列布局-右边</div> </div> </div>

流式盒子嵌套混搭布局

  • span6
  • span6
  • span3
    span3
  • span1
    span1
示例:
<ul class="bui-fluid"> <li class="span6"> <div class="bui-fluid"> <div class="span6">span3</div> <div class="span6">span3</div> </div> </li> <li class="span6"> <div class="bui-box"> <div class="span1">span1</div> <div class="span1">span1</div> </div> </li> </ul>

盒子嵌套流式混搭布局

span1
span1
span1
span1
span6
span6
示例:
<div class="bui-box"> <div class="span1"> <div class="bui-box"> <div class="span1">span1</div> <div class="span1">span1</div> </div> </div> <div class="span1"> <div class="bui-fluid"> <div class="span6">span6</div> <div class="span6">span6</div> </div> </div> </div>
流式等列布局 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 高