Materialize-环境设置



 

在本章中,我们将讨论为Materialise建立合适的环境的不同方面。

在线试用

我们已经在线设置了Materialise编程环境,因此您可以在线编译和执行所有可用的示例。它使您对正在阅读的内容充满信心,并可以使用不同的选项来验证程序。随意修改任何示例并在线执行。

使用CodingGround上可用的在线编译器尝试以下示例

<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>             
   
   
   
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   

对于本教程中给出的大多数示例,您将在我们的网站代码部分的右上角找到一个Try it选项,它将带您到在线编译器。因此,只需利用它并享受您的学习。

如何使用物化?

有两种方法可以使用Materialize-

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

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

本地安装

如下所示,在HTML文件中包含cssjs文件。

<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/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="/materialize/materialize.min.js"></script>             
   
  
   
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   

它将产生以下结果。

基于CDN的版本

您可以直接从Content Delivery Network(CDN)将materialize.min.jsmaterialize.min.css文件包含到HTML代码中。 cdnjs.cloudflare.com提供最新版本的内容。

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

使用cdnjs.cloudflare.com CDN中的materialize.min.cssmaterialize.min.js重写以上示例。

<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>             
   
   
   
      <div class="card-panel teal lighten-2"><h3>Hello World!</h3></div>
   

它将产生以下结果-

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1