文档中心

布局使用教程

Bingotouch里面集合了两种布局方式,一种是弹性布局,弹性布局最大的优点就是能充分利用屏幕空间。无论客户端分辩率多大,都能自动适应宽度的变化; 一种是12栏布局,12栏布局特点是栏目跟栏目之间有固定的间隙。

1. 弹性布局

class= row-box 这个div里面的元素就将采用弹性盒模型来布局,弹性盒模型,可以把里面的子元素进行等分,多少等分取决于span1 - span12 后面的数字和。如果里面只有一个span*,那span*的宽度=总宽度 - 其它宽度。
注意:style= 是展示用的,可以删除

单个弹性块

span1的宽度 = row-box的宽度 - 第1个div 100px固定大小 - 第3个div文本内容的大小

<div class="row-box">
    <div style="background:green;color:#fff;width:100px;">固定100px大小</div>
    <div class="span1" style="background:red;color:#fff;">剩余宽度自适应</div>
    <div style="background:blue;color:#fff;">自适应文本大小</div>
</div>

多个弹性块

多个弹性块的结构跟单个弹性块不同,弹性块里面需要裹一层div。

错误结构示例 没有文本时是正确的等分

<div class="row-box">
    <div class="span1" style="background:green;color:#fff;"></div>
    <div class="span2" style="background:red;color:#fff;"></div>
    <div class="span3" style="background:blue;color:#fff;"></div>
</div>

next example

错误结构示例 有文本时,分出来的就是错误的比例

<div class="row-box">
    <div class="span1" style="background:green;color:#fff;">
       span1 = 1/6 大小
    </div>
    <div class="span2" style="background:red;color:#fff;">
       span2 = 1/3 大小
    </div>
    <div class="span3" style="background:blue;color:#fff;">
       span3 = 1/2 大小
    </div>
</div>

next example

正确示例- 6等分 = span1 + span2 + span3

<div class="row-box">
    <div class="span1" style="background:green;color:#fff;">
       <div class="box">span1 = 1/6 大小</div>
    </div>
    <div class="span2" style="background:red;color:#fff;">
       <div class="box">span2 = 1/3 大小</div>
    </div>
    <div class="span3" style="background:blue;color:#fff;">
       <div class="box">span3 = 1/2 大小</div>
    </div>
</div>

next example

正确示例- 剩余宽度3等分

<div class="row-box">
    <div style="background:green;color:#fff;width:100px;">固定100px大小</div>
    <div class="span1" style="background:blue;color:#fff;">
       <div class="box">span1 = 剩余宽度1/3 大小</div>
    </div>
    <div class="span2" style="background:red;color:#fff;">
       <div class="box">span2 = 剩余宽度2/3 大小</div>
    </div>
</div>

next example

box-orient=“true” 显示的方向就变纵向了

<div class="row-box" box-orient="true">
    <div class="span1" style="background:green;color:#fff;">
       <div class="box">span1 = 1/6 大小</div>
    </div>
    <div class="span2" style="background:red;color:#fff;">
       <div class="box">span2 = 1/3 大小</div>
    </div>
    <div class="span3" style="background:blue;color:#fff;">
       <div class="box">span3 = 1/2 大小</div>
    </div>
</div>

next example

box-reverse=“true” 反序排列-不用更改结构

<div class="row-box" box-reverse="true">
    <div class="span1" style="background:green;color:#fff;">
       <div class="box">span1 = 1/6 大小</div>
    </div>
    <div class="span2" style="background:red;color:#fff;">
       <div class="box">span2 = 1/3 大小</div>
    </div>
    <div class="span3" style="background:blue;color:#fff;">
       <div class="box">span3 = 1/2 大小</div>
    </div>
</div>

2. bootstrap 12栏布局

bootstrap布局是twitter开发的前端css框架,我们这里只��到bootstrap的布局方式,每一行分为12列,由span1-span12组成,每一列就是一个容器,里面可以放各种各样的组件。
更多布局使用请看:bootstrap官方网站

<div class="row-fluid">
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
</div>
<div class="row-fluid">
    <div class="span2">2</div>
    <div class="span2">2</div>
    <div class="span2">2</div>
    <div class="span2">2</div>
    <div class="span2">2</div>
    <div class="span2">2</div>
</div>
<div class="row-fluid">
    <div class="span3">3</div>
    <div class="span3">3</div>
    <div class="span3">3</div>
    <div class="span3">3</div>
</div>
<div class="row-fluid">
    <div class="span4">4</div>
    <div class="span4">4</div>
    <div class="span4">4</div>
</div>
<div class="row-fluid">
    <div class="span5">5</div>
    <div class="span7">7</div>
</div>
<div class="row-fluid">
    <div class="span6">6</div>
    <div class="span6">6</div>
</div>
<div class="row-fluid">
    <div class="span7">7</div>
    <div class="span3">3</div>
    <div class="span2">2</div>
</div>
<div class="row-fluid">
    <div class="span8">8</div>
    <div class="span4">4</div>
</div>
<div class="row-fluid">
    <div class="span12">12</div>
</div>