https://github.com/Dogfalo/materialize
1，下載
http://materializecss.cn/bin/materialize-v0.97.8.zip
<!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"> <!-- Compiled and minified JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
一般將javascript文件放在頁面body標簽的末端以減少頁面的加載時間。
必須在materialize.js之前引入jQuery
在線演示示例
http://site.elesos.com/demo-web/starter-template/
顏色
每一種顏色的定義有一個基本的顏色類和一個可選的減輕或變暗的類。
背景顏色：
只需要增加顏色的名稱和顏色深淺度到元素的class屬性中。
<div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
顏色值參考Color Palette：
https://materializecss.com/color.html
網格:
用container類來包含我們的body內容,可以使你的頁面內容居中。
s1 表示 small-1，他的意思是 "小屏幕中的一列"。
s = small, m = medium, l = large
布局
如果有三個等寬度的div，我們定義每個div的寬度是4列，4+4+4 = 12，加起來剛好是12。
導航布局
對齊
動態陰影 <div class="card-panel hoverable"> Hoverable Card Panel</div>
更多參加示例頁面：
http://site.elesos.com/demo-web/starter-template/test.html