Material Design Lite - Ortam Kurulumu

Materyal Tasarım Lite'ı kullanmanın iki yolu vardır -

Local Installation - Material. {Primary} - {accent} .min.css ve material.min.js dosyalarını yerel makinenize indirebilir ve HTML kodunuza ekleyebilirsiniz.
CDN Based Version - Material. {Primary} - {accent} .min.css ve material.min.js dosyalarını doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza ekleyebilirsiniz.

Yerel Kurulum

MDL'nin kurulumu için şu adımları izleyin -

Git https://www.getmdl.io/started/index.html mevcut en son sürümü indirmek için.
Ardından, indirilen material.min.js web sitenizin bir dizinindeki dosya, örneğin / js ve material.min.css / css içinde.

Misal

Artık css ve js dosyasını HTML dosyanıza aşağıdaki gibi ekleyebilirsiniz -

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

Yukarıdaki program aşağıdaki sonucu üretecektir -

CDN Tabanlı Sürüm

Js ve css dosyalarını HTML kodunuza doğrudan İçerik Dağıtım Ağı'ndan (CDN) dahil edebilirsiniz. storage.googleapis.com en son sürüm için içerik sağlar.

Bu eğiticide kitaplığın storage.googleapis.com CDN sürümünü kullanıyoruz.

Misal

Şimdi, Google CDN'den material.css ve material.js kullanarak yukarıdaki örneği yeniden yazalım.

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

Yukarıdaki program aşağıdaki sonucu üretecektir -