Material Design学习
前言： 作为一个用习惯了bootstrap的前端小菜，今天偶然听闻material design 这个从未听闻的前端框架，带着好奇开始了新的尝试，并将bootstrap跟material design 进行对比
1、如何使用
bootstrap :引入bootstrap.css和bootstrap.js
material design： 引入materialize.css和materialize.js
2、网格系统
bootstrap :col-lg-12 col-md-12 col-sm-12 col-xs-12 偏移： offset col-lg-offset-1
material design: l12 m12 s12 偏移：offset-s6 pull-5 push-1
3、字体排版
bootstrap :左对齐：text-left 右对齐：text-right 居中：text-center
material design: 左对齐：left-align 右对齐：right-align 居中：center-align truncate: 超出文字用省略号表示
4、媒体查询
bootstrap :
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
material design:
.hide |
Hidden for all Devices |
.hide-on-small-only |
Hidden for Mobile Only |
.hide-on-med-only |
Hidden for Tablet Only |
.hide-on-med-and-down |
Hidden for Tablet and Below |
.hide-on-med-and-up |
Hidden for Tablet and Above |
.hide-on-large-only |
Hidden for Desktop Only |
5、响应式图片
bootstrap ：
| .img-rounded | 为图片添加圆角 (IE8 不支持) | |
| .img-circle | 将图片变为圆形 (IE8 不支持) | |
| .img-thumbnail | 缩略图功能 | |
| .img-responsive | 图片响应式 (将很好地扩展到父元素) |
material design: responsive-img 如果是圆形图片，直接添加circle
6、播放视频
bootstrap ：
material design:
<div class="video-container">
<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
7、阴影
bootstrap :box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
material design:
8、表格
bootstrap：基本表格： table
条纹表格：table-striped
有边框的表格：table-bordered
鼠标悬停：table-hover
material design:
有边框：bordered
条纹表格: striped
鼠标悬停：highlight
居中：centerned
响应式：responsive-table
9、按钮
boostrap:
material design:
鼠标移上去数显子菜单
鼠标点击出现子菜单：
8、表单
bootstrap:
material design:
输入框：
输入域：
下拉框:
单选按钮：
多选按钮：
开关：
上传文件：
范围：
日历：
计数：
自动补全：
0、折叠面板：
bootstrap：
material design:
