网格系统



用标准的12列网格构建响应式布局系统,随心所欲你的网页布局。

Container

严格意义上container class并不是网格系统的组成部分,但是在内容布局上却显得尤为重要,因为它能让你的网页内容居中。 container 的宽度大约是窗口宽度的70%,它能包裹并且居中所包裹的内容。当然,我们已经在这个项目中用到了这个类。

演示

点击下面的按钮你将能看到用container和不用container的区别

不用Container

将网页内容放在一个包含container class的<div>标签中,例:


  <body>
    <div class="container">
      <!-- Page Content goes here -->
    </div>
  </body>
          

介绍

来快速的了解一下网格系统使如何工作的!

12 列

标准的网格系统包含12列,且每一列的宽度都是相同的。

1
2
3
4
5
6
7
8
9
10
11
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,就是说在小屏幕中占一列的宽度。


必不可少的row

列的应用必须包含在有row class的标签中,并且也要用 col class

在所有浏览器中,这个div都是12列的宽度。
6列 (一半)
6列 (一半)

    <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 class就可以达到偏移的目的, s 意味着屏幕尺寸 (s = small, m = medium, l = large),数字代表你想应用的偏移量。

在所有浏览器中,这个div都是12列的宽度。
6列 (6列偏移)

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

布局

下面这个例子告诉你如何用网格系统构建一个网页布局,希望你能爱上这种方式:)。为了方便易懂,这个例子并不是响应式的,之后会有响应式的例子。

Section

section class 提供了简单的上下边的内边距,在div中用 section class来包裹大块的内容。

Divider

Dividers是一条1px高的细线,来分割你的网页内容,通常叫做分割线。只需在你的网页内容中添加一个包含 divider 的div。

示例

Section 1

Stuff

Section 2

Stuff

Section 3

Stuff


    <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+4=12,完美满足12列。在这些div中继续填充你想要的内容,例:

急速开发

我们在组件中定义了大量的规则来为你提供默认的样式。另外,我们重构了动画和变形以提供更加平滑的用户体验。

用户体验

基于Material Design的设计原则,我们创建了一套能给用户更多动效反馈的框架。同时,也内嵌了一套完备的响应式系统来保证在各个平台上都能有一致的表现。

易用原则

我们提供了一套详尽的说明文档和不同模块对应的示例,来帮助开发者更好的上手。并且开发者也可以随时提出任何关于Materialize的问题,我们都将尽力回答。


  <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>
    

响应式布局

前面我们展示了如何用网格系统创建布局,现在我们将创建一个在所有屏幕尺寸上都看起来都非常棒的布局。

屏幕尺寸

手机
<= 600px
平板
<= 992px
桌面计算机
>= 992px
前缀 .s .m .l
宽度 85% 85% 70%
列数 12 12 12

响应式

在前面的例子中,我们只定义了用"col s12"处理小尺寸屏幕。使用s12,和使用"col s12 m12 l12"是一个效果。但是我们可以更确切地适配,来让我们的网站更具有响应性。

任何屏幕尺寸下都是全屏
只在手机上全屏 (col s12 m6)

    <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>
          

响应式两列布局

我们将会用一个跟上面一样的例子,但这个是响应式的,会在不同的屏幕宽度上呈现不同的效果。试着改变屏幕大小看看吧。


    <!-- 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>
          

更多

s12
s12 m4 l2
s12 m4 l8
s12 m4 l2
s12 m6 l3
s12 m6 l3
s12 m6 l3
s12 m6 l3

  <div class="row">
    <div class="col s12"><p>s12</p></div>
    <div class="col s12 m3 l2"><p>s12 m4</p></div>
    <div class="col s12 m6 l8"><p>s12 m4</p></div>
    <div class="col s12 m3 l2"><p>s12 m4</p></div>
  </div>
  <div class="row">
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
    <div class="col s12 m6 l3"><p>s12 m6 l3</p></div>
  </div>