📜  Framework7-布局网格

📅  最后修改于: 2020-10-25 02:49:12             🧑  作者: Mango


描述

Framework7提供了不同类型的网格类型来根据用户需要放置内容。

布局网格提供了不同类型的列大小,如下表所述-

S.No Class Table Class Width
1 col-5 tablet-5 5%
2 col-10 tablet-10 10%
3 col-15 tablet-15 15%
4 col-20 tablet-20 20%
5 col-25 tablet-25 25%
6 col-30 tablet-30 30%
7 col-33 tablet-33 33.3%
8 col-35 tablet-35 35%
9 col-40 tablet-40 40%
10 col-45 tablet-45 45%
11 col-50 tablet-50 50%
12 col-55 tablet-55 55%
13 col-60 tablet-60 60%
14 col-65 tablet-65 65%
15 col-66 tablet-66 66.6%
16 col-70 tablet-70 70%
17 col-75 tablet-75 75%
18 col-80 tablet-80 80%
19 col-85 tablet-85 85%
20 col-90 tablet-90 90%
21 col-95 tablet-95 95%
21 col-100 tablet-100 100%
22 col-auto tablet-auto Equal width

以下示例提供了网格布局,可根据需要在Framework7中放置您的内容-


      
      
      Layout Grid
      
      
         
      
   

   
      

输出

让我们执行以下步骤,看看上面给出的代码如何工作-

  • 将上述指定的HTML代码另存为服务器根文件夹中的layout_grid.html文件。

  • 以http://localhost/layout_grid.html格式打开此HTML文件,如下所示显示输出。

  • 该代码提供了不同类型的网格类型,可以根据用户需要放置内容。