快速上手

学习如何简单快速地使用Materialize



下载

Materialize使用了两种方式来构建。选择任何一种你比较喜欢的方式引入到项目中。

Materialize

此版本(标准版)包含压缩后和未压缩两种.是用这个版本你不用安装任何额外的东西,只需要引入静态文件就行,如果你不了解Sass的话就用这种。

Materialize

Sass

这个版本包含了SCSS源文件,此版本中你可以自由选择要使用哪些组件。显然,如果选择这个版本你首先需要安装Sass预编译器。

Source

NPM

通过NPM下载最新的标准版。包含了未压缩和压缩后的两种.


    npm install materialize-css
          

Bower

通过Bower下载最新的标准版。包含了未压缩和压缩后的两种.


    bower install materialize
          

安装

项目结构

下载完成后,解压到你的项目中。目录大概是这样。

标准版包含压缩和未压缩两种不同的版本, min版本意味着这是压缩后的,使用这个能显著减少加载时间。 通常压缩版用在生产环境中,未压缩版用在开发环境中。


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

HTML

下一步,你要确保静态文件在适当的位置被引用。通常css文件在页面的head标签中引用,javascript文件在页面的底部引用。通过下面这个例子我想你懂得。

需要注意的是你必须在引用javascript前引用Jquery文件!


  <!DOCTYPE html>
  <html>
  <head>
  <!--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, maximum-scale=1.0, user-scalable=no"/>
  </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>

第三方选项

部分社区也提供了些额外的方法在项目中引入Materialize。不过这些可能没有经过测试,从而不能保证一直都是最新版本。

Ruby Gem

文档 在此。


  gem 'materialize-sass'
          

Meteor Package


  meteor add materialize:materialize
          

Ember Package


  # install via npm
  $ npm install ember-cli-materialize --save-dev
  # make ember-cli fetch internal dependencies
  $ ember g ember-cli-materialize
          

Sass

如果你下载了Sass版本,请仔细阅读以下内容,否则请忽略。

编译

好吧,你会发现下载文件中全是.scss文件,而不是常规的.css文件,并且还包含了大量的独立组件。不幸的是,浏览器并不能解析Sass,所以你必须先把这些文件编译为常规的.css文件。之后你便可以把这些引入到你的项目了。


    MyWebsite/
    |--css/
    |  |--materialize.css <-- compiled from scss/materialize.scss
    |
    |--font/
    |  |--material-design-icons/
    |  |--roboto/
    |
    |--js/
    |  |--materialize.js
    |
    |--scss/
    |  |--materialize.scss
    |  |--components/
    |
    |--index.html