Materialize基础---css

颜色

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

网格系统

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;