开始

引入主 CSS 和 JavaScript

在你项目中的每一个 HTML 文件中引入 Material Design CSS 和 JavaScript 文件。我们推荐你使用我们的 CDN 内容分发系统。你也能够自定义、下载源文件到你的主机上面，或是使用源代码编译、在你的 npm/Bower 项目中安装它们。

使用CDN内容分发系统

只需要在你的HTML文件中向下面那样添加<link>和<script>元素。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="external nofollow" target="_blank" >
<script defer src="https://code.getmdl.io/1.3.0/material.min.js" rel="external nofollow" ></script>

选择颜色方案 Material Design 中使用的颜色方案基于您可能想要的个性化主颜色和重点颜色。这些颜色通过以下模式在CSS文件名中指定： material.{primary}-{accent}.min.css 例如 material.indigo-pink.min.css 我们的 CDN 内容分发系统主要基于常见的 Material Design 颜色的许多颜色组合。要发现和预览可用的颜色组合，请使用我们的自定义和预览工具。

下载

点击下方的链接下载最新的CSS和JavaScript文件： 在你的HTML文件中加入<link>和<script>元素引入，并且需要包含Material 图标字体，就像下面这样：

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >

选择颜色方案 Material Design 中使用的颜色方案基于您可能想要的个性化主颜色和重点颜色。使用自定义和预览工具选择并预览您的网站的主要和重点颜色组合。然后使下载您定制的 Material Design Lite CSS，只需用自定义的 css 替换 “material.min.css” 即可。

编译

我们的源代码托管在 GitHub 上。你可以下载源代码来进行编译。 在命令行中运行下面的命令：

## 克隆/复制Material Design Lite源代码。
git clone https://github.com/google/material-design-lite.git
## 进入新创建的包含源代码的文件夹。
cd material-design-lite
## 安装依赖关系。
npm install && npm install -g gulp
## 编译
gulp

您将在 dist 文件夹中找到 Material Design Lite 库的文件。把它们复制到你的项目中。 在你的 HTML 文件中加入<link>、<script>元素引入，并且需要包含 Material 图标字体，就像下面这样：

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >

注意: 使用此方法，您将无法自定义 MDL 元素的配色方案。如果您想自定义配色方案，则应该使用 CDN 托管或可下载的库。在这种情况下，请使用我们的自定义和预览工具。

Bower

你可以在你的 Bower 项目通过下面的方式轻松的安装 Material Design Lite 文件： 在命令行中运行下面的命令：

bower install material-design-lite --save

这样你就在你项目的bower_components目录中安装了 Material Design Lite 库文件。 在你的 HTML 文件中加入<link>、<script>元素引入，并且需要包含 Material 图标字体，就像下面这样：

<link rel="stylesheet" href="/bower_components/material-design-lite/material.min.css">
<script src="/bower_components/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >

注意: 使用此方法，您将无法自定义 MDL 元素的配色方案。如果您想自定义配色方案，则应该使用 CDN 托管或可下载的库。在这种情况下，请使用我们的自定义和预览工具。

NPM

你可以在你的 npm 项目通过下面的方式轻松的安装 Material Design Lite 文件： 在命令行中运行下面的命令：

npm install material-design-lite --save

这样你就在你项目的node_modules目录中安装了 Material Design Lite 库文件。 在你的HTML文件中加入<link>、<script>元素引入，并且需要包含Material 图标字体，就像下面这样：

<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >

注意: 使用此方法，您将无法自定义 MDL 元素的配色方案。如果您想自定义配色方案，则应该使用 CDN 托管或可下载的库。在这种情况下，请使用我们的自定义和预览工具。

这样，你就在你的网站上添加了 Material Design Lite 组件。