顏色
用法
這里有一個基于Material Design 基色的調(diào)色板。每一個基色類有可選的變亮或變暗的顏色。
背景顏色
只需將 color name 和 light/darkness 作為 class 就可以應(yīng)用背景顏色。
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
對于更改背景顏色，你可以通過擴展類來應(yīng)用顏色，如下面的示例。
.ilike-blue-container {
@extend .blue, .lighten-4;
}
對于更改文本顏色，您可以通過擴展類來應(yīng)用顏色，如下面的示例。
.ilike-blue-container {
@extend .blue-text, .text-lighten-4;
}
調(diào)色板
Grid
演示
container
<body>
<div class="container">
<!-- Page Content goes here -->
</div>
</body>
簡介
看看這部分，快速了解柵格的工作原理！
12列
我們的標準網(wǎng)格有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>
列位于行內(nèi)
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>
創(chuàng)建布局
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>
創(chuàng)建響應(yīng)式布局
上面我們向你展示了如何使用柵格系統(tǒng)來布局元素。 現(xiàn)在，我們將向你展示如何設(shè)計響應(yīng)式布局，使它們在所有屏幕尺寸上看起來都很棒。
屏幕尺寸
添加響應(yīng)性
"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>
響應(yīng)式側(cè)導(dǎo)航布局
在下面的示例中，我們采用和上面相同的布局，但我們通過定義每個 div 在不同屏幕尺寸上占用多少列來做出響應(yīng)式。 請嘗試調(diào)整瀏覽器大小并觀察下面的布局更改。
<!-- 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>
更多的響應(yīng)式柵格示例
<div class="row">
<div class="col s12"><p>s12</p></div>
<div class="col s12 m4 l2"><p>s12 m4</p></div>
<div class="col s12 m4 l8"><p>s12 m4</p></div>
<div class="col s12 m4 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>
