Materialise - Configuration de l'environnement

Dans ce chapitre, nous discuterons des différents aspects de la mise en place d'un environnement convivial pour Materialise.

Essayez-le Option en ligne

Nous avons mis en place l'environnement de programmation Materialise en ligne, afin que vous puissiez compiler et exécuter tous les exemples disponibles en ligne. Il vous donne confiance dans ce que vous lisez et vous permet de vérifier les programmes avec différentes options. N'hésitez pas à modifier n'importe quel exemple et à l'exécuter en ligne.

Essayez l'exemple suivant en utilisant notre compilateur en ligne disponible sur CodingGround

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

Pour la plupart des exemples donnés dans ce didacticiel, vous trouverez une option Essayer dans nos sections de code de site Web dans le coin supérieur droit qui vous mènera au compilateur en ligne. Alors profitez-en et profitez de votre apprentissage.

Comment utiliser Materialise?

Il existe deux façons d'utiliser Materialise -

Local Installation - Vous pouvez télécharger le materialize.min.css et materialize.min.js fichiers sur votre ordinateur local et incluez-le dans votre code HTML.

CDN Based Version - Vous pouvez inclure le materialize.min.css et materialize.min.js fichiers dans votre code HTML directement à partir du réseau de diffusion de contenu (CDN).

Installation locale

  • Aller à http://materializecss.com/getting-started.html pour télécharger la dernière version disponible.

  • Ensuite, mettez le fichier téléchargé materialize.min.js fichier dans un répertoire de votre site Web, par exemple / js et materialize.min.css dans / css.

Exemple

Inclure le css et js fichier dans votre fichier HTML comme suit.

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

Cela produira le résultat suivant.

Version basée sur CDN

Vous pouvez inclure le materialize.min.js et materialize.min.css fichiers dans votre code HTML directement à partir du réseau de diffusion de contenu (CDN). cdnjs.cloudflare.com fournit du contenu pour la dernière version.

Nous utilisons la version CDN cdnjs.cloudflare.com de la bibliothèque tout au long de ce didacticiel.

Exemple

Réécrivez l'exemple ci-dessus en utilisant materialize.min.css et materialize.min.js à partir de 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>

Cela produira le résultat suivant -