Tutorial Materialize

Materialize adalah perpustakaan komponen UI yang dibuat dengan CSS, JavaScript, dan HTML. Memodelkan komponen UI membantu dalam membina laman web yang menarik, konsisten, dan berfungsi serta aplikasi web, sambil mematuhi prinsip reka bentuk web moden seperti kebolehgunaan pelayar, kebebasan peranti, dan kemerosotan yang anggun. Ia membantu dalam mewujudkan laman web yang lebih pantas, cantik, dan responsif. Ia diilhamkan dari Reka Bentuk Bahan Google.

Penonton

Tutorial ini dimaksudkan untuk para profesional yang ingin mempelajari asas-asas Bahan dan bagaimana menggunakannya untuk membuat laman web dan aplikasi web yang lebih cepat, cantik dan responsif. Tutorial ini menerangkan semua konsep asas untuk Menempatkan.

Prasyarat

Sebelum meneruskan dengan tutorial ini, anda harus mempunyai pemahaman asas HTML, CSS, JavaScript, Model Objek Dokumen (DOM), dan mana-mana editor teks. Di samping itu, ia akan membantu jika anda tahu bagaimana aplikasi berasaskan web berfungsi.

Melaksanakan Materialize Online

Untuk kebanyakan contoh yang diberikan dalam tutorial ini, anda akan menemui pilihan Cuba . Gunakan pilihan ini untuk melaksanakan program Materialize anda di tempat dan nikmati pembelajaran anda. Cuba contoh berikut menggunakan pilihan Try-it yang terdapat di penjuru kanan sebelah atas kotak kod contoh 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 = "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>