開始

引入主 CSS 和 JavaScript

在你項目中的每一個 HTML 文件中引入 Material Design CSS 和 JavaScript 文件。我們推薦你使用我們的 CDN 內(nèi)容分發(fā)系統(tǒng)。你也能夠自定義、下載源文件到你的主機上面，或是使用源代碼編譯、在你的 npm/Bower 項目中安裝它們。

使用CDN內(nèi)容分發(fā)系統(tǒng)

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

<link rel="stylesheet"  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"  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 內(nèi)容分發(fā)系統(tǒng)主要基于常見的 Material Design 顏色的許多顏色組合。要發(fā)現(xiàn)和預覽可用的顏色組合，請使用我們的自定義和預覽工具。

下載

點擊下方的鏈接下載最新的CSS和JavaScript文件： 在你的HTML文件中加入<link>和<script>元素引入，并且需要包含Material 圖標字體，就像下面這樣：

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet"  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 中使用的顏色方案基于您可能想要的個性化主顏色和重點顏色。使用自定義和預覽工具選擇并預覽您的網(wǎng)站的主要和重點顏色組合。然后使下載您定制的 Material Design Lite CSS，只需用自定義的 css 替換 “material.min.css” 即可。

編譯

我們的源代碼托管在 GitHub 上。你可以下載源代碼來進行編譯。 在命令行中運行下面的命令：

## 克隆/復制Material Design Lite源代碼。
git clone https://github.com/google/material-design-lite.git
## 進入新創(chuàng)建的包含源代碼的文件夾。
cd material-design-lite
## 安裝依賴關(guān)系。
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"  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"  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"  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 托管或可下載的庫。在這種情況下，請使用我們的自定義和預覽工具。

這樣，你就在你的網(wǎng)站上添加了 Material Design Lite 組件。