引导程序4-通过SASS修改禁用的按钮样式

Question

我正在使用bootstrap4，并尝试使用SASS更改一些按钮颜色。在我的自定义SCSS文件中，我有以下内容。。。

@import "node_modules/bootstrap/scss/bootstrap";
$theme-colors: (
"primary": red
);

编译时，此操作正常。现在我想以同样的方式修改主按钮的禁用状态。

我很难找到任何例子。有人能给我指一个吗？

Answer 1

button-variant@mixin用于构建按钮，默认情况下.disabled是背景颜色的变体。mixin没有用于禁用颜色的参数。

因此，您必须使用类似.btn-primary.disabled的选择器显式设置状态，并使用button-variant@mixin重新编译。例如，这里是将禁用状态更改为带有黑色边框的灰色背景。。。

$theme-colors: (
"primary": red
);
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
.btn-primary.disabled {
@include button-variant(grey, black);
}
@import "bootstrap";

演示：https://codeply.com/p/pi3OthqQos

---

相关问题：如何更改引导程序版本4按钮颜色

Answer 2

禁用按钮的可用变量：

用于更改禁用按钮的背景不透明度

`$btn-disabled-opacity` *Default value:* 0.65 

这用于更改禁用的链接按钮文本颜色(<a class="btn btn-primary disabled"> Disabled link </a>(

`$btn-link-disabled-color` *Default value* $gray-600

如果你想创建自己的引导主题，你可以看看这个在线生成器，他会帮助你使用变量名称和值