У другій версії я міг би використовуватись

бейдж-важливий

Я бачу, що .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так, що він гарно масштабує, і в ньому все ще є "-кольорові" класи. Таким чином мітка краще масштабуватиметься до великих розмірів шрифту, а також їх можна пофарбувати за допомогою успішності етикетки, попередження про мітки тощо. Ось два приклади:

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

11.04.2014 : Ось оновлення того, чому перехресне запилення класів оповіщення .badgeне настільки велике. Я думаю, що ця картина підсумовує це:

Ці класи попередження не були розроблені для ознайомлення зі значками. Це надає їм "натяк" на передбачувані кольори, але врешті-решт консистенція викидається у вікно, і читабельність сумнівна. Ці знаки, які мають зловживання, не є візуально згуртованими.

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

Так, це найлегше поредактірует і падіння в цих .alert-xxxxxкласах - ви не повинні додати будь-які рядки CSS. Або ви могли б подбати про дрібниці та додати один рядок.

Якщо коротко: замініть 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

Прогрес-бар Docu: 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;}

Завантажувальна

Ще один можливий спосіб зробити кольори трохи інтенсивнішими - це такий:

<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 ), можливо, ви хочете бути трохи більш динамічними (шануйте існуючі змінні) та створювати всі контексти значків, використовуючи ту саму техніку, що і для міток:

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

Під час використання меншої версії ви можете імпортувати mixins.less та створювати власні класи для кольорових значків:

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

Те саме для інших кольорів; просто замініть попередження небезпекою, успіхом тощо.

Ну, це страшенно пізня відповідь, але я думаю, я все-таки покладу свої два центи ... Я міг би опублікувати це як коментар, оскільки ця відповідь по суті не додає жодного нового рішення, але це додає значення публікації як ще одна альтернатива. Але в коментарі я не зміг би дати всі деталі через обмеження кількості персонажів.

ПРИМІТКА. Для цього потрібно редагувати 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.

** PS: ** Обидва найкращі відповіді мають свої плюси і мінуси. Це просто так, як ви вважаєте за краще робити свій CSS, тому що немає "єдиного правильного способу" для цього.