📅  最后修改于: 2020-10-22 08:22:27             🧑  作者: Mango
Materialize提供了一个12列流体响应网格。
它使用行和列样式类分别定义行和列。
Sr.No. | Class Name & Description |
---|---|
1 | row
Specifies a padding-less container to be used for responsive columns. This class is mandatory for responsive classes to be fully responsive. |
2 | col
Specifies a column with sub-classes. |
col具有多个子类,分别用于不同类型的屏幕。
以下是小屏幕设备(通常是智能手机)的列级样式列表。
Sr.No. | Class Name & Description | |
---|---|---|
1 | s1
Defines 1 of 12 columns with width as 08.33%. |
|
2 | s2
Defines 2 of 12 columns with width as 16.66%. |
|
3 | s3
Defines 3 of 12 columns with width as 25.00%. |
|
4 | s4
Defines 4 of 12 columns with width as 33.33%. |
|
s5 – s11 | ||
12 | s12
Defines 12 of 12 columns with width as 100%. Default class for small screen phones. |
以下是中型屏幕设备(通常为平板电脑)的列级样式列表。
Sr.No. | Class Name & Description | |
---|---|---|
1 | m1
Defines 1 of 12 columns with width as 08.33% |
|
2 | m2
Defines 2 of 12 columns with width as 16.66%. |
|
3 | m3
Defines 3 of 12 columns with width as 25.00%. |
|
4 | m4
Defines 4 of 12 columns with width as 33.33%. |
|
m5 – m11 | ||
12 | m12
Defines 12 of 12 columns with width as 100%. Default class for medium screen phones. |
以下是大屏幕设备(通常是笔记本电脑)的列级样式列表。
Sr.No. | Class Name & Description | |
---|---|---|
1 | l1
Defines 1 of 12 columns with width as 08.33%. |
|
2 | l2
Defines 2 of 12 columns with width as 16.66%. |
|
3 | l3
Defines 3 of 12 columns with width as 25.00%. |
|
4 | l4
Defines 4 of 12 columns with width as 33.33%. |
|
l5 – l11 | ||
12 | l12
Defines 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.
如果在HTML元素的class属性中未提及子类,则设备上要使用的默认列为12。
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).
验证结果。