导入类将状态悬停到 中的其他类.少

Question

只是学习.less并在我的项目中使用twitters引导程序。

如果我在提交表单时发出绿色按钮，我必须写：

<input type="submit" value="submit" class="btn btn-success" />

但是我将能够跳过输入标签中的类属性。

我不会更改推特引导程序文件。我将在我的默认 .less 文件中重载它们，如下所示：

button, input[type="submit"]{ .btn; .btn-success; }

但是，我没有获得按钮的悬停状态和活动状态，如果我尝试这样做，则会出现错误：

button, input[type="submit"]{/* previus code... */ &:hover{ .btn:hover; }}

你可能会注意到我试图完成什么。我知道我可以在jquery或javascript中做到这一点，但是我将能够在我的.less-file中做到这一点，接触原始的bootsrap文件。

Answer 1

我不确定在不修改 Bootstrap CSS 的情况下是否可以做到这一点。

你能修改引导 CSS 吗？如果是这样，您可以在 .btn:hover 中添加一个 .btn-hover 类，然后在 button, input[type="submit"] 中：

&:hover {
    .btn-hover;
    .btn-success-hover;
}

Answer 2

.

btn和.btn-success是类。这些类在 buttons.less 中定义。他们从mixins调用mixin.less称为.buttonBackground。你可以为你的按钮调用这个混合：

button, input[type="submit"]{
     .buttonBackground(@startColor,@endColor);
}

@startColor 和 @endColor 用于按钮渐变，悬停状态使用@endColor。或者你可以将变量.less（btnInfoBackgroundHighlight）中的颜色更改为您自己的颜色。或者您可以使用

.btn-success{
      &:hover{
           background-color: @yourOwnColor;
      }
}