Materialize-css 网格

📌 相关文章

📜 Materialize-css 网格

📅 最后修改于: 2021-01-07 00:33:50 🧑 作者: Mango

Materialise提供了一个标准的12柱流体响应网格系统。它使用行和列样式类分别定义行和列。

Index	Class name	Description
1)	row	It is used to specify a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive.
2)	col	It is used to specify a column with sub-classes.

注意：col包含几个用于不同类型屏幕的子类。

小屏幕设备的列

以下是小屏幕设备(通常是智能手机)的列级样式列表。

Index	Class name	Description
1)	s1	It is used to define 1 of 12 columns with width as 08.33%.
2)	s2	It is used to define 2 of 12 columns with width as 16.66%.
3)	s3	It is used to define 3 of 12 columns with width as 25.00%.
4)	s4	It is used to define 4th of 12 columns with width as 33.33%. It contains s4, s5, s6, s7, s8, s9, s10, s11
12)	s12	It is used to define 12th of 12 columns with width as 100%. Default class for small screen phones.

中型屏幕设备的列

请参阅中型屏幕设备(例如平板电脑)的列级样式列表：

Index	Class name	Description
1)	m1	It is used to define 1 of 12 columns with width as 08.33%
2)	m2	It is used to define 2 of 12 columns with width as 16.66%.
3)	m3	It is used to define 3 of 12 columns with width as 25.00%.
4)	m4	It is used to define 4 of 12 columns with width as 33.33%.m5 – m11
12)	m12	It is used to define 12 of 12 columns with width as 100%. Default class for medium screen phones.

大型屏幕设备的列

请参阅大屏幕设备(例如笔记本电脑，台式机等)的列级样式列表。

Index	Class name	Description
1)	l1	It is used to define 1 of 12 columns with width as 08.33%.
2)	l2	It is used to define 2 of 12 columns with width as 16.66%.
3)	l3	It is used to define 3 of 12 columns with width as 25.00%.
4)	l4	It is used to define 4 of 12 columns with width as 33.33%. l5 – l11
12)	l12	It is used to define 12 of 12 columns with width as 100%. Default class for large screen devices.

用法

每个子类都根据设备的类型确定要使用的网格的列数。考虑以下HTML代码段。


   
      This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
      a large screen.

例



   
      The Materialize Grids Example
            
      
      
                 
                   
   
   
   
      
         Mobile First Design Demo
         Resize the window to see the effect!
      
      
       
      
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
      
      
      
         
            This text will use 12 columns on a small screen, 4 on a medium screen (m4),
               and 3 on a large screen (l3).
         
         
           
            This text will use 4 columns on a small screen (s4), 8 on a medium screen
               (m8), and 9 on a large screen (l9).

输出：