Using Jqmobi to develop the grid layout for app Basics

The grid layout in Jqmobi is a tabular layout, mainly two columns and three column layouts.

Mainly through the Class property grid representation is a table layout, through the class attribute col2 represents a table divided into two columns. Col3 represents a table divided into 3 columns. Col2-3 represents the position of two columns in three columns.

For example:

  <div class= "Grid" > <div class= "col2" > <a href= "#home" id= ' navbar_home ' class= ' icon home ' > two list first Column Test </a> </div> <div class= "col2" > <a href= "#home" id= ' A1 ' class= ' icon picture ' > Two column second column test <  /a> </div> </div> <br/><br/> <div class= "Grid" > <div class= "col3" > <a href= "#home" id= ' A2 ' class= ' icon Home ' > Three-column Test </a> </div> <div class= "col3" > <a href= "# Home "id= ' A3 ' class= ' icon picture ' > Three-column Test </a> </div> <div class=" col3 "> <a href=" #home "id=" A4 ' class= ' icon Home ' > Three-column Test </a> </div> <div class= "col3" > <a href= "#home" id= ' A11 ' class= ' Icon Picture ' > Tri-column Test </a> </div> </div> <br/><br/> <div class= "Grid" > & Lt;div class= "Col1-3" > <a href= "#home" id= ' A5 ' class= ' icon Home ' > Three-column Test </a> </div> <div class = "Col1-3" > <a HREf= "#home" id= ' A15 ' class= ' icon home ' > Tri-column Test </a> </div> <div class= "Col1-3" > <a href= "#home" Id= ' A16 ' class= ' icon Home ' > Three-column Test </a> </div> <div class= "col2-3" > <a href= "#home" id= ' A6 '  class= ' icon Home ' > Three-column test occupies two columns </a> </div> <div class= "Col1-3" > <a href= "#home" id= ' A19 ' class= ' icon Home ' > Three-column test </a> </div> </div>

Display effect:

Back to the column page: http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/