MD的web框架之一Materialize_CSS1

2018-01-31 本文已影响0人 KongBF

颜色

用法
这里有一个基于Material Design 基色的调色板。每一个基色类有可选的变亮或变暗的颜色。

背景颜色
只需将 color name 和 light/darkness 作为 class 就可以应用背景颜色。

This is a card panel with a teal lighten-2 class

<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>

文本颜色
To apply a text color, just append -text to the color class like this:

This is a card panel with dark blue text

<div class="card-panel">
  <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>

Sass
对于更改背景颜色，你可以通过扩展类来应用颜色，如下面的示例。

.ilike-blue-container {
@extend .blue, .lighten-4;
}

对于更改文本颜色，您可以通过扩展类来应用颜色，如下面的示例。

.ilike-blue-container {
@extend .blue-text, .text-lighten-4;
}

调色板

Grid

演示

container


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

简介

看看这部分，快速了解栅格的工作原理！

12列

我们的标准网格有12列。无论浏览器的大小，每一列的宽度总是相等的。


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

列位于行内

col


    <div class="row">
      <div class="col s12">This div is 12-columns wide on all screen sizes</div>
      <div class="col s6">6-columns (one-half)</div>
      <div class="col s6">6-columns (one-half)</div>
    </div>

偏移

offset-s2


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

push-s2

pull-s2

s


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

创建布局

Here we will show you how to create some commonly used layouts with our grid system. Hopefully these will get you more comfortable with laying out elements. To keep these demos simple, the ones here will not be responsive.

Section

section

Divider

divider

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

Promotion Table 示例


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

Side Navigation Layout 示例


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

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