框架CSS变量（CSS Variables）
最后更新: | 浏览次数: 876|前端开发
概述
系统前端核心框架中预置的CSS变量，科学的使用有助于极大提高页面开发效率.减少CSS代码冗余
全局变量
| 变量名称 |
默认值 |
说明 |
| --body-color |
#333 |
默认字体颜色 |
| --body-bg |
fff |
默认背景颜色 |
| --body-font-size |
15px |
默认字体大小 |
| --body-font-weight |
400 |
字体粗细 |
| --body-line-height |
1.6 |
默认字体行距 |
| --link-color |
#444 |
超链接颜色 |
| --link-hover-color |
#0a58ca |
超链接激活时颜色 |
| --input-checked-color |
#0d6efd |
chcekcbox,radio选中时颜色 |
| --menu-level-ident |
16px |
菜单每层缩进值 |
容器变量
| 变量名称 |
默认值 |
说明 |
| --max-width |
1920px |
页面最大显示宽度 |
| --container-width |
1450px |
container容器宽度 |
| --gutter-x |
1.5rem |
container中列的水平间距 |
| --gutter-y |
0 |
container中列的垂直间距 |
说明：
1. --max-width定义了在屏幕超过1920分辨率上的最大显示宽度，.container-fluid同样遵循此规则
2.--container-width定义.container-xl类的最大显示宽度，且.container-xl去除了断点的设置。
表单相关
| 变量名称 |
默认值 |
说明 |
| --form-color |
inherit |
表单文字颜色 |
| --form-font-size |
inherit |
表单文字大小 |
| --form-border-color |
#ced4da |
表单边框颜色 |
| --form-bg |
#fff |
表单背景 |
| |
|
|
--form-valid-border-color
|
#198754
|
表单验证通过边框色 |
--form-invalid-border-color
|
#dc3545
|
表单验证未通过边框色 |
| --form-label-color |
inherit |
label标签文字颜色 |
| --form-label-font-size |
inherit |
label标签文字大小 |
| --form-label-font-weight |
400 |
label标签文字粗细 |
| --placeholder-color |
#6c757d
|
|
| --placeholder-font-size |
0.875rem |
|
| --placeholder-font-weight |
400 |
|
面包屑(.breadcrumb)
| 变量名称 |
默认值 |
说明 |
| --breadcrumb-divider |
/ |
面包屑分隔符 |
| --breadcrumb-item-padding-x |
0.5rem |
面包屑间隔 |
购物车
| 变量名称 |
默认值 |
说明 |
| --cart-side-width |
450 |
购物车宽度 |
| |
|
|
| |
|
|
TOC
| 变量名称 |
默认值 |
说明 |
| --toc-border-color |
#eee |
toc组件侧边颜色 |
| --toc-active-color |
--main-color |
激活时的链接颜色 |
| --toc-active-bg |
#f8f8f8 |
激活时的链接背景颜色 |
| --indent |
0.875rem |
文字缩进距离 |
其它变量
| 变量名称 |
默认值 |
说明 |
| --overlay-color |
transparent |
banner图遮罩颜色 |
| --border-radius |
0 |
用于button,select上的圆角 |
| --offcanvas-bg |
#fff |
offcanvas组件背景颜色 |
| --param-width |
150px |
产品参数名称宽度 |
| --param-padding-y |
8px |
产品参数垂直间距 |
| --param-padding-x |
8px |
产品参数水平间距 |
Swiper变量
| 变量名称 |
默认值 |
说明 |
| --swiper-navigation-sides-offset |
|
swiper的left,right |
| --swiper-button-prev-content |
|
swiper左字体图标 |
| --swiper-button-next-content |
|
swiper右字体图标 |
| --swiper-navigation-color |
|
swiper字体图标颜色 |
| --swiper-navigation-size |
|
swiper字体图标大小 |
| --swiper-pagination-bullet-inactive-color |
|
swiper标识背景颜色 |
| --swiper-theme-color |
|
当前swiper标识背景颜色 |
| --swiper-pagination-bullet-horizontal-gap |
|
swiper标识图标距离 |
| --swiper-pagination-bullet-opacity |
|
swiper标识图标透明度 |
| --swiper-pagination-bullet-width |
|
swiper标识图标宽度 |
| --swiper-pagination-bullet-height |
|
swiper标识图标宽度 |
| --swiper-pagination-bullet-border-radius |
|
swiper标识图标弧度 |