Twitter Bootstrap 中的所有按钮悬停样式

Question

我想更改悬停按钮的默认样式（Bootstrap v3.2）。默认情况下，它变得更暗。假设我想让它更轻。

我查看了Buttons Less variables，但没有看到按钮悬停样式选项。

在 SASS 中我可以做到：

@import "packages/stylesheets/bootstrap/bootstrap";

.btn {
  &:hover {
    background: yellow;
  }
}

但它将所有按钮背景更改为定义的颜色（在本例中为黄色）。

是否可以对所有按钮执行此操作？

我发现 id 的唯一解决方案是这样为每种类型的按钮执行此操作，但我希望可以对所有按钮执行此操作更简单一些：

@import "packages/stylesheets/bootstrap/bootstrap";

.btn-primary {
  &:hover {
    background: lighten($btn-primary-bg, 5%);
  }
}
.btn-success {
  &:hover {
    background: lighten($btn-success-bg, 5%);
  }
}

Answer 1

虽然 Marcin 的解决方案可行，但正如他所说，它不是很优雅，因为您将修改引导程序的源代码，并且一旦更新 bs 的基础，您将失去所有编辑。

为了正确自定义按钮悬停，您需要做的是，定义一个名为“_buttons.scss”的新文件，并将其包含在您正在使用的主引导/主文件中（通常是一个包含基础助推器 + 定制部件）：

// Base bootstrap 3
@import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
// My custom buttons
@import "_buttons.scss"

通过这种方式，您将覆盖默认样式，以便让您的默认引导元素的外观和感觉，并保持基本引导文件完整，以便您可以更新它，而不必担心下次更新会覆盖您的更改。

现在，你的部分： 在 _buttons.scss 中定义你提到的悬停：

// My custom variation for btn-primary
.btn-primary {
  &:hover {
    background: lighten($btn-primary-bg, 5%);
  }
}

如果您想在全局级别上执行此操作，只需简单地更新负责在覆盖文件中输出按钮的 mixin，这样就可以了（如果您遵循 Bootstrap 的默认命名空间，例如在您的自定义样式文件夹中） : myproject/assets/scss/mixins/_buttons.scss)

// My custom mixin for button-variant override file
// I only include the part i want to customize
// In this case, i want to customize background-color 
@mixin button-variant($color, $background, $border) {
  &:hover {
    background-color: darken($background, 40%);
  }
}

.. 并将其包含到您的主文件中

// Base bootstrap 3
@import "./vendor/bower_components/bootstrap-sass/assets/stylesheets/bootstrap.scss";
// My custom buttons
@import "_buttons.scss"
@import "mixins/_buttons.scss"

这样你： 1) 更新完成后能够更新引导程序库 2) 能够将您的自定义按钮样式保存在一个文件中，如果您决定稍后更新它，您可以轻松找到它 3) 能够为不同的项目使用相同的引导程序库（如果需要）

希望对你有帮助 干杯 M.

Answer 2

我找到的解决方案不是很优雅（您需要修改引导文件）但它可以工作。

你需要转到mixins/_buttons.scss文件然后更改：

background-color: darken($background, 10%);

进入

background-color: lighten($background, 10%);

它应该为所有按钮完成这项工作。