上一篇博客介绍了如何创建MDL web页面。本篇博客将介绍MDL页面的布局。
通常一个标准的MDL页面定义如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<title>MDL 示例</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="static/css/material.min.css">
<script src="static/js/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout">
</div>
</body>
</html>
当然,上面的代码会定义一个空的HTML页面。为了在页面中显示相关的内容。需要在上面代码的div标签下,添加相应的元素。本博客介绍的,主要介绍那些设置页面