Material Design Lite 教程
Material Design Lite 教程
Material Design Lite ，MDL是使用CSS，JavaScript和HTML创建了一个UI组件库。 MDL UI组件有助于构建有吸引力的，一致的，功能性的网页，并同时秉承现代网络设计原则像浏览器的便携性，设备独立性，以及优雅降级的Web应用程序。它有助于创造更快，美丽的，反应迅速的网站。它是由谷歌材料设计的启发。
听众
本教程是为想学习Material Design Lite 的基础知识以及如何使用它来创建更快速，美观，网站的响应谁的专业人士。本教程介绍了Material Design Lite 的所有基本概念。
先决条件
与之前继续学习本教程，你应该有HTML，CSS，JavaScript中，文档对象模型（DOM）和任何文本编辑器有基本的了解。此外，它会帮助，如果你知道基于Web的应用程序是如何工作的。
执行Material Design Lite 在线
对于大多数在本教程中所举的例子，你会发现一个尝试，它的选择。使用此选项可当场执行你的Material Design Lite 程序，享受你的学习。
使用可在下面的示例代码框右上角的尝试，它试图选项下面的例子-
<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="/attachements/w3c/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>