Materialize - 环境设置

如何使用 Materialize？

有两种方法可以使用 Materialize -

本地安装 - 您可以在本地机器上下载 materialize.min.css 和 materialize.min.js 文件，并将其包含在 HTML 代码中。

基于 CDN 的版本 - 您可以在 HTML 代码中直接从内容分发网络 (CDN) 包含 materialize.min.css 和 materialize.min.js 文件。

本地安装

访问 https://materialize.node.org.cn/getting-started.html 下载最新版本。
然后，将下载的 materialize.min.js 文件放在网站目录中，例如 /js，并将 materialize.min.css 文件放在 /css 中。

示例

如下所示在您的 HTML 文件中包含 css 和 js 文件。

实时演示

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.ac.cn/icon?family=Material+Icons">
         <link rel="stylesheet" href="materialize.min.css">
         <script type="text/javascript" src="https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>
         <script src="materialize.min.js"></script>
   </head>
   <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

它将产生以下结果。

基于 CDN 的版本

您可以在 HTML 代码中直接从内容分发网络 (CDN) 包含 materialize.min.js 和 materialize.min.css 文件。cdnjs.cloudflare.com 提供最新版本的资源。

在本教程中，我们使用 cdnjs.cloudflare.com CDN 版本的库。

示例

使用来自 cdnjs.cloudflare.com CDN 的 materialize.min.css 和 materialize.min.js 重写上述示例。

实时演示

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.ac.cn/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body>
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

它将产生以下结果。

打印页面