有12个标准的列流体响应网格系统, 可帮助你以有序且简便的方式布局页面。它使用行和列样式类分别定义行和列。行数用于指定用于响应列的无填充容器关口用于指定带有子类的列。
有一个容器用于居中页面内容的类。的容器class设置为窗口宽度的~70％。要添加一个容器只需将你的内容放入<div>用一个标签容器类。语法如下：
<body>
<div class="container">
<!-- Page Content goes here -->
</div>
</body>现在, 让我们了解网格系统的工作原理：
标准网格有12列。无论浏览器的大小如何, 这些列中的每一列始终具有相等的宽度。请记住, 在创建布局时, 所有列都必须包含在一行中, 并且必须添加关口对你内部的<div>类进行分类以使其成为列。你可以轻松地更改列的顺序推和拉。只需添加推S2or拉-s2上课的地方s是屏幕类前缀(s =小, m =中, l =大), 其后的数字是你要推送或拉出的列数。
例子：
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet">
<!-- Compiled and minified CSS -->
<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!--Let browser know website is
optimized for mobile-->
<meta name = "viewport" content=
" width = device -width, initial-scale = 1 .0" />
</head>
<body>
<div class = "green center">
<h2>lsbin</h2>
</div>
<div class = "row">
<div class = "col s1 green center">1</div>
<div class = "col s1 green darken-3 center">2</div>
<div class = "col s1 green center">3</div>
<div class = "col s1 green darken-3 center">4</div>
<div class = "col s1 green center">5</div>
<div class = "col s1 green darken-3 center">6</div>
<div class = "col s1 green center">7</div>
<div class = "col s1 green darken-3 center">8</div>
<div class = "col s1 green center">9</div>
<div class = "col s1 green darken-3 center">10</div>
<div class = "col s1 green center">11</div>
<div class = "col s1 green darken-3 center">12</div>
</div>
<div class = "row">
<div class = "col s7 push-s5 green darken-1">
<span class = "flow-text">
This div is 7-columns wide on pushed
to the right by 5-columns.
</span>
</div>
<div class = "col s5 pull-s7 light-green">
<span class = "flow-text">
5-columns wide pulled to the left by
7-columns.
</span>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</script>
</body>
</html>网格类别： 物化网格系统分为四类：
- .s(用于移动设备)
- .m(平板电脑设备)
- .l(台式设备)
- .xl(大型台式设备)
| 移动设备 <= 600像素 |
平板电脑设备 > 600像素 |
桌面设备 > 992px |
大型台式设备 > 1200px |
|
|---|---|---|---|---|
| 类前缀 | .s | .m | .l | .xl |
| 容器宽度 | 90％ | 85％ | 70％ | 70％ |
| 列数 | 12 | 12 | 12 | 12 |
在上一个示例中, 我们仅使用定义小屏幕的尺寸" col s12"。仅仅说s12, 我们实际上是在说" col s12 m12 l12"。但是, 通过明确定义大小, 我们可以使我们的网站更具响应性。
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet">
<!-- Compiled and minified CSS -->
<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!--Let browser know website is
optimized for mobile-->
<meta name = "viewport" content=
" width = device -width, initial-scale = 1 .0" />
</head>
<body>
<div class = "green center">
<h2>lsbin</h2>
</div>
<!--Responsive layout-->
<div class = "row">
<div class="grid-example col
s12 light-green center">
<span class = "flow-text">
Always full-width (col s12)
</span>
</div>
<div class="grid-example col
s8 m6 green center">
<span class = "flow-text">
Full-width on mobile (col s8 m6)
</span>
</div>
</div>
<!-- Compiled and minified JavaScript -->
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</script>
</body>
</html>输出如下：
