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

;