Materialise - 环境设置

如何使用物化？

有两种使用 Materialise 的方法 -

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

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

本地安装

转至https://materializecss.com/getting-started.html下载可用的最新版本。
然后，将下载的materialize.min.js文件放在您网站的目录中，例如/js和/css中的materialize.min.css 。

例子

将 css 和 js 文件包含在 HTML 文件中，如下所示。

现场演示

<!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.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/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的版本

您可以将materialize.min.js和materialize.min.css文件直接从内容交付网络(CDN) 包含到您的HTML 代码中。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.com/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.jquery.com/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>

它将产生以下结果。