文字颜色
| 类名 | 描述 |
|---|---|
.text-default |
默认文本色 |
.text-primary |
主要文本色 |
.text-success |
成功文本色 |
.text-info |
信息文本色 |
.text-warning |
警告文本色 |
.text-danger |
错误文本色 |
.text-dark |
暗文本色 |
.text-alert |
提示文本色 |
.text-system |
系统文本色 |
| 类名 | 描述 |
|---|---|
.text-red |
红色文本色 |
.text-orange |
橙色文本色 |
.text-yellow |
黄色文本色 |
.text-blue |
蓝色文本色 |
.text-light-blue |
亮蓝文本色 |
.text-black |
黑色文本色 |
.text-green |
绿色文本色 |
.text-light-green |
亮绿色文本色 |
.text-aqua |
浅绿色文本色 |
| 类名 | 描述 |
|---|---|
.text-gray |
灰色文本色 |
.text-light-gray |
浅灰色文本色 |
.text-navy |
深蓝色文本色 |
.text-teal |
青色文本色 |
.text-olive |
橄榄色文本色 |
.text-lime |
黄绿色文本色 |
.text-fuchsia |
紫红色文本色 |
.text-purple |
紫色文本色 |
.text-maroon |
红褐色文本色 |
背景颜色
| 类名 | 描述 |
|---|---|
.bg-default |
默认背景色 |
.bg-primary |
主要背景色 |
.bg-success |
成功背景色 |
.bg-info |
信息背景色 |
.bg-warning |
警告背景色 |
.bg-danger |
错误背景色 |
.bg-dark |
暗背景色 |
.bg-alert |
提示背景色 |
.bg-system |
系统背景色 |
| 类名 | 描述 |
|---|---|
.bg-red |
红色背景色 |
.bg-orange |
橙色背景色 |
.bg-yellow |
黄色背景色 |
.bg-blue |
蓝色背景色 |
.bg-light-blue |
亮蓝背景色 |
.bg-black |
黑色背景色 |
.bg-green |
绿色背景色 |
.bg-light-green |
亮绿色背景色 |
.bg-aqua |
浅绿色背景色 |
| 类名 | 描述 |
|---|---|
.bg-gray |
灰色背景色 |
.bg-light-gray |
浅灰色背景色 |
.bg-navy |
深蓝色背景色 |
.bg-teal |
青色背景色 |
.bg-olive |
橄榄色背景色 |
.bg-lime |
黄绿色背景色 |
.bg-fuchsia |
紫红色背景色 |
.bg-purple |
紫色背景色 |
.bg-maroon |
红褐色背景色 |
背景激活&悬停颜色
| 类名 | 描述 |
|---|---|
.bg-default-active |
默认激活背景色 |
.bg-primary-active |
主要激活背景色 |
.bg-success-active |
成功激活背景色 |
.bg-info-active |
信息激活背景色 |
.bg-warning-active |
警告激活背景色 |
.bg-danger-active |
错误激活背景色 |
.bg-dark-active |
暗背激活景色 |
.bg-alert-active |
提示激活背景色 |
.bg-system-active |
系统激活背景色 |
| 类名 | 描述 |
|---|---|
.bg-default-hover |
默认悬停背景色 |
.bg-primary-hover |
主要悬停背景色 |
.bg-success-hover |
成功悬停背景色 |
.bg-info-hover |
信息悬停背景色 |
.bg-warning-hover |
警告悬停背景色 |
.bg-danger-hover |
错误悬停背景色 |
.bg-dark-hover |
暗背悬停景色 |
.bg-alert-hover |
提示悬停背景色 |
.bg-system-hover |
系统悬停背景色 |
| 类名 | 描述 |
|---|---|
.bg-red-active |
红色激活背景色 |
.bg-orange-active |
橙色激活背景色 |
.bg-yellow-active |
黄色激活背景色 |
.bg-blue-active |
蓝色激活背景色 |
.bg-light-blue-active |
亮蓝激活背景色 |
.bg-black-active |
黑色激活背景色 |
.bg-green-active |
绿色激活背景色 |
.bg-light-green-active |
亮绿色激活背景色 |
.bg-aqua-active |
浅绿色激活背景色 |
| 类名 | 描述 |
|---|---|
.bg-gray-active |
灰色激活背景色 |
.bg-light-gray-active |
浅灰激活色背景色 |
.bg-navy-active |
深蓝色激活背景色 |
.bg-teal-active |
青色背景色 |
.bg-olive-active |
橄榄色激活背景色 |
.bg-lime-active |
黄绿色激活背景色 |
.bg-fuchsia-active |
紫红色激活背景色 |
.bg-purple-active |
紫色激活背景色 |
.bg-maroon-active |
红褐色激活背景色 |
背景渐变颜色
| 类名 | 描述 |
|---|---|
.bg-teal-gradient |
青色渐变背景色 |
.bg-primary-gradient |
亮蓝渐变背景色 |
.bg-blue-gradient |
蓝色渐变背景色 |
.bg-aqua-gradient |
浅绿色渐变背景色 |
.bg-yellow-gradient |
黄色渐变背景色 |
| 类名 | 描述 |
|---|---|
.bg-purple-gradient |
紫色渐变背景色 |
.bg-green-gradient |
绿色渐变景色 |
.bg-red-gradient |
红色渐变背景色 |
.bg-black-gradient |
黑色渐变背景色 |
.bg-maroon-gradient |
红褐色渐变背景色 |
外边距
| 类名 | 描述 |
|---|---|
.m-auto |
margin:auto |
.m-0-auto |
margin:0 auto |
.m-40 |
margin:40px |
.m-20 |
margin:20px |
.m-10 .margin |
margin:10px |
.m-5 |
margin:5px |
.m-0 .no-margin |
margin:0 |
| 类名 | 描述 |
|---|---|
.mb-40 |
margin-bottom:40px |
.mb-20 |
margin-bottom:20px |
.mb-10 .margin-bottom |
margin-bottom:10px |
.mb-5 |
margin-bottom:5px |
.mb-0 |
margin-bottom:0 |
| 类名 | 描述 |
|---|---|
.mt-40 |
margin-top:40px |
.mt-20 |
margin-top:20px |
.mt-10 .margin-top |
margin-top:10px |
.mt-5 |
margin-top:5px |
.mt-0 |
margin-top:0 |
| 类名 | 描述 |
|---|---|
.ml-40 |
margin-left:40px |
.ml-20 |
margin-left:20px |
.ml-10 .margin-left |
margin-left:10px |
.ml-5 |
margin-left:5px |
.ml-0 |
margin-left:0 |
.ml-auto |
margin-left:auto |
| 类名 | 描述 |
|---|---|
.mr-40 |
margin-right:40px |
.mr-20 |
margin-right:20px |
.mr-10 .margin-right |
margin-right:10px |
.mr-5 |
margin-right:5px |
.mr-0 |
margin-right:0 |
.mr-auto |
margin-right:auto |
内边距
| 类名 | 描述 |
|---|---|
.p-30 |
padding:30px |
.p-20 |
padding:20px |
.p-15 |
padding:15px |
.p-10 .pad |
padding:10px |
.p-5 |
padding:5px |
.p-0 .no-padding |
padding:0 |
| 类名 | 描述 |
|---|---|
.pb-30 |
padding-bottom:30px |
.pb-20 |
padding-bottom:20px |
.pb-15 |
padding-bottom:15px |
.pb-10 |
padding-bottom:10px |
.pb-5 |
padding-bottom:5px |
.pb-0 |
padding-bottom:0 |
| 类名 | 描述 |
|---|---|
.pt-30 |
padding-top:30px |
.pt-20 |
padding-top:20px |
.pt-15 |
padding-top:15px |
.pt-10 |
padding-top:10px |
.pt-5 |
padding-top:5px |
.pt-0 |
padding-top:0 |
| 类名 | 描述 |
|---|---|
.pl-30 |
padding-left:30px |
.pl-20 |
padding-left:20px |
.pl-15 |
padding-left:15px |
.pl-10 |
padding-left:10px |
.pl-5 |
padding-left:5px |
.pl-0 |
padding-left:0 |
| 类名 | 描述 |
|---|---|
.pr-30 |
padding-right:30px |
.pr-20 |
padding-right:20px |
.pr-15 |
padding-right:15px |
.pr-10 |
padding-right:10px |
.pr-5 |
padding-right:5px |
.pr-0 |
padding-right:0 |
边框 & 圆角
| 类名 | 描述 |
|---|---|
.b-0 .no-border |
border:0 |
.bt-0 |
border-top:0 |
.bb-0 |
border-bottom:0 |
.b-a |
border:1px solid rgba(0,0,0,0.05) |
.b-t |
border-top:1px solid rgba(0,0,0,0.05) |
.b-r |
border-right:1px solid rgba(0,0,0,0.05) |
.b-b |
border-bottom:1px solid rgba(0,0,0,0.05) |
.b-l |
border-left:1px solid rgba(0,0,0,0.05) |
| 类名 | 描述 |
|---|---|
.b-dashed |
虚线 |
.b-solid |
实线 |
.b-1x |
1px 线宽 |
.b-2x |
2px 线宽 |
.b-3x |
3px 线宽 |
| 类名 | 描述 |
|---|---|
.b-default |
默认线色 |
.b-primary |
主要线色 |
.b-success |
成功线色 |
.b-info |
信息线色 |
.b-warning |
警告线色 |
.b-danger |
出错线色 |
.b-white |
白色线色 |
.b-black |
黑色线色 |
| 类名 | 描述 |
|---|---|
.br-0 .no-radius |
无圆角 |
.br-2 |
2px 圆角 |
.br-2-t |
2px 上圆角 |
.br-2-r |
2px 右圆角 |
.br-2-b |
2px 下圆角 |
.br-2-l |
2px 左圆角 |
图片
| 类名 | 描述 |
|---|---|
.img-sm |
30x30 图片 |
.img-md |
60x60 图片 |
.img-lg |
90x90 图片 |
| 类名 | 描述 |
|---|---|
.img-bordered |
3px边框 3px内边距 图片 |
.img-bordered-sm |
2px边框 2px内边距 图片 |
.img-bordered-xs |
1px边框 1px内边距 图片 |
其他
| 类名 | 描述 |
|---|---|
.no-bg |
无背景 |
.no-shadow |
无阴影 |
.no-border .b-0 |
无边框 |
.no-radius .flat |
无圆角 |
.no-margin .m-0 |
无外边距 |
.no-padding .p-0 |
无内边距 |
| 类名 | 描述 |
|---|---|
.pull-left |
居左 |
.pull-right |
居右 |
.pull-center |
居中 |
.hide |
隐藏 |
.block.show |
显示 |
.inline |
内联元素 |
.inline-block |
行内块元素 |
| 类名 | 描述 |
|---|---|
.static |
无定位 |
.relative |
父级定位 |
.absolute |
子级定位 |
.fixed |
固定位置 |
.clearfix |
清除浮动 |
.radius-rounded |
圆形 |
.text-ellipsis |
文字超出省略 |