颜色
功能强大的调色板,见中文文档
网格系统
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
;