論壇 | 最新的Web開發教程
 

Material Design Lite教程


材料設計精簡版,MDL是使用CSS,JavaScript和HTML創建了一個UI組件庫。 MDL UI組件有助於構建有吸引力的,一致的,功能性的網頁,並同時秉承現代網絡設計原則像瀏覽器的便攜性,設備獨立性,以及優雅降級的Web應用程序。 它有助於創造更快,美麗的,反應迅速的網站。 它是由谷歌材料設計的啟發。


聽眾

本教程是為想學習材料設計精簡版的基礎知識以及如何使用它來創建更快速,美觀,網站的響應誰的專業人士。 本教程介紹了材料設計精簡版的所有基本概念。


先決條件

與之前繼續學習本教程,你應該有HTML,CSS,JavaScript中,文檔對象模型(DOM)和任何文本編輯器有基本的了解。 此外,它會幫助,如果你知道基於Web的應用程序是如何工作的。


執行材料設計精簡版在線

對於大多數在本教程中所舉的例子,你會發現一個嘗試,它的選擇。 使用此選項可當場執行你的材料設計精簡版程序,享受你的學習。

使用可在下面的示例代碼框右上角的嘗試,它試圖選項下面的例子-

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