srcmini本文概述
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％。中型屏幕电话的默认类别。 |
大型屏幕设备的列
请参阅大屏幕设备(例如笔记本电脑, 台式机等)的列级样式列表。
| 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 on
a 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>立即测试
输出
评论前必须登录！
注册