MD的web框架之一Materialize（使用）

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>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

MD的web框架之一Materialize（使用）