Materialize - 環境設定

如何使用 Materialize？

有兩種方法可以使用 Materialize -

本地安裝 - 您可以在本地機器上下載 materialize.min.css 和 materialize.min.js 檔案，並將其包含在 HTML 程式碼中。

基於 CDN 的版本 - 您可以在 HTML 程式碼中直接從內容分發網路 (CDN) 包含 materialize.min.css 和 materialize.min.js 檔案。

本地安裝

訪問 https://materializecss.com/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.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 的版本

您可以在 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.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>

它將產生以下結果。

列印頁面