使用jqMobi开发app基础：Grid布局

时间：2014-01-20 23:05:25 阅读：385 评论：0 收藏：0 [点我收藏+]

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.

官网参考

使用jqMobi开发app基础：Grid布局

原文：http://blog.csdn.net/xuexiaodong009/article/details/18351517

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)