引入主 CSS 和 JavaScript

开始

引入主 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文件: Download MDL V1.3.0 在你的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 组件。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部