Material Design Lite 安裝環(huán)境

2018-12-19 18:17 更新

如何使用Material Design Lite ?

有使用Material Design Lite 兩種方式:

  • 本地安裝 -您也可以下載材料{}小學(xué)- {}口音和.min.css您material.min.js本地計(jì)算機(jī)上的文件,并將其包含在HTML代碼。

  • 基于CDN版本 -可以包括材料{}小學(xué)- {}口音和.min.css直接從內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)material.min.js文件到您的HTML代碼。

本地安裝

  • 轉(zhuǎn)到http://www.getmdl.io/started/index.html下載可用的最新版本。

  • 然后,把下載的文件material.min.js在您的網(wǎng)站,例如/ JS和material.min.css中/ CSS的目錄。

現(xiàn)在你可以在HTML文件,如下CSSJS文件-

<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"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  </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ǎn)生以下結(jié)果 -

CDN基礎(chǔ)的版本

您可以直接從內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)包括的js和css文件到您的HTML代碼。 storage.googleapis.com提供最新的版本的內(nèi)容。

我們使用本教程的庫(kù)storage.googleapis.com CDN版本。

現(xiàn)在讓我們用material.css和material.js從谷歌CDN把上面的例子。

<html>
   <head>
      <title>The Material Design Lite Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet"  rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
  </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">Hello World!</div>
         </main>
      </div>
   </body>
</html>

這將產(chǎn)生以下結(jié)果 -


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)