起步
了解如何在你的网页中轻松地使用Materialize库。
下载
Materialize库有两种形式。你可以根据你的偏好和专业知识选择一个你想要的。开始使用Materialize之前，首先你要做的就是下载下面的一个版本。
Materialize
这是有压缩和非压缩的css和js文件的标准版本。这一项不需要安装，如果你不熟悉sass，可以使用这一项。（原文含下载链接）(下载后将css和js文件放到自己工程目录下,然后引用)
Sass
这个版本包含SCSS的源文件。选择这个版本你可以更多地选择包含哪些组件。如果你选择这个版本，你需要一个sass编译器。（原文含下载链接）
CDN
你可以在cdnjs上找到所有版本的CDN。
eg:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
NPM
你也可以获得最新发布的NPM。这个发布包含和压缩的css和js文件一样的源文件。
Bower
你也可以获得最新发布的bower。这个发布包含和压缩的css和js文件一样的源文件。
安装
工程结构
下载后，把文件添加到你的网址所在的目录。你的目录就会像下面这样。
你会注意到有两种文件。文件名包含“min”的意思是这个文件是压缩了的以减少加载时间。这个压缩的文件通常用在比非压缩文件更适合的开发环境中。
搭建html
接下来你只要确定你把你的文件准确地链接到你的网页中。通常，把js文件放在“body”标签内的结尾最为合适，这样能够减少页面的加载时间。跟随下面的例子，把Materialize库加载到你的网页中。
最后一个要注意的是你必须把jquery文件在materialize.js文件之前导入。
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
模板
我们已经创建了一些开始模板因此你可以轻松地用较少的搭建时间开始设计你的网页。浏览下面我们的收藏，下载一个适合你的模板吧！
第三方选项
这些共同制作的选项可让你轻松地把Materialize库包含在你的工程中。记住：这些还未测试并且随时可能淘汰。
搭建Sass
这部分只和下载了sass版本的Materialize库的用户相关。
编译Sass
和css文件夹不同，你会发现下载内容中包含的是许多scss文件，这些scss文件包含了特有的组件风格。然而，浏览器不能解析Sass，所以你必须先用sass编译器将你的scss/materialize.scss编译成常规的css文件，这样，你才能把这些新产生的文件加入你的html页面。
MyWebsite/
|--css/
| |--materialize.css <-- compiled from scss/materialize.scss
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--scss/
| |--materialize.scss
| |--components/
| |--index.html