Materialise CSS网格 _MaterializeCSS

本文概述

小屏幕设备的列
中型屏幕设备的列
大型屏幕设备的列
用法

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

Index	Class name	Description
1)	row	它用于指定用于响应列的无填充容器。此类对于响应式类是完全响应式是必需的。
2)	col	它用于指定带有子类的列。

注意：col包含几个用于不同类型屏幕的子类。小屏幕设备的列以下是小屏幕设备(通常是智能手机)的列级样式列表。

Index	班级名称	Description
1)	s1	用于定义12列中的1列, 宽度为08.33％。
2)	s2	用于定义12列中的2列, 宽度为16.66％。
3)	s3	它用于定义12列中的3列, 宽度为25.00％。
4)	s4	用于定义12列中的第4列, 宽度为33.33％。它包含s4, s5, s6, s7, s8, s9, s10, s11
12)	s12	用于定义宽度为100％的12列中的第12列。小萤幕手机的预设类别。

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

Index	班级名称	Description
1)	m1	用于定义12列中的1列, 宽度为08.33％
2)	m2	用于定义12列中的2列, 宽度为16.66％。
3)	m3	它用于定义12列中的3列, 宽度为25.00％。
4)	m4	它用于定义12列中的4列, 宽度为33.33％.m5-m11
12)	m12	用于定义12列中的12列, 宽度为100％。中型屏幕电话的默认类别。

大型屏幕设备的列 【Materialise CSS网格】请参阅大屏幕设备(例如笔记本电脑, 台式机等)的列??级样式列表。

Index	Class name	Description
1)	l1	用于定义12列中的1列, 宽度为08.33％。
2)	l2	用于定义12列中的2列, 宽度为16.66％。
3)	l3	它用于定义12列中的3列, 宽度为25.00％。
4)	l4	它用于定义12列中的4列, 宽度为33.33％。 5至11
12)	l12	用于定义12列中的12列, 宽度为100％。大屏幕设备的默认类。

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

< div class = "row"> < div class = "col s2 m4 l3"> < p> This text will use 2 columns on a small screen, 4 on a medium screen, and 3 ona large screen.< /p> < /div> < /div>

例子

< !DOCTYPE html> < html> < head> < title> The Materialize Grids Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < /head> < body> < div class = "teal"> < h2> Mobile First Design Demo< /h2> < p> Resize the window to see the effect!< /p> < /div> < hr/> < div class = "row"> < div class = "col m1 grey center"> 1< /div> < div class = "col m1 center"> 2< /div> < div class = "col m1 grey center"> 3< /div> < div class = "col m1 center"> 4< /div> < div class = "col m1 grey center"> 5< /div> < div class = "col m1 center"> 6< /div> < div class = "col m1 center grey"> 7< /div> < div class = "col m1 center"> 8< /div> < div class = "col m1 center grey"> 9< /div> < div class = "col m1 center"> 10< /div> < div class = "col m1 center grey"> 11< /div> < div class = "col m1 center"> 12< /div> < /div> < div class = "row"> < div class = "col m4 l3 yellow"> < p> This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).< /p> < /div> < div class = "col s4 m8 l9 grey"> < p> This text will use 4 columns on a small screen (s4), 8 on a medium screen(m8), and 9 on a large screen (l9).< /p> < /div> < /div> < /body> < /html>

立即测试
输出