Materialize基础---css

Materialize基础---css

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

颜色

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

网格系统

container section divider

.container宽为70%/85%,居中
.section顶部底部填充
.divider像素分割线

12列栅格

一行.row分列.col+.s/m/l数字
偏移.offset-
推和拉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

(留坑中)

字体样式

(留坑中)
bodyfont-family移除Roboto样式
标题样式;
引用

,样式类似与MD语法的>;
弹性文本.flow-text;

你可能感兴趣的:(materialize)