# 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>
~~~
显示效果:
![](https://box.kancloud.cn/2016-02-23_56cbb4b88f2b5.jpg)
可以看到col2表示分成两列的表格并不是官网上说的2*2的表格。col3表示分成3列的表格,不是官网上说的3*3的表格。
col1-3 和col3似乎是一样的。
但如果缩小屏幕,则显示效果如下:
![](https://box.kancloud.cn/2016-02-23_56cbb4b89ee20.jpg)
都变成了单列显示,原来使用的是响应式布局。
官网上说:On phones, the grid system will always default to a single row. On tablets, the grid will display inline.
[官网参考](http://app-framework-software.intel.com/documentation.php#afui/afui_grid)
- 前言
- 使用jqMobi开发app基础
- jqMobi开发app页面注意事项
- 使用jqMobi开发app基础:定义header
- 使用jqMobi开发app基础:定义footer
- 使用jqMobi开发app基础:通过panel添加内容
- 使用jqMobi开发app基础:panel属性data-defer介绍
- 使用jqMobi开发app基础:Side Menu
- 使用jqMobi开发app基础:Styled Lists布局
- 使用jqMobi开发app基础:Grid布局
- 使用jqMobi开发app基础:响应式布局介绍
- 使用jqMobi开发app基础:Toggle Switches开关按钮
- 使用jqMobi开发app基础:HTML5 LocalStorage 本地存储
- 使用jqMobi开发app基础:登录页面的实现
- 使用jqMobi开发app基础:注销页面的实现
- 使用jqMobi开发app基础:viewport指令
- 使用jqMobi开发app基础:a标签的使用
- 使用jqMobi开发app基础:Scrolling的使用,向上向下拖动,动态添加数据
- 使用jqMobi开发app基础:页面传值方式
- 使用jqMobi开发app基础:panel之间的跳转方式
- 使用jqMobi开发app基础:panel之间的跳转方式总结
- 使用jqMobi开发app基础:下拉select
- 使用jqMobi开发app基础:真的只能存在一个DOM吗?
- 使用jqMobi开发app基础:使用 jQuery
- 使用jqMobi开发app基础:Scrolling的使用,拖动后大量空白的解决方法
- 使用jqMobi开发app基础:Scrolling的使用,停止和继续拖动有关的问题
- 使用jqMobi开发app基础:Badge的使用
- 使用jqMobi开发app基础:如何拨打电话?
- 使用jqMobi开发app基础:弹出内容的设计