css - 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 的解决方案可行，但正如他所提到的，它不是很优雅，因为您将修改 bootstrap 的源代码，并且一旦更新 bs 的基础，您将丢失所有编辑。

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

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

通过这种方式，您可以覆盖默认样式以获得默认 Bootstrap 元素的外观和感觉，并保持基本 Bootstrap 文件完好无损，这样您就可以更新它而不必担心您会在下一次更新时覆盖您的更改。

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

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

如果您想在全局级别执行此操作，只需简单地更新覆盖文件中负责按钮输出的混音，这样就可以了(如果您遵循 Bootstrap 的默认命名空间，例如在您的自定义样式文件夹中: 我的元素/ 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) 更新完成后能够更新 bootstrap base 2) 能够将您的自定义按钮样式保存在一个文件中，如果您决定以后更新它，您可以很容易地找到它 3)能够为不同的元素使用相同的 Bootstrap 库(如果需要)

希望对你有帮助 干杯