【3.2】MDBootstrap--炫耀你的网页

一、Material Design的认知

http://colachan.com/post/3416 （强烈推荐）

Material Design 是google定义的一套设计语言，为了让手机，电脑，平板给人呈现的美观效果统一。 啥有不说了，先拿个Material Design的框架练练手吧，这里我选择的基于bootstarp 的material design。

material design的核心思想，就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

按照我的理解就是：

1. 材质的空间感
2. 动画： 每次点击，需要有相应的动画，比如:水波，转场
3. 颜色： 颜色不宜过多。选取一种主色、一种辅助色（非必需），在此基础上进行明度、饱和度变化，构成配色方案。
4. 图标
5. 图片
6. 文字 英文字体使用Roboto，中文字体使用Noto。
7. 布局
8. 组件

二、bootstarp 的material design

1.安装

首先下载：

https://mdbootstrap.com/download/mdb-free/440jd233sdf%5Egt4nc%28srjgzz%26x/MDB-Free.zip

打开index.html

https://mdbootstrap.com/mdb-quick-start/

2.使用细节

天呐撸，这里面有完美的教程，花一个上午了解一下每个功能某块，需要那部分的时候，直接抄袭就好了

https://mdbootstrap.com/

3.注意事项

我比较喜欢的几个模板：

• https://mdbootstrap.com/previews/docs/latest/html/parallax/index.html
• https://mdbootstrap.com/previews/docs/latest/html/skins/indigo-skin.html
• https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/jquery/tutorials/bootstrap/tutorial-3/10/index.html?#

常用的一些组件（可以直接拿来用的组件）

• https://material.io/develop/web/
• https://getmdl.io/templates/text-only/index.html
• https://material.io/design/color/#
• https://github.com/material-components/material-components-web

参考资料：

https://mdbootstrap.com/getting-started/

http://colachan.com/post/3416 （强烈推荐）

9个目前流行的Material Design前端框架 http://www.shejidaren.com/top-material-design-frameworks.html