開始

引入主 CSS 和 JavaScript

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

使用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 中使用的顏色方案基于您可能想要的個(gè)性化主顏色和重點(diǎn)顏色。這些顏色通過以下模式在CSS文件名中指定： material.{primary}-{accent}.min.css 例如 material.indigo-pink.min.css 我們的 CDN 內(nèi)容分發(fā)系統(tǒng)主要基于常見的 Material Design 顏色的許多顏色組合。要發(fā)現(xiàn)和預(yù)覽可用的顏色組合，請(qǐng)使用我們的自定義和預(yù)覽工具。

下載

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

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

編譯

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

## 克隆/復(fù)制Material Design Lite源代碼。
git clone https://github.com/google/material-design-lite.git
## 進(jìn)入新創(chuàng)建的包含源代碼的文件夾。
cd material-design-lite
## 安裝依賴關(guān)系。
npm install && npm install -g gulp
## 編譯
gulp

您將在 dist 文件夾中找到 Material Design Lite 庫的文件。把它們復(fù)制到你的項(xiàng)目中。 在你的 HTML 文件中加入<link>、<script>元素引入，并且需要包含 Material 圖標(biāo)字體，就像下面這樣：

<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 元素的配色方案。如果您想自定義配色方案，則應(yīng)該使用 CDN 托管或可下載的庫。在這種情況下，請(qǐng)使用我們的自定義和預(yù)覽工具。

Bower

你可以在你的 Bower 項(xiàng)目通過下面的方式輕松的安裝 Material Design Lite 文件： 在命令行中運(yùn)行下面的命令：

bower install material-design-lite --save

這樣你就在你項(xiàng)目的bower_components目錄中安裝了 Material Design Lite 庫文件。 在你的 HTML 文件中加入<link>、<script>元素引入，并且需要包含 Material 圖標(biāo)字體，就像下面這樣：

<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 元素的配色方案。如果您想自定義配色方案，則應(yīng)該使用 CDN 托管或可下載的庫。在這種情況下，請(qǐng)使用我們的自定義和預(yù)覽工具。

NPM

你可以在你的 npm 項(xiàng)目通過下面的方式輕松的安裝 Material Design Lite 文件： 在命令行中運(yùn)行下面的命令：

npm install material-design-lite --save

這樣你就在你項(xiàng)目的node_modules目錄中安裝了 Material Design Lite 庫文件。 在你的HTML文件中加入<link>、<script>元素引入，并且需要包含Material 圖標(biāo)字體，就像下面這樣：

<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 元素的配色方案。如果您想自定義配色方案，則應(yīng)該使用 CDN 托管或可下載的庫。在這種情況下，請(qǐng)使用我們的自定義和預(yù)覽工具。

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