Terwujud - Pengaturan Lingkungan

Dalam bab ini, kita akan membahas berbagai aspek pengaturan lingkungan yang cocok untuk Materialize.

Cobalah Opsi Online

Kami telah menyiapkan lingkungan Materialize Programming secara online, sehingga Anda dapat mengkompilasi dan menjalankan semua contoh yang tersedia secara online. Ini memberi Anda kepercayaan pada apa yang Anda baca dan memungkinkan Anda untuk memverifikasi program dengan opsi yang berbeda. Jangan ragu untuk memodifikasi contoh apa pun dan menjalankannya secara online.

Coba contoh berikut menggunakan kompiler online kami yang tersedia di 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>
Untuk sebagian besar contoh yang diberikan dalam tutorial ini, Anda akan menemukan opsi Coba di bagian kode situs web kami di sudut kanan atas yang akan membawa Anda ke kompiler online. Jadi manfaatkan saja dan nikmati pembelajaran Anda.

Bagaimana Cara Menggunakan Materialize?

Ada dua cara untuk menggunakan Materialize -

Local Installation - Anda dapat mengunduh file materialize.min.css dan materialize.min.js file di komputer lokal Anda dan memasukkannya ke dalam kode HTML Anda.

CDN Based Version - Anda bisa memasukkan materialize.min.css dan materialize.min.js file ke kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN).

Instalasi Lokal

Pergi ke http://materializecss.com/getting-started.html untuk mengunduh versi terbaru yang tersedia.
Kemudian, letakkan file materialize.min.js file dalam direktori situs web Anda, misalnya / js dan materialize.min.css di / css.

Contoh

Sertakan css dan js file dalam file HTML Anda sebagai berikut.

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

Ini akan menghasilkan hasil sebagai berikut.

Versi Berbasis CDN

Anda bisa memasukkan materialize.min.js dan materialize.min.css file ke kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN). cdnjs.cloudflare.com menyediakan konten untuk versi terbaru.

Kami menggunakan perpustakaan versi cdnjs.cloudflare.com di sepanjang tutorial ini.

Contoh

Tulis ulang contoh di atas menggunakan materialize.min.css dan materialize.min.js dari 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>

Ini akan menghasilkan hasil sebagai berikut -