布局网格:是一种基于CSS的列布局方案。 由于移动设备的屏幕宽度所限,一般不推荐在移动设备上使用列布局
在定位更小的元素时,可以使用到。
网格中列是等宽的,无边框、背景、外边距、内边距
2列:ui-grid-a(子元素:ui-block-a|b)
3列:ui-grid-b(子元素:ui-block-a|b|c)
4列:ui-grid-c(子元素:ui-block-a|b|c|d)
5列:ui-grid-d(子元素:ui-block-a|b|c|d|e)
e.g.
<div data-role="content">
<p>2列布局</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" data-role="button">第一列button</a><br/>
<span>....</span>
</div>
<div class="ui-block-b">
<a href="#" data-role="button">第二列button</a><br/>
<span>....</span>
</div>
</div>
</div>
定制网格样式:
1.使用CSS
e.g.
<style>
.ui-block-a,
.ui-block-b,
.ui-block-c
{ background-color:yellow; border:1px solid black; height:100px; font-weight:bold; text-align:center; padding:30px; }
</style>
2. 行内样式:
<div class="ui-block-a" style="..."><span>content.....<span></div>
网格中多行定制: class="ui-block-a" 将始终创建新行
e.g.
<div class="ui-grid-b">
<div class="ui-block-a">....</div>
<div class="ui-block-b">....</div>
<div class="ui-block-c">....</div>
<div class="ui-block-a">....</div> //第二行第一列
<div class="ui-block-b">....</div> //第二行第二列
<div class="ui-block-a">....</div> //第三行第一列
</div>