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

 

Material Design学习的更多相关文章

  1. Material Design学习之 Button(具体分析,传说中的水滴动画)

    转载请注明出处:王亟亟的大牛之路 上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/5 ...

  2. Material Design学习笔记

    Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...

  3. Android Material Design 学习笔记 - Matrial Theme

    google在2014年 I/O大会上推出了一种新的设计设计语言—Material design,这种设计语言语言旨在为手机.平板电脑.台式机和“其他平台”提供更一致.更广泛的“外观和感觉”(附上官方 ...

  4. Material Design学习之 ProgreesBar

    转载奇怪注明出处:王亟亟的大牛之路 继续我们Material Design的内容,这一篇讲的是进度条,上一篇是Switch地址例如以下:http://blog.csdn.net/ddwhan0123/ ...

  5. Material Design学习之 Camera

    转载请注明出处:王亟亟的大牛之路 年后第一篇,自从来了某司产量骤减,这里批评下自己,这一篇的素材来源于老牌Material Design控件写手afollestad的 https://github.c ...

  6. Material Design学习之 Bottom navigation

    转载请注明出处:王亟亟的大牛之路 礼拜4一天由于事假没有去单位然后礼拜3由于生日也没写文章,今天一早上班就补一篇MD的内容.这一篇是关于颇有争议的Bottom navigation相关内容(主要是翻译 ...

  7. Material Design学习-----FloatingActionButton

    FloatingActionButton是悬浮操作按钮,它继承自imageview,所以说它具备有imageview所有的方法和属性.与其他按钮不同的是,FloatingActionButton默认就 ...

  8. Material Design学习-----TextInputLayout

    TextInputLayout是为EditText提供了一种新的实现和交互方式.在传统的EditText中存在一个hint属性,是说在editext中没有内容时,默认的提示信息.当想edittext中 ...

  9. Material Design学习-----CollapsingToolbarLayout

    博客引用(http://www.open-open.com/lib/view/open1438265746378.html) CollapsingToolbarLayout为我们提供了一个很方便的顶部 ...

随机推荐

  1. 开源代码分析之Android/iOS Hybrid JSBridge框架

    Hybrid开发是现在的主流形式,对于业务快速迭代的公司尤其重要.曾将在鞋厂接触了很多关于Hybrid的理念,在这里分享一些Hybrid框架思想. Hybrid框架包括Native与H5的通信,Web ...

  2. 如何计算合适的InnoDB的(innodb_log_file_size)日志文件大小

    在mysql工具中如phpmyadmin中执行show engine innodb status;注意观察Log sequence number 60秒后再次执行 获取Log sequence num ...

  3. 如何在spring容器开始后,和销毁前,执行一些操作

    转:参考文档:资料链接

  4. CentOS 下部署 ASP.NET Core环境

    一.安装dotnet 1.下载运行环境 https://www.microsoft.com/net/download/linux 下载Runtime:https://go.microsoft.com/ ...

  5. BasicDataSource的配置参数

    参数 描述 username 传递给JDBC驱动的用于建立连接的用户名 password 传递给JDBC驱动的用于建立连接的密码 url 传递给JDBC驱动的用于建立连接的URL driverClas ...

  6. OC----面向对象

    创建一个类 comm+n 实例变量的可见度 @public,@protect@private @public  // 共有的,在类的内部和外部都可以进行访问 @protected   // 受保护的, ...

  7. 17+个ASP.NET MVC扩展点【附源码】

    1.自定义一个HttpModule,并将其中的方法添加到HttpApplication相应的事件中!即:创建一个实现了IHttpmodule接口的类,并将配置WebConfig.  在自定义的Http ...

  8. requests库基本使用

    在python中,字典的输出内容跟json格式内容一样,但是字典的格式是字典,json的格式是字符串,所以在传输的时候(特别是网页)要转换使用. r.text返回的是Unicode型的数据. r.co ...

  9. HP ALM 使用经验

    使用HP ALM(Application Lifecycle Management)软件有一个多月的时间了,我是从安装,部署,建项,配置,使用,再到问题收集,这个过程过来的.发现ALM是一个功能确实强 ...

  10. cocos2dx 3.x (单选,多选,复选checkBox按钮的实现) RadioButton

    // //  LandLordsMakeNewRoom.hpp //  MalaGame39 // //  Created by work on 2016/12/19. // //   #ifndef ...