Question

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

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

如何以更少的成绩实现这一目标？

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

Answer 1

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

我希望它可以帮助你......

Answer 2

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

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

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

2 个答案: