| Sr.No. | 类名和描述 |
| 1 |
mdl-layout
将容器标识为 MDL 组件。外部容器元素需要。
|
| 2 |
mdl-grid
将容器标识为 MDL 网格组件。 "外部" div 元素需要。
|
| 3 |
mdl-cell
将容器标识为 MDL 单元。在"内部"div 元素上是必需的。
|
| 4 |
mdl-grid--no-spacing
更新网格单元以使其之间没有边距。网格容器可选。
|
| 5 |
mdl-cell--N-col
这有助于将单元格的列大小设置为 N，N 为 1-12，默认为 4 ;可选用于"内部"div 元素。
|
| 6 |
mdl-cell--N-col-desktop
这有助于仅在桌面模式下将单元格的列大小设置为 N，N 为 1-12（含）；可选用于"内部"div 元素。
|
| 7 |
mdl-cell--N-col-tablet
这有助于仅在平板电脑模式下将单元格的列大小设置为 N，N 为 1-8 含；可选用于"内部"div 元素。
|
| 8 |
mdl-cell--N-col-phone
这有助于仅在电话模式下将单元格的列大小设置为 N，N 为 1-4 含；可选用于"内部"div 元素。
|
| 9 |
mdl-cell--hide-desktop
在桌面模式下隐藏单元格。可选的"内部"div 元素。
|
| 10 |
mdl-cell--hide-tablet
在平板电脑模式下隐藏单元格。可选的"内部"div 元素。
|
| 11 |
mdl-cell--hide-phone
在电话模式下隐藏单元格。可选的"内部"div 元素。
|
| 12 |
mdl-cell--stretch
垂直拉伸单元格以填充父级，默认；可选用于"内部"div 元素。
|
| 13 |
mdl-cell--top
将单元格与父单元格的顶部对齐。可选的"内部"div 元素。
|
| 14 |
mdl-cell--middle
将单元格与父单元格的中间对齐。可选的"内部"div 元素。
|
| 15 |
mdl-cell--bottom
将单元格与父单元格的底部对齐。可选的"内部"div 元素。
|
<html>
<head>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.graybox {
background-color:#ddd;
}
</style>
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design Tutorial</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">About</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--1-col graybox">1</div>
<div class = "mdl-cell mdl-cell--1-col graybox">2</div>
<div class = "mdl-cell mdl-cell--1-col graybox">3</div>
<div class = "mdl-cell mdl-cell--1-col graybox">4</div>
<div class = "mdl-cell mdl-cell--1-col graybox">5</div>
<div class = "mdl-cell mdl-cell--1-col graybox">6</div>
<div class = "mdl-cell mdl-cell--1-col graybox">7</div>
<div class = "mdl-cell mdl-cell--1-col graybox">8</div>
<div class = "mdl-cell mdl-cell--1-col graybox">9</div>
<div class = "mdl-cell mdl-cell--1-col graybox">10</div>
<div class = "mdl-cell mdl-cell--1-col graybox">11</div>
<div class = "mdl-cell mdl-cell--1-col graybox">12</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--4-col graybox">1</div>
<div class = "mdl-cell mdl-cell--4-col graybox">2</div>
<div class = "mdl-cell mdl-cell--4-col graybox">3</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col graybox">6</div>
<div class = "mdl-cell mdl-cell--4-col graybox">4</div>
<div class = "mdl-cell mdl-cell--2-col graybox">2</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</div>
<div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</div>
<div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</div>
</div>
</main>
</div>
</body>
</html>
