Bootstrap定制化

基本设置

修改元素 变量 修改值
文字大小 font-size-base 12px
字体 font-family-sans-serif "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif
屏幕宽度 container-large-desktop (1150px + @grid-gutter-width)

按钮

|修改元素|变量|修改值|
|:----:|:----:|:----:|:----:|
|背景颜色|btn-default-bg|#4877ed|
|文字颜色|btn-default-color|#fff|
|按钮边框|btn-default-border|(空)|
|按钮边框|btn-danger-border|(空)|
|按钮边框|btn-warning-border|(空)|
|按钮边框|btn-info-border|(空)|
|按钮边框|btn-success-border|(空)|
|按钮边框|btn-primary-border|(空)|

基础颜色(Colors)

|修改元素|变量|修改值|
|:----:|:----:|:----:|:----:|
|主色|brand-primary|#4877ED|
|警告颜色|brand-warning|#E1BC29|
|错误颜色|brand-danger|#FF5151|
|成功颜色|brand-success|#3BB273|
|类色|brand-info|#1446A0|

Scaffolding(交互色)

|修改元素|变量|修改值|
|:----:|:----:|:----:|:----:|
|文本选中颜色|component-active-color|#3469ED|
|文本选中背景颜色|component-active-bg|transparent|

表单(Forms)

|修改元素|变量|修改值|
|:----:|:----:|:----:|:----:|
|input描边|input-border| #dbdbdb|
|input焦点事件|input-border-focus|#3469ED|
|表单输入文字颜色|input-color|@gray-dark|

验证

|修改元素|变量|修改值|
|:----:|:----:|:----:|:----:|
|验证文字颜色|state-success-text|#fff|
|验证文字颜色|state-info-text|#fff|
|验证文字颜色|state-warning-text|#fff|
|验证文字颜色|state-danger-text|#fff|
|验证背景|state-success-bg|@brand-success|
|验证背景|state-info-bg|@brand-info|
|验证背景|state-warning-bg|@brand-warning|
|验证背景|state-danger-bg|@brand-danger|

分页

|修改元素|变量|修改值|
|:----:|:----:|:----:|:----:|
|分页radius|pager-border-radius|3px|

模态窗

|修改元素|变量|修改值|
|:----:|:----:|:----:|:----:|
|模态窗内容背景|modal-content-bg|#fcfcfc|
|状态层透明度|modal-backdrop-opacity|.6|
|模态窗尺寸|@modal-md|500px|
|模态窗尺寸|@modal-sm|400px|

Thumbnails(缩略图)

|修改元素|变量|修改值|
|:----:|:----:|:----:|:----:|
|缩略图内补白|@thumbnail-padding|0px|
|缩略图边框色|@thumbnail-border|#adadad|

close(关闭按钮)

|修改元素|变量|修改值|
|:----:|:----:|:----:|:----:|
|关闭图标字体|@close-font-weight|normal|
|阴影|@close-text-shadow|0|

你可能感兴趣的:(Bootstrap定制化)