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

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

Local Installation - คุณสามารถดาวน์โหลดไฟล์. {primary} - {accent} .min.css และไฟล์ material.min.js ในเครื่องของคุณและรวมไว้ในโค้ด HTML ของคุณ
CDN Based Version - คุณสามารถรวมเนื้อหา. {primary} - {accent} .min.css และไฟล์ material.min.js ลงในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN)

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

ทำตามขั้นตอนเหล่านี้สำหรับการติดตั้ง MDL -

ไปที่ https://www.getmdl.io/started/index.html เพื่อดาวน์โหลดเวอร์ชันล่าสุดที่มี
จากนั้นใส่ไฟล์ material.min.js ไฟล์ในไดเรกทอรีของเว็บไซต์ของคุณเช่น / js และ material.min.css ใน / css.

ตัวอย่าง

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

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "material.min.css">
      <script src = "material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

โปรแกรมข้างต้นจะสร้างผลลัพธ์ดังต่อไปนี้ -

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

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

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

ตัวอย่าง

ตอนนี้ให้เราเขียนตัวอย่างข้างต้นใหม่โดยใช้ material.css และ material.js จาก Google CDN

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

โปรแกรมข้างต้นจะสร้างผลลัพธ์ดังต่อไปนี้ -