css - 如何使用LESS重新定义Bootstrap的Button背景？

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

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

如何用更少的钱实现这一目标？

PS：This guy完全按照我的意愿去做，他重新定义了.btn-default类，并且在结果包中只有一个类。但是，他使用的是SASS，我不知道它的行为是否有所不同。

最佳答案

这是bootstrap的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;
}

希望对您有帮助。

关于css - 如何使用LESS重新定义Bootstrap的Button背景？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34406672/