布局

弹性布局

弹性布局这里也叫行布局,不管子集有多少元素,都会挤在一行.

弹性布局-等比 bui-box

*例子: 把整行划分成 3份, 子集可以是 span1-span12 *

  1. <div class="bui-box">
  2.     <div class="span1">
  3.         1/3大小
  4.     </div>
  5.     <div class="span2">
  6.         2/3大小
  7.     </div>
  8. </div>

弹性布局-自适应 bui-box

bui的部分元素默认也是采用这种布局, 比方 样式为 bui-bar 的自适应是 bui-bar-main, bui-input 自适应是 input标签

*例子: span1的宽度 = 整行宽度 - 100px, span1称之自适应 *

  1. <div class="bui-box">
  2.     <div style="width:100px;">宽度100px</div>
  3.     <div class="span1">
  4.         // 自适应内容
  5.     </div>
  6. </div>

弹性布局-垂直 bui-box-vertical

*例子: span1的高度 = 整行高度 - 30px *

  1. <div class="bui-box-vertical" style="height:100px;">
  2.     <div style="height:30px;">高度30px</div>
  3.     <div class="span1">
  4.         // 自适应内容
  5.     </div>
  6. </div>

弹性布局-反序 bui-box-reverse

*例子: *

  1. <div class="bui-box-reverse">
  2.     <div style="width:100px;">宽度100px</div>
  3.     <div class="span1">
  4.         // 自适应内容
  5.     </div>
  6. </div>

弹性布局-对齐

弹性布局-绝对居中 bui-box-center

*例子: *

  1. <div class="bui-box-center" style="height:100px;background: #fff;">
  2.     <div style="width:100px;height:50px;background:#eee">宽度100px,<br>高度50px</div>
  3. </div>

弹性布局-水平居中 bui-box-align-center

*例子: *

  1. <div class="bui-box-align-center" style="height:100px;background: #fff;">
  2.     <div style="width:100px;height:50px;background:#eee">宽度100px,<br>高度50px</div>
  3. </div>

弹性布局-水平居左 bui-box-align-left

*例子: *

  1. <div class="bui-box-align-left" style="height:100px;background: #fff;">
  2.     <div style="width:100px;height:50px;background:#eee">宽度100px,<br>高度50px</div>
  3. </div>

弹性布局-水平居右 bui-box-align-right

*例子: *

  1. <div class="bui-box-align-right" style="height:100px;background: #fff;">
  2.     <div style="width:100px;height:50px;background:#eee">宽度100px,<br>高度50px</div>
  3. </div>

弹性布局-垂直居中 bui-box-align-middle

*例子: *

  1. <div class="bui-box-align-middle" style="height:100px;background: #fff;">
  2.     <div style="width:100px;height:50px;background:#eee">宽度100px,<br>高度50px</div>
  3. </div>

弹性布局-顶部对齐 bui-box-align-top

*例子: *

  1. <div class="bui-box-align-top" style="height:100px;background: #fff;">
  2.     <div style="width:100px;height:50px;background:#eee">宽度100px,<br>高度50px</div>
  3. </div>

弹性布局-底部对齐 bui-box-align-bottom

*例子: *

  1. <div class="bui-box-align-bottom" style="height:100px;background: #fff;">
  2.     <div style="width:100px;height:50px;background:#eee">宽度100px,<br>高度50px</div>
  3. </div>

弹性布局-两端对齐 bui-box-align-justify

*例子: *

  1. <div class="bui-box-align-justify" style="height:100px;background: #fff;">
  2.     <div style="width:100px;background:#eee">宽度100px</div>
  3.     <div style="width:100px;background:#eee">宽度100px</div>
  4. </div>

弹性布局-子集等高 bui-box-align-stretch

*例子: *

  1. <div class="bui-box-align-stretch" style="height:100px;background: #eee;">
  2.     <div style="width:100px;background:#d1d1d1;">高度50px</div>
  3.     <div style="width:100px;background:#ddd">高度50px</div>
  4. </div>

流式12列布局

流式布局把一行分为12列,后面的数字加起来等于12则一行,大于12则另起一行.

  1. <div class="bui-fluid">
  2.     <!-- 第1行 自由比例 -->
  3.     <div class="span2">2/12</div>
  4.     <div class="span4">4/12</div>
  5.     <div class="span4">4/12</div>
  6.     <div class="span2">2/12</div>
  7.     <!-- 第2行 3等分-->
  8.     <div class="span4">4/12</div>
  9.     <div class="span4">4/12</div>
  10.     <div class="span4">4/12</div>
  11. </div>

流式等列布局

流式等列布局认为子元素全部是等分的,由父层数字决定子集占比,最多12列.

  1. <ul class="bui-fluid-2">
  2.     <li>
  3.         1/2大小
  4.     </li>
  5.     <li>
  6.         1/2大小
  7.     </li>
  8. </ul>

间隙布局

每种布局都有一种带间隔的布局, 只需在后面加上-space

流式间隙 bui-fluid-space

*例子: *

  1. <div class="bui-fluid-space">
  2.     <div class="span6">
  3.         1/2大小
  4.     </div>
  5.     <div class="span6">
  6.         1/2大小
  7.     </div>
  8. </div>

流式等比间隙 bui-fluid-space-2

*例子: *

  1. <div class="bui-fluid-space-2">
  2.     <div class="span1">
  3.         1/2大小
  4.     </div>
  5.     <div class="span1">
  6.         1/2大小
  7.     </div>
  8. </div>

弹性间隙 bui-box-space

*例子: *

  1. <div class="bui-box-space">
  2.     <div class="span1">
  3.         1/2大小
  4.     </div>
  5.     <div class="span1">
  6.         1/2大小
  7.     </div>
  8. </div>

嵌套布局

几种布局之间可以嵌套自身,也可以相互嵌套,实现更复杂的布局.

例子: 流式等列布局,嵌套弹性布局及流式布局

  1. <ul class="bui-fluid-2">
  2.     <li>
  3.         <div class="bui-box">
  4.             <div class="span1">1/4</div>
  5.             <div class="span1">1/4</div>
  6.         </div>
  7.     </li>
  8.     <li>
  9.         <div class="bui-fluid">
  10.             <div class="span6">1/4</div>
  11.             <div class="span6">1/4</div>
  12.         </div>
  13.     </li>
  14. </ul>

例子: 弹性布局,嵌套流式等列布局及流式布局

  1. <div class="bui-box">
  2.     <div class="span1">
  3.         <ul class="bui-fluid-2">
  4.             <li>1/4</li>
  5.             <li>1/4</li>
  6.         </ul>
  7.     </div>
  8.     <div class="span1">
  9.         <div class="bui-fluid">
  10.             <div class="span6">1/4</div>
  11.             <div class="span6">1/4</div>
  12.         </div>
  13.     </div>
  14. </div>