前言: 作为一个用习惯了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: