开始学习

优质

小牛编辑

144浏览

2023-12-01

学习如何将 Materialize 快速应用到你的网站中。

下载

Materialize 来源于两种不同的形式。你可以根据自己的喜好与经验来选择你喜欢的版本。一开始使用 Materialize，你必须从下面选择一个去下载。

Materialize

这是标准版本，包含压缩过的和没有压缩过的 css 和 javascript 文件。选择这个不需要任何设置，只要引入文件。如果你不熟悉 Sass 就选择这个。

Materialize file_download

Sass

这个版本包含 Sass 源文件。选择这个版本可以对所有组件有更多地控制。选择这个选项你需要 Sass 编译器。

源码 file_download

CDN

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

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

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

NPM

你也可以使用 NPM 获取最新的版本。包含源文件，同样还有编译好的 css 与 JavaScript 文件。

npm install materialize-css

Bower

你也可以使用 bower 获取最新的版本。包含源文件，同样还有编译好的 css 与 JavaScript 文件。

bower install materialize

安装

项目结构

下载后，将文件提取到您的网站所在的目录中。你的目录会看起来像这样。

你会注意到有两套文件，带 min 表示是被压缩的，以减少文件加载时间。压缩文件用于生产环境，在开发环境中使用没有压缩的文件。

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

HTML 安装

下一步你必须确保你正确的引入了这些文件。一般将 javascript 文件放在页面 body 标签的末端以减少页面的加载时间。下面举一个例子来教你怎样引入 Materialize 到你的网站中。

最后要注意的一点是，你必须在 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>

模板

我们已经创建了一些入门模板，所以你可以很容易开始设计你的网站。查看下面的模板，选择适合你的。

入门模板

这是一个简单的入门页面，一个标题，动作调用，图标功能。

示例 search 下载 file_download

视差模板

这是一个简单的入门页面，一个标题，动作调用，图标功能。

示例 search 下载 file_download

第三方支持

通过第三方工具将 Materialize 引入到你的项目中。但是这不能保证你获取的 Materialize 是最新的。

Ruby Gem

点击这里查看 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 安装

这部分是你选了 Materialize 的 Sass 版本的说明。

编译 Sass

取而代之的有一个 css 文件夹, 你会发现这里包含很多以 .scss 为后缀的文件。这些文件包含了组件的样式。不幸的是，浏览器并不能解析 Sass，所以你必须使用 sass 编译器去编译 scss/materialize.scss 文件并生成正常的 css 文件。做好这些你就可以将这个输出的文件引入到你的 HTML 页面中。

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