网格 - Materialize

我们正在使用一种标准的12列的流式响应式网格系统。网格布局可以帮助你设计一个有序的简单时尚的页面。

container类不是网格系统最严格的一部分，但是是内容布局重要的一部分。它可以使你的页面内容居中。 container类的宽度被设置为窗口的70%左右。它使你的页面内容居中并包含在内。我们用container类来包含我们的body内容。

示例

点击下面的按钮，试试没有container类的效果。

关闭Containers

增加container只需将您的内容放在<div>标签里面并带一个container类。这是一个例子教你如何使用container。


    <body>
      <div class="container">
        <!-- 页面内容放在这里 -->
      </div>
    </body>

这一节将告诉你网格是如何工作的。

12 列

标准的网格有12列。和浏览器尺寸无关，每一列都有相同的宽度。

感受一下如何在HTML中使用网格布局，看下面的代码，它的展示的效果就是上面的这个。


    <div class="row">
      <div class="col s1">1</div>
      <div class="col s1">2</div>
      <div class="col s1">3</div>
      <div class="col s1">4</div>
      <div class="col s1">5</div>
      <div class="col s1">6</div>
      <div class="col s1">7</div>
      <div class="col s1">8</div>
      <div class="col s1">9</div>
      <div class="col s1">10</div>
      <div class="col s1">11</div>
      <div class="col s1">12</div>
    </div>

注意: 现在，我们知道 s1表示 small-1，他的意思是 "小屏幕中的一列"。

列包含在行中

创建的所有布局的列必须包含在行里面，并且必须在列的div标签里面添加col类

12列的宽度的div

6列的宽度(一半)


    <div class="row">
      <div class="col s12">12列的宽度的div</div>
      <div class="col s6">6列的宽度(一半)</div>
      <div class="col s6">6列的宽度(一半)</div>
    </div>

对于偏移，简单的增加 offset-s2 到类里，ss表示屏幕大小(s = small, m = medium, l = large)，数字（列数）决定你想偏移的列数。

12列全屏大小

6列 (偏移6列)


    <div class="row">
      <div class="col s12"><span class="flow-text">12列全屏大小</span></div>
      <div class="col s6 offset-s6"><span class="flow-text">6列 (偏移6列)</span></div>
    </div>

您可以轻松地更改列的顺序伴随推和拉。增加push-s2 或 pull-s2到类里面。s 表示屏幕大小(s = small, m = medium, l = large)，数字（列数）决定你想推或拉的列数。

7列的宽度推到5列的右边。

5列的宽度拉到7列的左边。


    <div class="row">
      <div class="col s7 push-s5"><span class="flow-text">7列的宽度推到5列的右边。</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">5列的宽度拉到7列的左边。</span></div>
    </div>

在这里，我们将向您展示如何使用我们的网格系统创建一些常用的布局。希望这些可以使你更轻松的布局。看一下这些简单的示例，这些将不支持响应式。

Section

section类常用于简单的顶部和底部填充。只要增加section类到包含内容块的div中。

Divider

Divider是一个一像素的分隔线。只需在内容之间增加带divider类的div。

例子：Sections和Dividers

第一部分

内容

第二部分

内容

第三部分

内容


  <div class="divider"></div>
  <div class="section">
    <h5>第一部分</h5>
    <p>内容</p>
  </div>
  <div class="divider"></div>
  <div class="section">
    <h5>第二部分</h5>
    <p>内容</p>
  </div>
  <div class="divider"></div>
  <div class="section">
    <h5>第三部分</h5>
    <p>内容</p>
  </div>

示例：表格进阶

如果有三个等宽度的div，我们定义每个div的宽度是4列，4+4+4 = 12，加起来刚好是12。在这些div里面，我们可以放入内容。这的例子是我们前端页面的内容。修改后作为例子。


    <div class="row">

      <div class="col s4">
        <!-- 第一处内容 -->
      </div>
      <div class="col s4">
        <!-- 第二处内容 -->
      </div>
      <div class="col s4">
        <!-- 第三处内容 -->
      </div>

    </div>

例子：侧边导航布局

你可以看到如何使用网格系统快速创建布局。只要记住确保每个布局增加到12列。


    <!-- 导航条位置 -->

    <!-- 页面布局位置 -->
    <div class="row">

      <div class="col s3">
        <!-- 灰色导航面板 -->
      </div>

      <div class="col s9">
        <!-- 页面内容  -->
      </div>

    </div>

上面展示的事如何使用网格系统布局。现在，我们将向您展示如何设计你的布局使它适应所有的屏幕尺寸。

屏幕尺寸

	手机设备 <= 600px	平板设备 > 600px	桌面设备 > 992px	大型桌面设备 > 1200px
类前缀	`.s`	`.m`	`.l`	`.xl`
Container的宽度	90%	85%	70%	70%
列数	12	12	12	12

附加响应式

在之前的例子中，我们只定义了小屏幕大小的类，通过使用"col s12"。如果我们只是要一个固定的布局这是可以的，因为这个规则是向上兼容的。这仅仅是s12，现在是"col s12 m12 l12"综合应用。但通过明确定义的大小，我们可以使我们的网站动态适应各个设备。

我总是占据所有的宽度 (col s12)

我占据所有的宽度在手机上 (col s12 m6)


    <div class="row">
      <div class="grid-example col s12"><span class="flow-text">我总是占据所有的宽度 (col s12)</span></div>
      <div class="grid-example col s12 m6"><span class="flow-text">我占据所有的宽度在手机上 (col s12 m6)</span></div>
    </div>

响应式侧边导航布局

在下面的这个例子中，我们使用和上面相同的布局，但是我们使它支持响应式，让它适应所有屏幕尺寸。尝试改变浏览器宽度大小，看看下面这个布局的变化。


    <!-- 导航条位置 -->

    <!-- 页面布局位置 -->
    <div class="row">

      <div class="col s12 m4 l3"> <!-- 添加"m4 l3" -->
        <!-- 灰色导航面板

              内容将是:
          大屏幕占三列宽度,
          中等屏幕占四列宽度,
          小屏幕占十二列宽度  -->

      </div>

      <div class="col s12 m8 l9"> <!-- 添加"m8 l9" -->
        <!-- 青色页面内容

              内容将是:
          大屏幕占九列宽度,
          中等屏幕占八列宽度,
          小屏幕占十二列宽度  -->

      </div>

    </div>

Container

示例

介绍