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:

 

 

 

 
posted @ 2016-12-13 11:44  任小小  阅读(1428)  评论(0编辑  收藏  举报