Materialise - Configurazione dell'ambiente

In questo capitolo, discuteremo i diversi aspetti della creazione di un ambiente congeniale per Materialise.

Provalo Opzione online

Abbiamo configurato l'ambiente di programmazione Materialise online, in modo che tu possa compilare ed eseguire tutti gli esempi disponibili online. Ti dà fiducia in ciò che stai leggendo e ti consente di verificare i programmi con diverse opzioni. Sentiti libero di modificare qualsiasi esempio ed eseguirlo online.

Prova il seguente esempio utilizzando il nostro compilatore online disponibile su 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>

Per la maggior parte degli esempi forniti in questo tutorial, troverai un'opzione Provalo nelle sezioni del codice del nostro sito Web nell'angolo in alto a destra che ti porterà al compilatore online. Quindi usalo e goditi il ​​tuo apprendimento.

Come usare Materialise?

Esistono due modi per utilizzare Materialise:

Local Installation - Puoi scaricare il file materialize.min.css e materialize.min.js file sul computer locale e includerlo nel codice HTML.

CDN Based Version - Puoi includere il file materialize.min.css e materialize.min.js file nel codice HTML direttamente dalla Content Delivery Network (CDN).

Installazione locale

  • Vai a http://materializecss.com/getting-started.html per scaricare l'ultima versione disponibile.

  • Quindi, metti il ​​file scaricato materialize.min.js file in una directory del tuo sito web, ad esempio / js e materialize.min.css in / css.

Esempio

Includere il file css e js file nel file HTML come segue.

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

Produrrà il seguente risultato.

Versione basata su CDN

Puoi includere il file materialize.min.js e materialize.min.css file nel codice HTML direttamente dalla Content Delivery Network (CDN). cdnjs.cloudflare.com fornisce contenuti per l'ultima versione.

Stiamo utilizzando la versione CDN cdnjs.cloudflare.com della libreria durante questo tutorial.

Esempio

Riscrivi l'esempio sopra usando materialize.min.css e materialize.min.js dalla CDN cdnjs.cloudflare.com.

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

Produrrà il seguente risultato: