Materialize
Materialize 是一个响应式的前端框架，设计样式及组件元素丰富。
Materialize
下面简单介绍一下用法
CDN
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
NPM
npm install materialize-css
Bower
You can also get the latest release using bower. This release contains source files as well as the compiled CSS and JavaScript files.
bower install materialize
设置
项目结构
下载后，将文件解压到你的网站所在的目录。 你的目录应该看起来像这样。
MyWebsite/
|--css/
| |--materialize.css
|
|--fonts/
| |--roboto/
|
|--js/
| |--materialize.js
|
|--index.html
HTML 设置
接下来你只需要确保 Materialize 文件在你的网页链接正确。通常导入 Javascript 文件到 body 末尾以减少页面加载时间。按照下面的例子就知道如何导入 Materialize 到你的网页。
需要注意的最后一件事，你必须在导入materialize.js之前导入的jQuery！
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
网友评论