内置样式

文本样式

.c-font-xp  //文字大小，x值为12至40，c-font-12p等于font-size:12px
.c-text-nowrap //不换行
.c-text-bold //粗体
.c-text-center //文本居中
.c-text-left //往左对齐
.c-text-right //往右对齐
.c-text-indent //缩进2个字符
.c-text-white //白色文字
.c-text-primary //蓝色主要文字
.c-text-success //绿色成功文字
.c-text-warning //黄色警告文字
.c-text-info //灰色信息文字
.c-text-danger,.c-text-error //红色错误文字
.c-text-placeholder //占位文字
.c-text-grey //灰色文字
.c-ellipsis //只显示一行文字，超出显示省略号
.c-ellipsis-2l //只显示两行文字，超出显示省略号
.c-ellipsis-3l //只显示三行文字，超出显示省略号
.c-divider //分隔线

边框

.c-border //上下左右都有0.5px的边框
.c-border-t //上边框
.c-border-b //下边框
.c-border-l //左边框
.c-border-r //右边框
.c-border-tb //上下边框
.c-border-lr //左右边框

Flex布局

.c-flex
.c-flex-row //按水平方向排列
.c-flex-column //按垂直方向排列
.c-flex-row-center //水平方向居中
.c-flex-row-end //水平方向居右
.c-flex-row-space-between //水平方向两端对齐
.c-flex-column-center //垂直方向居中
.c-flex-column-end //垂直方向居低
.c-flex-item-auto //相当于flex:auto
.c-flex-item-1 //相当 flex:1
.c-flex-item-2 //相当 flex:2
.c-flex-item-3 //相当 flex:3
.c-flex-item-90p //flex-basis:90px
.c-flex-item-label //固定90px，并不换行
.c-flex-item-value //flex为1，向右对齐
.c-flex-item-field //flex为1，垂直居中

24列布局

.c-row 
.c-col-x //x为1至24
.c-col-gutter-xp //每列之间的间隔，x为5至100 
.c-row-gutter-xp //每行之间的间隔，x为5至100

边距

//以下x为5至100
.c-pd-xp 
.c-pd-t-xp //上方的内边距
.c-pd-b-xp //下方的内边距
.c-pd-l-xp //左方的内边距
.c-pd-r-xp //右方的内边距
.c-pd-tb-xp //上下方的内边距
.c-pd-lr-xp //左右方的内边距
.c-mg-xp 
.c-mg-t-xp //上方的外边距
.c-mg-b-xp //下方的外边距
.c-mg-l-xp //左方的外边距
.c-mg-r-xp //右方的外边距
.c-mg-tb-xp //上下方的外边距
.c-mg-lr-xp //左右方的外边距

尺寸

//以下x为5至100
.c-h-xp //高度
.c-w-xp //宽度

背景

.c-bg-white //白色背景
.c-bg-primary //蓝色主要背景
.c-bg-success //绿色成功背景
.c-bg-warning //黄色警告背景
.c-bg-danger,.c-bg-error //红色危险背景
.c-bg-info //灰色信息背景
.c-bg-grey //灰色背景