入门 - Materialize 中文

Materialize 有两种不同的形式。您可以根据自己的喜好和专业知识选择所需的版本。要开始使用 Materialize，您只需下载以下选项之一即可。

Materialize

这是标准版本，同时包含经过压缩和未经过压缩的 CSS 和 JavaScript 文件。此选项几乎不需要设置。如果您不熟悉 Sass，请使用此选项。

Materialize

Sass

此版本包含源 SCSS 文件。通过选择此版本，您可以更好地控制要包含哪些组件。如果您选择此选项，您将需要一个 Sass 编译器。

源

CDN

您可以在 cdnjs 上找到所有版本的 CDN。


    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

NPM

您还可以使用 NPM 获取最新版本。此版本包含源文件以及编译后的 CSS 和 JavaScript 文件。


    npm install materialize-css@next

Bower

您还可以使用 bower 获取最新版本。此版本包含源文件以及编译后的 CSS 和 JavaScript 文件。(bower 已弃用。)


    bower install materialize

我们希望您在下一个项目中发现 Materialize 很有用。如果您能帮助我们在社交媒体上宣传 Materialize，我们将不胜感激。此外，如果您想支持开发，您可以向我们捐款。

            
            关注 @MaterializeCSS

项目结构

下载后，将文件解压到您的网站所在的目录中。您的目录将如下所示。

你会注意到有两组文件。min 表示文件已“压缩”以减少加载时间。这些经过精简的文件通常在生产中使用，而在开发过程中最好使用未经过精简的文件。


  MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html

HTML 设置

接下来，你只需确保在网页中正确链接文件。一般来说，为了减少页面加载时间，最好在正文末尾导入 JavaScript 文件。按照以下示例在网页中导入 Materialize。


  <!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>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

我们创建了一些入门模板，这样你就可以轻松开始设计网站，而无需花费大量设置时间。浏览我们的集合并下载最适合你的模板。

入门模板

这是最简单的入门页面，带有页眉、号召性用语和图标功能。

演示下载

视差模板

这是最简单的入门页面，带有页眉、号召性用语和图标功能。

演示下载

有一些社区制作的选项，让你可以轻松地将 Materialize 纳入你的项目。请记住，这些选项未经测试，可能已过时。

Ruby Gem

请参阅此处以了解此 gem 的文档。


  gem 'materialize-sass'

Meteor 包


  meteor add materialize:materialize

Ember 包


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

如果你选择下载 Materialize 的 Sass 版本，此部分才相关。

编译 Sass

你会发现下载的内容不包含 css 文件夹，而是包含许多 .scss 文件，其中包含各个组件的样式。遗憾的是，浏览器无法解释 Sass，因此你必须让 Sass 编译器将 scss/materialize.scss 编译成常规 CSS 文件。此时，你可以在 HTML 页面中链接此新输出的文件。


  MyWebsite/
  |--css/
  |  |--materialize.css <-- compiled from scss/materialize.scss
  |
  |--js/
  |  |--materialize.js
  |
  |--scss/
  |  |--materialize.scss
  |  |--components/
  |
  |--index.html