如何使用 LESS 重新定义 Bootstrap 的 Button 背景？答案

【问题标题】：How do I redefine the Bootstrap's Button background using LESS?如何使用 LESS 重新定义 Bootstrap 的 Button 背景？
【发布时间】：2015-12-24 22:34:37
【问题描述】：

我想知道如何使用 LESS 重新定义 Button 的背景。从their's website，有一个btn-default-bg 属性，但它接受color。我要设置背景。

确实，我可以在我的 LESS 文件中重新定义 .btn-default 类，但这会导致将两个 .btn-default 类添加到包中。我只想要一个。

我怎样才能做到这一点？

PS： This guy 完全符合我的要求，他重新定义了 .btn-default 类，在生成的包中只有一个类。但是，他使用的是 SASS，我不知道它的行为是否有所不同。

【问题讨论】：

那个家伙完全按照你上面提到的做了——他只是创建了一个覆盖.btn-default 规则集。项目构建设置中使用的 CSS 缩小工具消除了他的输出 CSS 中重复的冗余规则集。
@seven-phases-max 谢谢.. 这是有道理的。如果您将其发布为答案，我会接受。

标签： css twitter-bootstrap less

【解决方案1】：

这是引导程序的 css .btn-default：

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
.btn-default:focus,
.btn-default.focus {
  color: #333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}
.btn-default:hover {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #333;
  background-color: #d4d4d4;
  border-color: #8c8c8c;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  background-color: #fff;
  border-color: #ccc;
}
.btn-default .badge {
  color: #fff;
  background-color: #333;
}

复制此代码，并更改您自己的 css 上的属性...

如果这不起作用，您可以在每个属性后使用!important，例如：

.btn-default{
    background: red !important;
}

希望对你有帮助..

【讨论】：

【解决方案2】：

我认为这是最好的解决方案。

.bgColor (@bg: #ff0000) {
    background-color: @bg;
}
.btn-default {
    .bgColor() !important;
}

【讨论】：