ทำให้เป็นจริงบทช่วยสอน
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>