📌  相关文章
📜  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
      
      
         
      
   

   
      

         

         
            

               

                  
Layout Grid

               

            

            
            

               

                  

                     
Columns with gutter

                     
                     

                        

                           
col 1

                           
col 2

                        

                        
                        

                           
col 1

                           
col 2

                           
col 3

                           
col 4

                        

                        
                        

                           
col 1

                           
col 2

                           
col 3

                        

                        
                        
Columns without gutter

                        
                        

                           

                              
col 1

                              
col 2

                           

                           
                           

                              
col 1

                              
col 2

                              
col 3

                              
col 4

                           

                           
                           

                              
col 1

                              
col 2

                              
col 3

                           

                        

                     
                        
Nested Columns

                        

                           

                              
                              

                                 col 1
                                 

                                    
col 2

                                    
col 3

                                 

                              

                                 
                              

                                 col 1
                                 

                                    
col 2

                                    
col 3

                                 

                              

                                 
                           

                        

                           
                        
Columns With Different Equal Width

                           
                        

                           

                              
col 1

                              
col 2

                           

                              
                           

                              
col 1

                              
col 2

                              
col 3

                              
col 4

                           

                              
                           

                              
col 1

                              
col 2

                              
col 3

                              
col 4

                           

                        

                           
                        
Columns With Equal Width

                           
                        

                           

                              
col-1

                              
col-2

                              
col-3

                              
col-4

                           

                              
                           

                              
col-1

                              
col-2

                              
col-3

                              
col-4

输出

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

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

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

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