Material Design Lite - Thiết lập môi trường

Có hai cách để sử dụng Material Design Lite -

Local Installation - Bạn có thể tải tài liệu xuống các tệp. {Primary} - {voice} .min.css và material.min.js trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.
CDN Based Version - Bạn có thể bao gồm các tệp material. {Primary} - {voice} .min.css và material.min.js vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN).

Cài đặt cục bộ

Làm theo các bước sau để cài đặt MDL -

Đi đến https://www.getmdl.io/started/index.html để tải xuống phiên bản mới nhất có sẵn.
Sau đó, đặt tải xuống material.min.js tệp trong thư mục của trang web của bạn, ví dụ: / js và material.min.css trong / css.

Thí dụ

Bây giờ bạn có thể đưa tệp css và js vào tệp HTML của mình như sau:

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

Chương trình trên sẽ tạo ra kết quả sau:

Phiên bản dựa trên CDN

Bạn có thể đưa các tệp js và css vào mã HTML của mình trực tiếp từ Mạng phân phối nội dung (CDN). storage.googleapis.com cung cấp nội dung cho phiên bản mới nhất.

Chúng tôi đang sử dụng phiên bản CDN của thư viện storage.googleapis.com trong suốt hướng dẫn này.

Thí dụ

Bây giờ, chúng ta hãy viết lại ví dụ trên bằng material.css và material.js từ 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>

Chương trình trên sẽ tạo ra kết quả sau: