Question

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

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

在SASS我可以这样做：

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

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

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

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

我发现唯一的解决方案是这样对每种类型的按钮这样做但我希望可以为所有按钮做一点简单：

@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”的新文件，并将其包含在您正在使用的主引导程序/主文件中（通常是包含的文件）基础boostrap +定制部分）：

// 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）更新完成后能够更新bootstrap base 2）能够将您的自定义按钮样式保存在一个文件中，如果您决定稍后更新它，您可以轻松找到它 3）能够为不同的项目使用相同的bootstrap基础（如果需要）

希望它有所帮助干杯微米。

Answer 2

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

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

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

到

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

它应该完成所有按钮的工作。

所有按钮都在Twitter Bootstrap中悬停样式

2 个答案: