Twitter Bootstrap如何将徽章设置为无填充或轮廓？

Question

有人知道如何将Twitter Bootstrap的徽章（或标签）从实心改为轮廓吗？

- Meltemi

Answer 1

将此CSS类添加到您的徽章中：

.badge-outline {
    color: black;
    border: 1px solid #999;
    background-color: transparent;
}

为其他颜色创建覆盖类：

.badge-outline.badge-success {
    border-color: #468847;
}

- SJousse

Answer 2

Bootstrap 5内置了您想要的效果支持。 边框类不仅可以创建轮廓，还允许控制颜色和粗细。

这个例子在徽章上使用了border和border-primary来创建蓝色轮廓。为了让“3”与轮廓颜色相匹配，它还使用了text-primary。请注意，它只使用了badge类，而没有使用badge-primary，因为那样也会将背景颜色改为蓝色。

<span class="badge border border-primary text-primary">3</span>

- IAmNaN

---

我尝试使用 border-5 来调整轮廓的边框宽度，以影响边框的粗细。但是似乎在徽章轮廓中无效。 - Tore Aurstad

Answer 3

快速引导4 sass版本

@each $color, $value in $theme-colors {
  .badge-outline-#{$color} {
    border: $border-width solid $value;
    color: $value !important;
    background: transparent !important;
  }
}

- b4sass

Answer 4

徽章的Typical Bootstrap配置与您的问题相关，其关键部分包括以下内容（在其labels-badges.less中）：

当前的Bootstrap

.badge {
    color: @white;
    background-color: @grayLight;
    /* no border is set, just a border-radius: 9x */
}

.badge {
  // Important (red)
  &-important { background-color: @errorText; }
  &-important[href] { background-color: darken(@errorText, 10%); }

  // Warnings (orange)
  &-warning { background-color: @orange; }
  &-warning[href] { background-color: darken(@orange, 10%); }

  // Success (green)
  &-success { background-color: @successText; }
  &-success[href] { background-color: darken(@successText, 10%); }

  // Info (turquoise)
  &-info { background-color: @infoText; }
  &-info[href] { background-color: darken(@infoText, 10%); }

  // Inverse (black)
  &-inverse { background-color: @grayDark; }
  &-inverse[href] { background-color: darken(@grayDark, 10%); }
}

所以你可以通过以下方式覆盖它：

在后续的LESS代码中进行覆盖

.badge {
    color: @black;
    background-color: transparent;
    border: 1px solid @grayLight; /* set your border */
}

.badge {
  // Important (red)
  &-important { background-color: transparent;
                border-color: @errorText;
                color: #errorText; /* maybe change color? up to you. */
              }
  &-important[href] { background-color: transparent;
                      border-color: darken(@errorText, 10%); 
                      color: darken(@errorText, 10%); /* ??? */
              }

  etc... for -warning, -success, -info, -inverse
}

- ScottS