Materialize
官網(wǎng):http://www.materialscss.com/
下載
http://pan.baidu.com/s/1kUUX2Vt
CSS
顏色
背景色
<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
文本顏色
<div class="card-panel">
<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
</div>
調色表 http://www.materialscss.com/color
網(wǎng)格
Container
因為它能讓你的網(wǎng)頁內容居中。 container 的寬度大約是窗口寬度的70%，它能包裹并且居中所包裹的內容。
將網(wǎng)頁內容放在一個包含container class的<div>標簽中，例：
<body>
<div class="container">
<!-- Page Content goes here -->
</div>
</body>
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>
偏移
添加 offset-s2 class就可以達到偏移的目的， s 意味著屏幕尺寸 (s = small, m = medium, l = large)，數(shù)字代表你想應用的偏移量。
<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>
響應式布局
| 表格 | 手機 | 平板 | 電腦 |
|---|---|---|---|
| 前綴 | .s | .m | .l |
| 列數(shù) | 85% | 85% | 70% |
| 寬度 | 12 | 12 | 12 |
<!-- 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>
圖片
響應式圖片
為了響應式地處理圖片大小，添加 responsive-img 到img標簽中就可以。原理是它定義了 max-width: 100% 和 height:auto兩個屬性。
<img class="responsive-img" src="cool_pic.jpg">
圓形圖片
使用 class="circle"
<div class="col s12 m8 offset-m2 l6 offset-l3">
<div class="card-panel grey lighten-5 z-depth-1">
<div class="row valign-wrapper">
<div class="col s2">
<img src="images/yuna.jpg" alt="" class="circle responsive-img"> <!-- notice the "circle" class -->
</div>
<div class="col s10">
<span class="black-text">
This is a square image. Add the "circle" class to it to make it appear circular.
</span>
</div>
</div>
</div>
</div>
視頻
響應式內嵌
<div class="video-container">
<iframe width="853" height="480" src="http://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
響應式視頻
<video class="responsive-video" controls>
<source src="movie.mp4" type="video/mp4">
</video>
排版
引用：<blockquote>這是一個用了blockquote的</blockquote>
彈性文本：<p class="flow-text">I am Flow Text</p>
陰影：.z-depth-2
垂直對齊：.valign-wrapper
左對齊：.left-align
右對齊：.right-align
居中對齊：.center-align
