布局使用教程
Bingotouch里面集合了两种布局方式,一种是弹性布局,弹性布局最大的优点就是能充分利用屏幕空间。无论客户端分辩率多大,都能自动适应宽度的变化;
一种是12栏布局,12栏布局特点是栏目跟栏目之间有固定的间隙。
1. 弹性布局
class= row-box 这个div里面的元素就将采用弹性盒模型来布局,弹性盒模型,可以把里面的子元素进行等分,多少等分取决于span1 - span12 后面的数字和。如果里面只有一个span*,那span*的宽度=总宽度 - 其它宽度。注意:style= 是展示用的,可以删除
example
span1的宽度 = row-box的宽度 - 第2个div 100px固定大小 - 第3个div文本内容的大小
固定100px大小
剩余宽度自适应
自适应文本大小
BTSearchbar就是采用弹性布局,中间的input是自适应各种终端大小的
等分布局示例,结构跟只有一个span1 的时候不同
example
错误结构示例 没有文本时是正确的等分
错误结构示例 有文本时,分出来的就是错误的比例
span1 = 1/6 大小
span2 = 1/3 大小
span3 = 1/2 大小
正确示例- 6等分 = span1 + span2 + span3
正确示例- 剩余宽度3等分
box-orient="true" 显示的方向就变纵向了
box-reverse="true" 反序排列-不用更改结构
2. bootstrap布局
bootstrap布局是twitter开发的前端css框架,我们这里只用到bootstrap的布局方式,每一行分为12列,由span1-span12组成,每一列就是一个容器,里面可以放各种各样的组件。更多布局使用请看
bootstrap官方网站