使用jqMobi开发app基础：Grid布局
浏览数：24 /
时间：2015年06月11日
jqMobi中的 Grid布局，是一种表格式布局，主要是两列，三列布局。
主要通过类属性grid表示是表格布局，通过类属性col2表示分成两列的表格。col3表示分成3列的表格.。col2-3表示在三列中占居两列的位置。
例如：
<div class="grid">
<div class="col2"> <a href="#home" id=‘navbar_home‘ class=‘icon home‘ >两列第一列测试</a> </div>
<div class="col2"> <a href="#home" id=‘A1‘ class=‘icon picture‘ >两列第二列测试</a> </div>
</div>
<br /><br />
<div class="grid">
<div class="col3"> <a href="#home" id=‘A2‘ class=‘icon home‘ >三列测试</a> </div>
<div class="col3"> <a href="#home" id=‘A3‘ class=‘icon picture‘ >三列测试</a> </div>
<div class="col3"> <a href="#home" id=‘A4‘ class=‘icon home‘ >三列测试</a> </div>
<div class="col3"> <a href="#home" id=‘A11‘ class=‘icon picture‘ >三列测试</a> </div>
</div>
<br /><br />
<div class="grid">
<div class="col1-3"> <a href="#home" id=‘A5‘ class=‘icon home‘ >三列测试</a> </div>
<div class="col1-3"> <a href="#home" id=‘A15‘ class=‘icon home‘ >三列测试</a> </div>
<div class="col1-3"> <a href="#home" id=‘A16‘ class=‘icon home‘ >三列测试</a> </div>
<div class="col2-3"> <a href="#home" id=‘A6‘ class=‘icon home‘ >三列测试占居两列</a> </div>
<div class="col1-3"> <a href="#home" id=‘A19‘ class=‘icon home‘ >三列测试</a> </div>
</div>显示效果：
可以看到col2表示分成两列的表格并不是官网上说的2*2的表格。col3表示分成3列的表格，不是官网上说的3*3的表格。
col1-3
和col3似乎是一样的。
但如果缩小屏幕，则显示效果如下：
都变成了单列显示，原来使用的是响应式布局。
官网上说：On phones, the grid system will always default
to a single row. On tablets, the grid will display inline.
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
