버전 2에서는 사용할 수 있습니다

배지 배지 중요

.badge 요소에 더 이상 상황에 맞는 (성공, 기본 등) 클래스가 없습니다.

버전 3에서 동일한 것을 어떻게 달성합니까?

예 : UI에 경고 배지와 중요한 배지를 원합니다

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>

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의 라인. 또는 작은 일에 대해 더 신경을 쓰고 한 줄을 추가 할 수도 있습니다.

한마디로 : 교체 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

부트 스트랩 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 's 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);
}

LESS 동등 물은 간단해야합니다.

위의 답변과 같지만 부트 스트랩 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);
}

다른 색상도 마찬가지입니다. 위험, 성공 등으로 경고를 교체하십시오.

글쎄, 이것은 끔찍한 답변이지만 여전히 2 센트를 넣을 것이라고 생각합니다 ...이 답변은 본질적으로 새로운 솔루션을 추가하지 않지만 게시물에 가치를 더하기 때문에 이것을 주석으로 게시 할 수 있습니다 또 다른 대안으로. 그러나 의견에서 문자 제한으로 인해 모든 세부 정보를 제공 할 수는 없습니다.

참고 : CSS 파일을 부트 스트랩하려면 편집해야합니다. .badge위의 스타일 정의를 이동하십시오..label-default . 제한된 테스트 변경으로 인해 실제 부작용을 찾을 수 없습니다.

반면 broc.seib의 솔루션은 CSS에 대한 최소한의 추가와 영업 이익의 요구 사항을 달성하기 위해 가장 좋은 방법은 아마도, 그냥 같은 모든에 여분의 CSS없이 같은 효과를 얻을 수있다 옌스 A. 코흐의 솔루션 또는 사용하여 .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 파일 뒤에로드하는 것이 었습니다. 이 접근법은 BS3를로드하기 위해 CDN을 사용할 때도 도움이됩니다.

** PS : ** 최고의 답변은 모두 장단점이 있습니다. "올바른 방법"이 없기 때문에 CSS를 선호하는 방식 일뿐입니다.