Materialize - การตั้งค่าสภาพแวดล้อม

ในบทนี้เราจะพูดถึงแง่มุมต่างๆของการสร้างสภาพแวดล้อมที่เหมาะสำหรับ Materialize

ลองใช้ตัวเลือกออนไลน์

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

ลองใช้ตัวอย่างต่อไปนี้โดยใช้คอมไพเลอร์ออนไลน์ของเราที่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>
สำหรับตัวอย่างส่วนใหญ่ที่ให้ไว้ในบทช่วยสอนนี้คุณจะพบตัวเลือกลองใช้ในส่วนโค้ดเว็บไซต์ของเราที่มุมขวาบนซึ่งจะนำคุณไปยังคอมไพเลอร์ออนไลน์ ดังนั้นเพียงแค่ใช้ประโยชน์จากมันและสนุกกับการเรียนรู้ของคุณ

วิธีใช้ Materialize?

มีสองวิธีในการใช้ Materialize -

Local Installation - คุณสามารถดาวน์โหลดไฟล์ materialize.min.css และ materialize.min.js ไฟล์ในเครื่องของคุณและรวมไว้ในโค้ด HTML ของคุณ

CDN Based Version - คุณสามารถรวมไฟล์ materialize.min.css และ materialize.min.js ไฟล์ลงในโค้ด HTML ของคุณโดยตรงจาก Content Delivery Network (CDN)

การติดตั้งภายในเครื่อง

ไปที่ http://materializecss.com/getting-started.html เพื่อดาวน์โหลดเวอร์ชันล่าสุดที่มี
จากนั้นใส่ไฟล์ materialize.min.js ไฟล์ในไดเรกทอรีของเว็บไซต์ของคุณเช่น / js และ materialize.min.css ใน / css.

ตัวอย่าง

รวมไฟล์ css และ js ไฟล์ในไฟล์ HTML ของคุณดังนี้

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

มันจะให้ผลลัพธ์ดังต่อไปนี้

เวอร์ชันที่ใช้ CDN

คุณสามารถรวมไฟล์ materialize.min.js และ materialize.min.css ไฟล์ลงในโค้ด HTML ของคุณโดยตรงจาก Content Delivery Network (CDN) cdnjs.cloudflare.com ให้เนื้อหาสำหรับเวอร์ชันล่าสุด

เรากำลังใช้ไลบรารี cdnjs.cloudflare.com เวอร์ชัน CDN ตลอดบทแนะนำนี้

ตัวอย่าง

เขียนตัวอย่างข้างต้นใหม่โดยใช้ materialize.min.css และ materialize.min.js จาก 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>

มันจะให้ผลลัพธ์ดังต่อไปนี้ -