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

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION In terms of commercia ...

  2. Thinkphp查询 1.查询方式 2.表达式查询 3.快捷查询 4.区间查询 5.组合查询 6.统计查询 7.动态查询 8.SQL 查询

    1.使用字符串作为条件查询 $user = M('User'); var_dump($user->where('id=1 AND user="蜡笔小新"')->sele ...

  3. linux系统文件权限

    Linux文件权限详解 文件和目录权限概述 在linux中的每一个文件或目录都包含有访问权限,这些访问权限决定了谁能访问和如何访问这些文件和目录.通过设定权限可以从以下三种访问方式限制访问权限:只允许 ...

  4. 如何在springMVC 中对REST服务使用mockmvc 做测试

    如何在springMVC 中对REST服务使用mockmvc 做测试 博客分类: java 基础 springMVCmockMVC单元测试  spring 集成测试中对mock 的集成实在是太棒了!但 ...

  5. LeetCode Verify Preorder Sequence in Binary Search Tree

    原题链接在这里:https://leetcode.com/problems/verify-preorder-sequence-in-binary-search-tree/ 题目: Given an a ...

  6. sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO

    sqlalchemy mark-deleted 和 python 多继承下的方法解析顺序 MRO 今天在弄一个 sqlalchemy 的数据库基类的时候,遇到了跟多继承相关的一个小问题,因此顺便看了一 ...

  7. Python之路-(js正则表达式、前端页面的模板套用、Django基础)

    js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...

  8. XML和JSON数据格式对比

    概念 XML 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...

  9. 学习vulkan的几个有用的网址

    <ignore_js_op> 1)一个权威向导网站:https://vulkan-tutorial.com/2)Imagination图形组织官网http://imgtec.eetrend ...

  10. 获取浏览器信息 c#

    Request.Browser.MajorVersion.ToString();//获取客户端浏览器的版本号 Request.Browser.Version.ToString();//获取客户端浏览器 ...