0

对于一个项目,我必须使用一些现成设计中的某些自定义颜色定义。这是我使用 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>

这是按钮的样子:

MDB 按钮

好吧,颜色就像我定义的那样,但我希望颜色是背景色[透明],实际颜色是白色。也许我只是错过了一些明显的事情——你知道如何解决这个问题吗?

注意:对每个生成的按钮都使用 !important 进行硬编码覆盖不是我正在寻找的解决方案。

4

1 回答 1

0

对我来说,只要我添加一些额外的引导类,它就可以工作:

<button type="button" class="btn btn-pink bg-pink text-white">Pink</button>
<button type="button" class="btn btn-purple bg-purple text-white">Purple</button>

仍然欢迎回答为什么这与文档不同。

于 2019-10-03T11:59:34.640 回答