Во второй версии я мог бы использовать

знак значок важный

Я вижу, что элемент .badge больше не имеет контекстных (-success, -primary и т. Д.) Классов.

Как мне добиться того же в версии 3?

Например. Я хочу предупреждающие значки и важные значки в моем интерфейсе

Просто добавьте этот однострочный класс в свой CSS и используйте 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так , что весы хорошо, и она до сих пор все «-Цвет» классов. Таким образом, метка будет лучше масштабироваться до больших размеров шрифта и может быть окрашена с помощью label-success, label-warning и т.д. Вот два примера:

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

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

04.11.2014 : Вот обновленная информация о том, почему перекрестные опыления с классами оповещений .badgeне так хороши. Я думаю, что эта картина подводит итог:

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

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

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

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

Это выглядит так: Bootply Demo .

Вы можете объединить класс 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

Прогресс-бар Документ: http://getbootstrap.com/components/#progress-alternatives

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

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

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

Bootply

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

<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

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

// 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);
}

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

Как и ответ выше, но здесь используются имена и цвета начальной загрузки 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;
}

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

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

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

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

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

Хотя решение broc.seib, вероятно, является наилучшим способом достижения требований OP с минимальным добавлением к CSS, можно достичь того же эффекта без какого-либо дополнительного CSS, как решение Jens A. Koch или используя .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.

** PS: ** У обоих самых рейтинговых ответов есть свои плюсы и минусы. Это просто способ, которым вы предпочитаете делать свой CSS, потому что не существует «единственно правильного» способа сделать это.