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:
Material Design学习的更多相关文章
- Material Design学习之 Button(具体分析,传说中的水滴动画)
转载请注明出处:王亟亟的大牛之路 上一篇大致介绍了Material Design的一些基本概念传送门:http://blog.csdn.net/ddwhan0123/article/details/5 ...
- Material Design学习笔记
Wiki->移动开发->Android->Material Design-原质化设计 (友情链接:http://wiki.jikexueyuan.com/project/materi ...
- Android Material Design 学习笔记 - Matrial Theme
google在2014年 I/O大会上推出了一种新的设计设计语言—Material design,这种设计语言语言旨在为手机.平板电脑.台式机和“其他平台”提供更一致.更广泛的“外观和感觉”(附上官方 ...
- Material Design学习之 ProgreesBar
转载奇怪注明出处:王亟亟的大牛之路 继续我们Material Design的内容,这一篇讲的是进度条,上一篇是Switch地址例如以下:http://blog.csdn.net/ddwhan0123/ ...
- Material Design学习之 Camera
转载请注明出处:王亟亟的大牛之路 年后第一篇,自从来了某司产量骤减,这里批评下自己,这一篇的素材来源于老牌Material Design控件写手afollestad的 https://github.c ...
- Material Design学习之 Bottom navigation
转载请注明出处:王亟亟的大牛之路 礼拜4一天由于事假没有去单位然后礼拜3由于生日也没写文章,今天一早上班就补一篇MD的内容.这一篇是关于颇有争议的Bottom navigation相关内容(主要是翻译 ...
- Material Design学习-----FloatingActionButton
FloatingActionButton是悬浮操作按钮,它继承自imageview,所以说它具备有imageview所有的方法和属性.与其他按钮不同的是,FloatingActionButton默认就 ...
- Material Design学习-----TextInputLayout
TextInputLayout是为EditText提供了一种新的实现和交互方式.在传统的EditText中存在一个hint属性,是说在editext中没有内容时,默认的提示信息.当想edittext中 ...
- Material Design学习-----CollapsingToolbarLayout
博客引用(http://www.open-open.com/lib/view/open1438265746378.html) CollapsingToolbarLayout为我们提供了一个很方便的顶部 ...
随机推荐
- 开源代码分析之Android/iOS Hybrid JSBridge框架
Hybrid开发是现在的主流形式,对于业务快速迭代的公司尤其重要.曾将在鞋厂接触了很多关于Hybrid的理念,在这里分享一些Hybrid框架思想. Hybrid框架包括Native与H5的通信,Web ...
- 如何计算合适的InnoDB的(innodb_log_file_size)日志文件大小
在mysql工具中如phpmyadmin中执行show engine innodb status;注意观察Log sequence number 60秒后再次执行 获取Log sequence num ...
- 如何在spring容器开始后,和销毁前,执行一些操作
转:参考文档:资料链接
- CentOS 下部署 ASP.NET Core环境
一.安装dotnet 1.下载运行环境 https://www.microsoft.com/net/download/linux 下载Runtime:https://go.microsoft.com/ ...
- BasicDataSource的配置参数
参数 描述 username 传递给JDBC驱动的用于建立连接的用户名 password 传递给JDBC驱动的用于建立连接的密码 url 传递给JDBC驱动的用于建立连接的URL driverClas ...
- OC----面向对象
创建一个类 comm+n 实例变量的可见度 @public,@protect@private @public // 共有的,在类的内部和外部都可以进行访问 @protected // 受保护的, ...
- 17+个ASP.NET MVC扩展点【附源码】
1.自定义一个HttpModule,并将其中的方法添加到HttpApplication相应的事件中!即:创建一个实现了IHttpmodule接口的类,并将配置WebConfig. 在自定义的Http ...
- requests库基本使用
在python中,字典的输出内容跟json格式内容一样,但是字典的格式是字典,json的格式是字符串,所以在传输的时候(特别是网页)要转换使用. r.text返回的是Unicode型的数据. r.co ...
- HP ALM 使用经验
使用HP ALM(Application Lifecycle Management)软件有一个多月的时间了,我是从安装,部署,建项,配置,使用,再到问题收集,这个过程过来的.发现ALM是一个功能确实强 ...
- cocos2dx 3.x (单选,多选,复选checkBox按钮的实现) RadioButton
// // LandLordsMakeNewRoom.hpp // MalaGame39 // // Created by work on 2016/12/19. // // #ifndef ...