twitter-bootstrap - Twitter Bootstrap は、バッジを塗りつぶしなし (またはアウトライン) に設定しますか?

Question

Twitterのブートストラップバッジ（またはラベル）を実線から輪郭に変更する方法を知っている人はいますか?

Answer 1

この CSS クラスをバッジに追加します。

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

他の色のオーバーライド クラスを作成します。

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

Answer 2

バッジの一般的なブーストラップ構成には、質問に関連する次の重要な部分があります ( に展開されていますlabels-badges.less)。

現在のブートストラップ

.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
}