Materialisieren - Umgebung einrichten

In diesem Kapitel werden wir die verschiedenen Aspekte der Einrichtung einer kongenialen Umgebung für Materialise diskutieren.

Probieren Sie es Option Online

Wir haben die Materialise Programming-Umgebung online eingerichtet, damit Sie alle verfügbaren Beispiele online kompilieren und ausführen können. Es gibt Ihnen Vertrauen in das, was Sie lesen, und ermöglicht es Ihnen, die Programme mit verschiedenen Optionen zu überprüfen. Sie können jedes Beispiel ändern und online ausführen.

Probieren Sie das folgende Beispiel mit unserem Online-Compiler aus, der unter CodingGround verfügbar ist
<!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>
Für die meisten Beispiele in diesem Tutorial finden Sie in unseren Website-Code-Abschnitten oben rechts eine Try it-Option, mit der Sie zum Online-Compiler gelangen. Nutzen Sie es einfach und genießen Sie Ihr Lernen.

Wie verwende ich Materialise?

Es gibt zwei Möglichkeiten, Materialise zu verwenden:

Local Installation - Sie können die herunterladen materialize.min.css und materialize.min.js Dateien auf Ihrem lokalen Computer und fügen Sie sie in Ihren HTML-Code ein.

CDN Based Version - Sie können die einschließen materialize.min.css und materialize.min.js Dateien in Ihren HTML-Code direkt aus dem Content Delivery Network (CDN).

Lokale Installation

Gehe zu http://materializecss.com/getting-started.html um die neueste verfügbare Version herunterzuladen.
Dann legen Sie die heruntergeladene materialize.min.js Datei in einem Verzeichnis Ihrer Website, zB / js und materialize.min.css in / css.

Beispiel

Umfassen die css und js Datei in Ihrer HTML-Datei wie folgt.

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

Es wird das folgende Ergebnis erzeugt.

CDN-basierte Version

Sie können die einschließen materialize.min.js und materialize.min.css Dateien in Ihren HTML-Code direkt aus dem Content Delivery Network (CDN). cdnjs.cloudflare.com bietet Inhalte für die neueste Version.

In diesem Tutorial verwenden wir die CDN-Version cdnjs.cloudflare.com der Bibliothek.

Beispiel

Schreiben Sie das obige Beispiel mit neu materialize.min.css und materialize.min.js von cdnjs.cloudflare.com CDN.

<!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>

Es wird das folgende Ergebnis erzeugt -