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

materializecss

Materialize是一款基于Material Design设计的前端框架,支持自适应,现代感十足。

主要特性

无论是开发者还是网站用户,Materialize都能帮助您简化您的生活。

快速开发

您可以把默认样式连同定制部件一起使用,我们把它们的性能进行了很大程度的提升。除此之外,我们为开发者精选了一些优秀的动画和过渡效果,只为让您操作更加流畅。

专注于用户体验

通过运用Material Design的设计原则和元素,我们提供了一个部件和动画的集成框架,方便用户获得更多反馈。同时,还有个支持全平台自适应的独立系统等着您,只为让您得到更一致的用户体验。

操作简单

我们编写了非常详细的说明文档,提供了详细的代码案例,方便新用户入门。当然,如果您对于Materialize还有任何疑问,始终欢迎您的反馈和咨询。

下载

Materialize提供2种不同的形式文件,您可以根据您的习惯偏好或者专业领域,选择其中任意一种即可。

Materialize

该版本为标准版,集合了缩减版的及未缩减版的CSS和JS文件。该方式无需安装,如果你对Sass不熟悉,可以选择这个方式。MATERIALIZE

Sass

该版本包含了SCSS源文件。如果你选择这个方式,你将有更多的部件可以控制,但需要你有Sass编译器。SOURCE

CDN

你可以在 cdnjs 找到CDN的全部版本。

NPM

你也可以通过NPM获取最新版,该版本包含源文件以及已编译的CSS、JS文件。

Bower

你也可以通过Bower获取最新版,该版本包含源文件以及已编译的CSS、JS文件。

安装

项目架构

下载后,把文件解压到你的网站所在目录,文件结构应该如下。

你会看到中间有2组文件,min 代表压缩版以节省加载时间。这些缩减版文件通常在You’ll notice that there are two sets of the files. The min means that the file is “compressed” to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.

HTML 安装

下一步,你只需确保你在页面中链接了这些文件。一般来说,更明智的做法是,在body末端使用<import>导入JS文件以节省页面加载时间。照着下面的例子来学着把Materialize导入到你的网页中吧。

最后一件事,记住你得先导入jQuery再导入materialize.js!

模板

我们制作了一些初始模板,在最短时间内安装完成,供您方便快捷地开始设计。您只需浏览模板集,选择您所适合的下载即可。

初始模板

starter-template

这是个最简单的初始模板,包含一个Header、行为号召模块、以及带有Icon的特点文字模块。 演示, 下载

视差滚动模板

parallax-template

这是个最简单的初始模板,包含一个Header、行为号召模块、以及带有Icon的特点文字模块。演示, 下载

CSS

组件

Javascript

开发资源

官方网站:http://materializecss.com/
开源地址:https://github.com/dogfalo/materialize/

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

3 2 收藏

资源整理者简介:凝枫

非典型性程序员,爱做一些和写程序毫不相干的事 个人主页 · 贡献了46个资源 · 1


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1440 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer