对于一个项目,我必须使用一些现成设计中的某些自定义颜色定义。这是我使用 Bootstrap ( https://mdbootstrap.com/docs/jquery/ ) 的第一个项目。
为了遵守设计指南,我自己编译 Bootstrap SASS 文件,方法是从 node_modules 文件夹中包含它,如下所示:
// override BMD variables here@import "reset";
@import "variables_bootstrap";
@import "variables_mdb";
// import BMD
@import "../../../../node_modules/bootstrap-material-design/scss/core";
在 variables_bootstrap.scss 中,我拥有所有引导变量并根据我的需要更改它们(断点、主题颜色等)。
说到按钮,我有很多选择:
$btn-padding-y: $input-btn-padding-y;
$btn-padding-x: $input-btn-padding-x;
$btn-font-family: $input-btn-font-family;
$btn-font-size: $input-btn-font-size;
$btn-line-height: $input-btn-line-height;
$btn-padding-y-sm: $input-btn-padding-y-sm;
$btn-padding-x-sm: $input-btn-padding-x-sm;
$btn-font-size-sm: $input-btn-font-size-sm;
$btn-line-height-sm: $input-btn-line-height-sm;
$btn-padding-y-lg: $input-btn-padding-y-lg;
$btn-padding-x-lg: $input-btn-padding-x-lg;
$btn-font-size-lg: $input-btn-font-size-lg;
$btn-line-height-lg: $input-btn-line-height-lg;
$btn-border-width: $input-btn-border-width;
$btn-font-weight: $font-weight-normal;
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width: $input-btn-focus-width;
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
$btn-disabled-opacity: .65;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
$btn-link-disabled-color: $gray-600;
$btn-block-spacing-y: .5rem;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius-lg;
$btn-border-radius-sm: $border-radius-sm;
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
但似乎没有任何关于颜色的设置。我的 HTML 就像:
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
这是按钮的样子:
好吧,颜色就像我定义的那样,但我希望颜色是背景色[透明],实际颜色是白色。也许我只是错过了一些明显的事情——你知道如何解决这个问题吗?
注意:对每个生成的按钮都使用 !important 进行硬编码覆盖不是我正在寻找的解决方案。