Materialize
官网: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>
标签中，例：
<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)，数字代表你想应用的偏移量。
<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 |
| 列数 |
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- 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>