materialize基于Material Design的现代响应式前端框架

来源:互联网 发布:天池大数据竞赛 个人 编辑:程序博客网 时间:2024/05/16 15:38

官网 http://materializecss.com
功能上与bootstrap类似。

结构简洁明了

MyWebsite/  |--css/  |  |--materialize.css  |  |--font/  |  |--material-design-icons/  |  |--roboto/  |  |--js/  |  |--materialize.js  |  |--index.html

需要注意的:
1、通常导入 Javascript 文件到 body 末尾以减少页面加载时间。
2、必须在导入materialize.js之前导入的jQuery。

基本结构示例

 <!DOCTYPE html>  <html>    <head>      <!--Import Google Icon Font-->      <link   href="http://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-2.1.1.min.js"></script>      <script type="text/javascript" src="js/materialize.min.js"></script>    </body>  </html>

这里写图片描述

原创粉丝点击