Materialize基础---css

• 颜色
• 网格系统
• • container section divider
  • 12列栅格
  • 屏幕尺寸
• 对齐
• 阴影效果
• 表格
• 媒体样式
• • 图片
  • 视频
• sass
• 字体样式

颜色

功能强大的调色板，见中文文档

网格系统

container section divider

.container

宽为70%/85%，居中

.section

顶部底部填充

.divider

像素分割线

12列栅格

一行

.row

分列

.col

+

.s/m/l数字

偏移

.offset-<s/m/l数字>

推和拉

push-<>

和

pull-<>

屏幕尺寸

-	手机<=600px	平板<=992px	桌面>992px
类前缀	.s	.m	.l
Container宽度	85%	85%	70%

向上兼容

对齐

垂直居中

.valign-wrapper

文本对齐

.left-align

.right-align

.center-align

快速浮动

.left

.right

隐藏内容

.hide

其他特殊情况见中文文档， 限制隐藏范围

格式

.truncate

清空一行溢出文本用省略号代替

悬浮

.hoverable

阴影上浮效果

恢复浏览器默认样式

.browser-default

阴影效果

z-depth-1到5

阴影逐级加深

表格

所有在手机的表格自动水平居中；

table.centered

表格居中；

默认无边框；

table.bordered

加底部边框；

table.striped

斑马纹；

table.highlight

表格悬浮:hover高亮效果；

响应式表格

table.responsive-table

会出现水平滚动条；

媒体样式

图片

响应式

.responsive-img

即：max-width:100%;height:auto;

圆形图

.circle

视频

响应式容器

div.video-container

响应式视频

video.responsive-video

sass

(留坑中)

字体样式

(留坑中)

用

body

加

font-family

移除Roboto样式

标题样式；

引用

<blockquote>

，样式类似与MD语法的

>

;

弹性文本

.flow-text

;