使用jqMobi开发app基础:Grid布局详解手机开发

    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>

显示效果:

使用jqMobi开发app基础:Grid布局详解手机开发

可以看到col2表示分成两列的表格并不是官网上说的2*2的表格。col3表示分成3列的表格,不是官网上说的3*3的表格。

col1-3 和col3似乎是一样的。
但如果缩小屏幕,则显示效果如下:
使用jqMobi开发app基础:Grid布局详解手机开发
  
都变成了单列显示,原来使用的是响应式布局。
官网上说:On phones, the grid system will always default to a single row. On tablets, the grid will display inline.

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/tech/app/5276.html

(0)
上一篇 2021年7月16日 23:40
下一篇 2021年7月16日 23:40

相关推荐

发表回复

登录后才能评论