Question

我创建了以下SCSS来制作曾经是Boostrap 3中的btn-default外观。如果我直接在页面上使用按钮，它会按预期显示。但是，如果我在桌子或卡片内部使用，那么我看到的只是边框文本。背景是透明的，字体颜色是蓝色，而不是黑色。

以下是我添加的内容。

.btn-default {
    @extend .btn;
    border-color: #BCBCBC;
}

这就是我使用它的方式。

<button type="button" id="btnReset" class="btn-default btn-sm">
    <span class="fas fa-sync-alt" aria-hidden="true"></span> Reset
</button>

更新 - 修正

根据以下建议，这就是我提出的建议。它不完全是BS3的颜色，但我喜欢它比BS3使用的颜色稍暗。

.btn-default {
    $color-bg: #DCDCDC;
    $color-border: #BCBCBC;
    $hover-bg: #BFBFBF;
    $active-bg: #BFBFBF;

    @include button-variant( $color-bg, $color-border, $hover-bg, darken($color-border, 10%), $active-bg, darken($color-border, 12.5%) );
}

Answer 1

要创建新的按钮样式，您必须使用随Bootstrap 4提供的button-variant mixin。

例如;这就是我创建白色按钮的方式。

.btn-white {
    $color-bg: #ffffff;
    $color-border: $border-color;
    $hover-bg: #84898F;
    $active-bg: #84898F;

    @include button-variant(
            $color-bg,
            $color-border,
            $hover-bg,
            darken($color-border, 10%),
            $active-bg,
            darken($color-border, 12.5%)
    );
}

这只会将 color 样式应用于按钮类，但它仍然看起来像Bootstrap 4按钮。

Bootstrap 4中没有任何内容可以帮助您将特定按钮样式的外观恢复为Bootstrap 3.您只需手动将想要自己的样式应用到班级。

Answer 2

这基本上与以下内容重复：How to set custom button text color in Bootstrap 4 and Sass?

以下是btn-default ...

专门做的事情

.btn-default {
    @include button-variant(#ffffff, #cccccc, #e6e6e6, #adadad, #e6e6e6, #adadad);
}

然后它可以在任何地方使用： https://www.codeply.com/go/luuFNjrIpt

桌面或卡片中没有显示Bootstrap SASS自定义按钮？

2 个答案: