Ответ 1

Просто добавьте этот однострочный класс в свой CSS и используйте компонент bootstrap label.

.label-as-badge {
    border-radius: 1em;
}

Сравните это label и badge бок о бок:

<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span>

Они выглядят одинаково. Но в CSS label использует em, поэтому он отлично масштабируется и все еще имеет все классы "-цвет". Таким образом, метка будет масштабироваться до большего размера шрифта и может быть окрашена ярлыком-успехом, предупреждением ярлыка и т.д. Вот два примера:

<span class="label label-success label-as-badge">Yay! Rah!</span>

Или где вещи больше:

<div style="font-size: 36px"><!-- pretend an enclosing class has big font size -->
    <span class="label label-success label-as-badge">Yay! Rah!</span>
</div>

11/16/2015: Посмотрим, как мы это сделаем в Bootstrap 4

Похоже, что классы .badge полностью исчезли. Но есть встроенный .label-pill класс (здесь), который выглядит так, как мы хотим.

.label-pill {
  padding-right: .6em;
  padding-left: .6em;
  border-radius: 10rem;
}

При использовании он выглядит так:

<span class="label label-pill label-default">Default</span>
<span class="label label-pill label-primary">Primary</span>
<span class="label label-pill label-success">Success</span>
<span class="label label-pill label-info">Info</span>
<span class="label label-pill label-warning">Warning</span>
<span class="label label-pill label-danger">Danger</span>

11/04/2014: здесь обновлено, почему кросс-опыливающие классы предупреждений с .badge не так велики. Я думаю, что это изображение подводит итог:

Эти классы предупреждения не предназначены для использования с значками. Он отображает их с "намеком" о намеченных цветах, но в итоге консистенция выбрасывается из окна, и читаемость сомнительна. Эти брандмауэры с брандмауэром не являются визуально сплоченными.

Решение .label-as-badge только расширяет дизайн бутстрапа. Мы не нарушаем все решения, принятые дизайнерами бутстрапов, а именно внимание, которое они уделяют читаемости и сплоченности во всех возможных цветах, а также сами цветовые решения. Класс .label-as-badge добавляет только закругленные углы, и ничего больше. Внесены определения цвета. Таким образом, одна строка CSS.

Да, проще просто взломать и сбросить те классы .alert-xxxxx - вам не нужно добавлять строки CSS. Или вы можете больше заботиться о мелочах и добавить одну строку.

Ответ 2

Вкратце: замените badge-important на alert-danger или progress-bar-danger.

Он выглядит так: Демо-версия для загрузки.

Вы можете объединить CSS-класс badge с alert-* или progess-bar-*, чтобы покрасить их:

С class="badges alert-*"

  <span class="badge alert-info">badge</span> Info
  <span class="badge alert-success">badge</span> Success 
  <span class="badge alert-danger">badge</span> Danger   
  <span class="badge alert-warning">badge</span> Warning

Оповещения Docu: http://getbootstrap.com/components/#alerts

С class="badges progress-bar-*" (как предложено @clami219)

  <span class="badge progress-bar-info">badge</span> Info
  <span class="badge progress-bar-success">badge</span> Success
  <span class="badge progress-bar-danger">badge</span> Danger
  <span class="badge progress-bar-warning">badge</span> Warning

Progress-Bar Docu: http://getbootstrap.com/components/#progress-alternatives

Ответ 3

Bootstrap 3 удалил эти параметры цвета для значков. Однако мы можем добавить эти стили вручную. Здесь мое решение, и вот JS Bin:

.badge {
  padding: 1px 9px 2px;
  font-size: 12.025px;
  font-weight: bold;
  white-space: nowrap;
  color: #ffffff;
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}
.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}

Ответ 4

Контекстные классы для badge действительно удалены из Bootstrap 3, поэтому вам нужно добавить некоторый пользовательский CSS, чтобы создать тот же эффект, что и...

.badge-important{background-color:#b94a48;}

Bootply

Ответ 5

Другим возможным способом, чтобы сделать цвета немного более интенсивными, является следующий:

<span class="badge progress-bar-info">10</span>
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>

См. Bootply

Ответ 6

Если вы используете версию SASS (например: thomas-mcdonald one), то вам может потребоваться немного более динамично (соблюдать существующие переменные) и создавать все контексты значков используя тот же метод, что и для меток:

// Colors
// Contextual variations of badges
// Bootstrap 3.0 removed contexts for badges, we re-introduce them, based on what is done for labels
.badge-default {
  @include label-variant($label-default-bg);
}

.badge-primary {
  @include label-variant($label-primary-bg);
}

.badge-success {
  @include label-variant($label-success-bg);
}

.badge-info {
  @include label-variant($label-info-bg);
}

.badge-warning {
  @include label-variant($label-warning-bg);
}

.badge-danger {
  @include label-variant($label-danger-bg);
}

Меньший эквивалент должен быть простым.

Ответ 7

Как и ответ выше, но здесь используются имена и цвета bootstrap 3:

/*css to add back colours for badges and make use of the colours*/
.badge-default {
  background-color: #999999;
}

.badge-primary {
  background-color: #428bca;
}

.badge-success {
  background-color: #5cb85c;
}

.badge-info {
  background-color: #5bc0de;
}

.badge-warning {
  background-color: #f0ad4e;
}

.badge-danger {
  background-color: #d9534f;
}

Ответ 8

При использовании версии LESS вы можете импортировать mixins.less и создавать свои собственные классы для цветных значков:

.badge-warning {
    .label-variant(@label-warning-bg);
}

То же самое для других цветов; просто замените предупреждение опасностью, успехом и т.д.

Ответ 9

Ну, это ужасно поздний ответ, но я думаю, что я все равно положу свои два цента... Я мог бы разместить это как комментарий, потому что этот ответ существенно не добавляет никакого нового решения, но он добавляет ценность на эту должность в качестве еще одной альтернативы. Но в комментарии я не смог бы дать все детали из-за ограничения характера.

ПРИМЕЧАНИЕ. Для этого требуется отредактировать файл bootstrap CSS - переместите определения стиля для .badge выше .label-default. Не удалось найти никаких практических побочных эффектов из-за изменения моего ограниченного тестирования.

Хотя решение broc.seib, вероятно, лучший способ достичь требования OP с минимальным добавлением к CSS, можно добиться такого же эффекта без каких-либо дополнительных CSS вообще, как решение Йенса А. Коха или используя контекстные классы .label-xxx, потому что их легко запомнить по сравнению с классами progress-bar-xxx. Я не думаю, что классы .alert-xxx дают тот же эффект.

Все, что вам нужно сделать, это просто использовать классы .badge и .label-xxx вместе (но в этом порядке). Не забудьте внести изменения, упомянутые в ПРИМЕЧАНИЕ выше.

<a href="#">Inbox <span class="badge label-warning">42</span></a> выглядит следующим образом:

ВАЖНО: это решение может нарушить ваши стили, если вы решите обновить и забыть внести изменения в новый локальный файл CSS. Моим решением для этой задачи было скопировать все стили .label-xxx в мой пользовательский файл CSS и загрузить его после всех других файлов CSS. Этот подход также помогает, когда я использую CDN для загрузки BS3.

** P.S: ** Оба лучших ответа имеют свои плюсы и минусы. Это так, как вы предпочитаете делать свой CSS, потому что для этого нет "только правильного пути".