布局

我们正在使用标准的12列流动响应布局系统。这个布局帮助你把你的网页按照有序、轻松的风格布局。

Container

container类不是严格的栅格布局的一部分但是对内容的布局很重要。它使得你的页面内容居中。这个container类设置为窗口宽度的70%.它使你页面的内容得以包裹和居中。我们使用container这个类来包裹我们的主体内容。

模板

试按下面的按钮预览页面没有container类的样子。

这是使用了container类的样子：

这是没有使用container类的样子：

要增加container样式你只要把你的内容放在一个带有container类的div标签中。这是一个关于你的页面可能如何搭建的例子。

<body>
 <div class="container">
 <!-- Page Content goes here -->
 </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”代表着“小-1”，意思就是“小屏幕中的一列”。

列在行中

记住，当你在你的布局中创建栅格列的时候一定要把它包括在一个行中，并且你必须加“col”这个类在你的内部div中来使它们成为栅格列。

<div class="row">
 <div class="col s12">This div is 12-columns wide</div>
 <div class="col s6">This div is 6-columns wide</div>
 <div class="col s6">This div is 6-columns wide</div> 
</div>

偏移

对于偏移量，仅需添加“offset-s2”这个类，“s”代表屏幕的尺寸（s=小，m=中，l=大）后面的数字是你想要偏移的列数。


<div class="row">
 <div class="col s12"><span class="flow-text">This div is 12-columns wide on all screen sizes</span></div>
 <div class="col s6 offset-s6"><span class="flow-text">6-columns (offset-by-6)</span></div> 
</div>

压和拉

你可以轻松地用压和拉来改变你的栅格列的顺序。只要加上类“push-s2”或者“pull-s2”，“s”代表屏幕的尺寸（s=小，m=中，l=大）后面的数字是你想要推拉的列数。

<div class="row">
 <div class="col s7 push-s5"><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"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div> 
</div>

创建布局

这里我们将向您展示如何用我们的栅格系统创建一些普适的布局。非常有希望的是这些布局元素将给你带来更多的满意度。为了使这些例子简化，这里的每一个例子都不是响应式的。

Section

“section”类用于简单的顶部和底部内边距。只要给你的包含了大块内容的div增加“section”类。

Divider

Dividers是一像素列用来帮助你分离你的内容的。只要加上在你的内容中间给一个div加上“divider”类。

Sections和Dividers举例

<div class="divider"></div>
 <div class="section">
 <h5>Section 1</h5>
 <p>Stuff</p> 
</div> 
<div class="divider"></div>
 <div class="section">
 <h5>Section 2</h5>
 <p>Stuff</p> 
</div> 
<div class="divider"></div>
 <div class="section">
 <h5>Section 3</h5>
 <p>Stuff</p> 
</div>

推销表例子

如果我们想要三个div是等宽的，我们用有四列的宽度定义div，4+4+4=12，完美地加起来等于12.在这些div的每部，我们放置我们的内容拿我们前面页面的内容为例。为了展现这个例子我们已经稍微修改了它。

<div class="row">
 <div class="col s4">
 <!-- Promo Content 1 goes here --> 
 </div>
 <div class="col s4">
 <!-- Promo Content 2 goes here --> 
 </div>
 <div class="col s4">
 <!-- Promo Content 3 goes here --> 
 </div> 
</div>

滑动导航布局示例

你可以看到如何轻松的用栅格布局创建这种布局。只要记住确保每一个布局你的列数加起来等于12.

<!-- Navbar goes here -->
<!-- Page Layout here -->
<div class="row">
 <div class="col s3">
 <!-- Grey navigation panel -->
 </div>
 <div class="col s9">
 <!-- Teal page content -->
 </div>
 </div>

创建响应式布局

上面我们向你展示了如何使用我们的布局系统的布局元素。现在，我们将向你展示如何设计你的使它们在所有尺寸的屏幕上看起来都合适。

增加响应式

在之前的例子，我们只用“col s12”定义了适合小屏幕的尺寸。仅通过声明s12,我们基本就是声明了“col s12 m12 l12”。但是通过精确地定义尺寸我们可以让我们的网页更加响应式。

<div class="row">
 <div class="grid-example col s12"><span class="flow-text">I am always full-width (col s12)</span></div>
 <div class="grid-example col s12 m6"><span class="flow-text">I am full-width on mobile (col s12 m6)</span></div>
</div>

中屏幕尺寸时：

小屏幕尺寸时：

响应式滑动导航栏布局

在下面的例子中，我们从上面选取相同的布局，但是我们通过定义每一个屏幕尺寸的div应该有多少列使它成为响应式的布局。试着调整你的浏览器的大小，观察下面布局的变化。

<!-- Navbar goes here -->
 <!-- Page Layout here -->
 <div class="row">
 <div class="col s12 m4 l3">
 <!-- Note that "m4 l3" was added -->
 <!-- Grey navigation panel This content will be: 3-columns-wide on large screens, 4-columns-wide on medium screens, 12-columns-wide on small screens -->
 </div>
 <div class="col s12 m8 l9">
 <!-- Note that "m8 l9" was added -->
 <!-- Teal page content This content will be: 9-columns-wide on large screens, 8-columns-wide on medium screens, 12-columns-wide on small screens -->
 </div>
 </div>

大屏幕时：（左右3:9）

中屏幕：（左右4:8）

小屏幕时：（分别占满屏幕，上下）

布局

布局