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:

 

 

 

转载于:https://www.cnblogs.com/ryt103114/p/6169255.html