Article Introduction: This article mainly looks at the grid components in the jquery mobile system. |
In this article, we look at the grid components in the jquery mobile system, and we use the "question answering" approach to get a sense of the initial:
1, how to set the 2 column layout?
Example:
<!--grid container start--> <div class= "Ui-grid-a" > <!--grid block start--> <div class= " Ui-block-a "> I am the left part </div> <!--grid block end--> <!--grid block start--> <div class= "Ui-block-b" > I am the right part </div> <!--grid block end--> </ div> <!--grid container end-->
Icon:
Description
1. Add Ui-grid-a to Grid container 2 column layout
2, how to set the 3 column layout?
Example:
<!--grid container start--> <div class= "Ui-grid-b" > <!--grid block start--> <div class= " Ui-block-a "> I am the left part </div> <!--grid block end--> <!--grid block start--> <div class= "Ui-block-b" > I am the middle part </div> <!--grid block end--> <!--grid Block start--> <div class= "ui-block-c" > I am the right part </div> <!--grid block end-- > </div> <!--grid container end-->
Icon:
Description
1. Add Ui-grid-b to Grid container 3 column layout
3, how to set the 4 column layout?
Example:
<!--grid container start--> <div class= "Ui-grid-c" > <!--grid block start--> <div class= " Ui-block-a "> I am the left part </div> <!--grid block end--> <!--grid block start--> <div class= "Ui-block-b" > I am part of the Middle 1 </div> <!--grid block end--> <!-- Grid block start--> <div class= "ui-block-c" > I am part of the Middle 2 </div> <!--grid block End--> <!--grid block start--> <div class= "ui-block-d" > I'm the right part </div> <!--grid block end--> </div> <!--grid container end-->
Icon:
Description
1. Add Ui-grid-c to Grid container 4 column Layout
Many students see here and asked, back also can support 5 columns? 6 columns? ... Or is it more?
In fact, jquery Mobile has its own set of systems, we can look at the following figure
The classname configuration for the grid container is as follows:
The classname of the grid block is configured as follows:
Demo