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/getting-started/

http://colachan.com/post/3416 (强烈推荐)

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

个人公众号,比较懒,很少更新,可以在上面提问题:

更多精彩,请移步公众号阅读:

Sam avatar
About Sam
专注生物信息 专注转化医学