ทำให้เป็นจริงบทช่วยสอน

Materialize คือไลบรารีคอมโพเนนต์ UI ที่สร้างด้วย CSS, JavaScript และ HTML ส่วนประกอบ UI ที่เป็นวัสดุช่วยในการสร้างหน้าเว็บและเว็บแอปที่น่าดึงดูดสอดคล้องและใช้งานได้ในขณะที่ยึดหลักการออกแบบเว็บสมัยใหม่เช่นความสามารถในการพกพาของเบราว์เซอร์ความเป็นอิสระของอุปกรณ์ ช่วยในการสร้างเว็บไซต์ที่รวดเร็วสวยงามและตอบสนอง ได้รับแรงบันดาลใจจาก Google Material Design

บทช่วยสอนนี้มีไว้สำหรับมืออาชีพที่ต้องการเรียนรู้พื้นฐานของ Materialize และวิธีการใช้งานเพื่อสร้างหน้าเว็บและแอปที่รวดเร็วสวยงามและตอบสนอง บทช่วยสอนนี้จะอธิบายถึงแนวคิดพื้นฐานทั้งหมดของ Materialize

ก่อนดำเนินการตามบทช่วยสอนนี้คุณควรมีความเข้าใจพื้นฐานเกี่ยวกับ HTML, CSS, JavaScript, Document Object Model (DOM) และโปรแกรมแก้ไขข้อความใด ๆ นอกจากนี้ยังจะช่วยหากคุณรู้ว่าแอปพลิเคชันบนเว็บทำงานอย่างไร

สำหรับตัวอย่างส่วนใหญ่ที่ให้ไว้ในบทช่วยสอนนี้คุณจะพบไฟล์ Try-itตัวเลือก ใช้ตัวเลือกนี้เพื่อดำเนินการโปรแกรม Materialize ของคุณทันทีและสนุกกับการเรียนรู้ของคุณ ลองใช้ตัวอย่างต่อไปนี้โดยใช้ไฟล์Try-it ตัวเลือกที่มุมขวาบนของกล่องโค้ดตัวอย่างต่อไปนี้

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