Na versão dois eu poderia usar

emblema emblema-importante

Vejo que o elemento .badge não possui mais classes contextuais (-success, -primary, etc.).

Como faço para conseguir a mesma coisa na versão 3?

Por exemplo. Quero emblemas de aviso e emblemas importantes na minha interface do usuário

Basta adicionar esta classe de uma linha ao seu CSS e usar o labelcomponente de autoinicialização .

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

Compare isso labele badgelado a lado:

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

Eles parecem iguais. Mas no CSS, ele é labelusado de emforma que ele seja dimensionado bem e ainda tenha todas as classes "-color". Portanto, o rótulo será melhor dimensionado para tamanhos de fonte maiores e poderá ser colorido com sucesso, aviso de etiqueta etc. Aqui estão dois exemplos:

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

Ou onde as coisas são maiores:

<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 : Examinando como faremos isso no Bootstrap 4

Parece que as .badgeaulas acabaram completamente. Mas há uma .label-pillclasse interna (aqui) que se parece com o que queremos.

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

Em uso, fica assim:

<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 : Aqui está uma atualização sobre por que as classes de alerta de polinização cruzada .badgenão são tão boas. Penso que esta imagem resume:

Essas classes de alerta não foram projetadas para usar crachás. Isso os renderiza com uma "dica" das cores pretendidas, mas no final a consistência é jogada pela janela e a legibilidade é questionável. Esses emblemas hackeados por alerta não são visualmente coesos.

A .label-as-badgesolução está estendendo apenas o design da inicialização. Mantemos intactas todas as decisões tomadas pelos designers de inicialização, a saber, a consideração que eles deram à legibilidade e à coesão em todas as cores possíveis, bem como as próprias opções de cores. A .label-as-badgeturma apenas adiciona cantos arredondados e nada mais. Não há definições de cores introduzidas. Assim, uma única linha de CSS.

Sim, é mais fácil simplesmente cortar e soltar nessas .alert-xxxxxclasses - você não precisa adicionar nenhuma linha de CSS. Ou você pode se importar mais com as pequenas coisas e adicionar uma linha.

Resumindo: substitua badge-importantpor alert-dangerou progress-bar-danger.

É assim: Bootply Demo .

Você pode combinar a classe CSS badgecom alert-*ou progess-bar-*para colori-los:

Com 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

Alertas Docu: http://getbootstrap.com/components/#alerts

Com class="badges progress-bar-*"(como sugerido por @ 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

Documento da barra de progresso: http://getbootstrap.com/components/#progress-alternatives

O Bootstrap 3 removeu essas opções de cores para crachás. No entanto, podemos adicionar esses estilos manualmente. Aqui está a minha solução, e aqui está o 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;
}

As classes de contexto para badgesão realmente removidas do Bootstrap 3, então você teria que adicionar algum CSS personalizado para criar o mesmo efeito como ...

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

Bootply

Outra maneira possível, para tornar as cores um pouco mais intensas, é esta:

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

Consulte Bootply

Se estiver usando uma versão do SASS (por exemplo, a de thomas-mcdonald ), convém ser um pouco mais dinâmico (honrar as variáveis ​​existentes) e criar todos os contextos de crachá usando a mesma técnica usada para rótulos:

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

O equivalente a MENOS deve ser direto.

Como a resposta acima, mas aqui está usando os nomes e cores do 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;
}

Ao usar a versão LESS, você pode importar mixins.less e criar suas próprias classes para emblemas coloridos:

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

O mesmo para as outras cores; apenas substitua aviso por perigo, sucesso, etc.

Bem, esta é uma resposta terrivelmente tardia, mas acho que ainda colocarei meus dois centavos ... Eu poderia ter postado isso como um comentário, porque essa resposta não adiciona essencialmente nenhuma nova solução, mas agrega valor à postagem ainda mais uma alternativa. Mas em um comentário, eu não seria capaz de fornecer todos os detalhes por causa do limite de caracteres.

NOTA: Isso precisa de uma edição para inicializar o arquivo CSS - mova as definições de estilo .badgeacima .label-default. Não foi possível encontrar efeitos colaterais práticos devido à alteração em meus testes limitados.

Embora a solução do broc.seib seja provavelmente a melhor maneira de atingir o requisito do OP com adição mínima ao CSS, é possível obter o mesmo efeito sem nenhum CSS extra, exatamente como a solução de Jens A. Koch ou usando .label-xxxclasses contextuais porque elas são fáceis de lembrar em comparação com as progress-bar-xxxaulas. Não acho que as .alert-xxxaulas tenham o mesmo efeito.

Tudo que você tem a fazer é usar apenas .badgee .label-xxxaulas juntos (mas nesta ordem). Não se esqueça de fazer as alterações mencionadas na NOTA acima.

<a href="#">Inbox <span class="badge label-warning">42</span></a> se parece com isso:

IMPORTANTE: Esta solução pode alterar seus estilos se você decidir atualizar e esquecer de fazer as alterações no seu novo arquivo CSS local. Minha solução para esse desafio foi copiar todos os .label-xxxestilos no meu arquivo CSS personalizado e carregá-lo após todos os outros arquivos CSS. Essa abordagem também ajuda quando eu uso uma CDN para carregar o BS3.

** PS: ** Ambas as respostas mais bem avaliadas têm seus prós e contras. É exatamente assim que você prefere fazer o seu CSS, porque não existe "a única maneira correta" de fazê-lo.