Question

我的剃刀页面中有一个bootstrap buttongroup，如下所示：

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default  btn-na">
        <input id="NA" name="Selection" type="radio" value="NA"> NA
    </label>
    <label class="btn btn-default  btn-yes">
        <input id="Yes" name="Selection" type="radio" value="Yes"> Yes
    </label>
    <label class="btn btn-default  btn-no">
        <input id="No" name="Selection" type="radio" value="No"> No
    </label>
    <label class="btn btn-default  btn-maybe">
        <input id="Maybe" name="Selection" type="radio" value="Maybe"> Maybe
    </label>
</div>

要求是使每个按钮的颜色如下所示（仅当它们是＆＃34;选择＆＃34; /＆＃34;活动＆＃34;）。不是＆＃34;活跃＆＃34;按钮获取默认引导颜色：

btn-na -> blue (only when active)
btn-yes -> green (only when active)
btn-no -> red (only when active)
btn-maybe -> yellow (only when active)

更新1： 从@juzraai获得想法后，我更新的scss文件如下，不幸的是很长而且没有＆＃34; DRY＆＃34;正如我所希望的那样。我已经覆盖了引导程序，因此选择了＃34; /＆＃34;活跃＆＃34;按钮颜色不同：

.btn-na:active,
.btn-na.active,
.btn-na:active:focus,
.btn-na:active.focus,
.btn-na.active:focus,
.btn-na.active.focus
{
    background-color: #00ace6;
}

.btn-na:active:hover,
.btn-na.active:hover
{
    background-color: #0099cc;
}

.btn-yes:active,
.btn-yes.active,
.btn-yes:active:focus,
.btn-yes:active.focus,
.btn-yes.active:focus,
.btn-yes.active.focus
{
    background-color: #39ac73;
}

.btn-yes:active:hover,
.btn-yes.active:hover
{
    background-color: #339966;
}

.btn-no:active,
.btn-no.active,
.btn-no:active:focus,
.btn-no:active.focus,
.btn-no.active:focus,
.btn-no.active.focus
{
    background-color: #ff8080;
}

.btn-no:active:hover,
.btn-no.active:hover
{
    background-color: #ff6666;
}

.btn-maybe:active,
.btn-maybe.active,
.btn-maybe:active:focus,
.btn-maybe:active.focus,
.btn-maybe.active:focus,
.btn-maybe.active.focus
{
    background-color: #ffdb4d;
}

.btn-maybe:active:hover,
.btn-maybe.active:hover
{
    background-color: #ffcc00;
}

我找到了一种在线尝试引导程序的方法（链接如下）。这是按预期工作但不优雅：

https://www.bootply.com/oBNsHuNBMx

更新2： 根据@ juzraai的mixin解决方案，我的最终scss如下：

@mixin b($c1, $c2) {
  &.active {
    &:active, &.active, &:focus, &.focus { background-color: $c1; }
    &:hover { background-color: $c2; }
  }
}

.btn {
    &.btn-na { @include b(#1ac6ff, #00ace6); }
    &.btn-yes { @include b(#53c68c, #39ac73); }
    &.btn-no { @include b(#ffb3b3, #ff8080); }
    &.btn-maybe { @include b(#ffe680, #ffdb4d); }
}

下面的工作示例：

http://jsfiddle.net/pateegutee/7nyddj8p/

Answer 1

我希望得到更优雅的scss代码，为每个按钮应用不同的颜色

好吧，我会使用mixin和references to parent selector：

来实现

@mixin b($c1, $c2) {
  &:active, &.active, &:focus, &.focus { background-color: $c1 !important; }
  &:hover { background-color: $c2 !important; }
}

.btn {
    &.btn-default { @include b($colorLtBlue,  $colorBlue); }
    &.btn-na      { @include b($colorLtBlue,  $colorBlue); }
    &.btn-yes     { @include b($colorLtGreen, $colorGreen); }
    // ...
}

工作示例：

.btn.btn-default:active, .btn.btn-default.active, .btn.btn-default:focus, .btn.btn-default.focus {
  background-color: lightblue !important;
}
.btn.btn-default:hover {
  background-color: blue !important;
}
.btn.btn-na:active, .btn.btn-na.active, .btn.btn-na:focus, .btn.btn-na.focus {
  background-color: lightblue !important;
}
.btn.btn-na:hover {
  background-color: blue !important;
}
.btn.btn-yes:active, .btn.btn-yes.active, .btn.btn-yes:focus, .btn.btn-yes.focus {
  background-color: lightgreen !important;
}
.btn.btn-yes:hover {
  background-color: green !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-default">default</button>
<button class="btn btn-na">na</button>
<button class="btn btn-yes">yes</button>
<br>
<button class="btn btn-default active">default</button>
<button class="btn btn-na active">na</button>
<button class="btn btn-yes active">yes</button>

Bootstrap＆＃34;按钮组＆＃34;每种不同颜色＆＃34;活跃＆＃34;按键

1 个答案: