Material Design学习

时间:2024-01-15 14:36:44

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

material design:

 <div class="video-container">
<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
Material Design学习

7、阴影

bootstrap        :box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

material design:

Material Design学习

8、表格

bootstrap:基本表格: table

       条纹表格:table-striped

      有边框的表格:table-bordered

       鼠标悬停:table-hover

material design:

    有边框:bordered

条纹表格: striped

     鼠标悬停:highlight

     居中:centerned

     响应式:responsive-table

9、按钮

boostrap:

Material Design学习

material design:

Material Design学习

Material Design学习

Material Design学习 鼠标移上去数显子菜单

Material Design学习

鼠标点击出现子菜单:

Material Design学习

8、表单

bootstrap:

Material Design学习

material design:

输入框:

Material Design学习

输入域:

Material Design学习

下拉框:

Material Design学习

单选按钮:

Material Design学习

多选按钮:

Material Design学习

开关:

Material Design学习

上传文件:

Material Design学习

范围:

Material Design学习

日历:

Material Design学习

计数:

Material Design学习

自动补全:

Material Design学习

0、折叠面板:

bootstrap:

Material Design学习

material design:

Material Design学习