Trong phiên bản hai tôi có thể sử dụng

huy hiệu quan trọng

Tôi thấy rằng phần tử .badge không còn có các lớp theo ngữ cảnh (-success, -primary, v.v.).

Làm thế nào để tôi đạt được điều tương tự trong phiên bản 3?

Ví dụ. Tôi muốn phù hiệu cảnh báo và huy hiệu quan trọng trong giao diện người dùng của tôi

Chỉ cần thêm lớp một dòng này trong CSS của bạn và sử dụng labelthành phần bootstrap .

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

So sánh điều này labelvà badgecạnh nhau:

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

Chúng xuất hiện giống nhau. Nhưng trong CSS, labelsử dụng emđể nó có tỷ lệ độc đáo và nó vẫn có tất cả các lớp "màu". Vì vậy, nhãn sẽ mở rộng kích thước phông chữ lớn hơn tốt hơn và có thể được tô màu bằng nhãn thành công, cảnh báo nhãn, v.v ... Dưới đây là hai ví dụ:

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

Hoặc nơi mọi thứ lớn hơn:

<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 : Xem cách chúng tôi sẽ làm điều này trong Bootstrap 4

Hình như .badgecác lớp học đã hoàn toàn biến mất. Nhưng có một .label-pilllớp tích hợp (ở đây) trông giống như những gì chúng ta muốn.

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

Trong sử dụng, nó trông như thế này:

<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 : Đây là bản cập nhật về lý do tại sao các lớp cảnh báo thụ phấn chéo .badgekhông quá tuyệt vời. Tôi nghĩ rằng hình ảnh này tổng hợp nó:

Những lớp cảnh báo không được thiết kế để đi kèm với phù hiệu. Nó ám chỉ chúng bằng một "gợi ý" về màu sắc dự định, nhưng cuối cùng tính nhất quán bị ném ra ngoài cửa sổ và khả năng đọc là nghi vấn. Những huy hiệu bị tấn công cảnh báo không gắn kết trực quan.

Các .label-as-badgegiải pháp được chỉ mở rộng thiết kế bootstrap. Chúng tôi đang giữ nguyên vẹn tất cả các quyết định được đưa ra bởi các nhà thiết kế bootstrap, cụ thể là sự cân nhắc mà họ đưa ra cho khả năng đọc và gắn kết trên tất cả các màu có thể, cũng như các lựa chọn màu sắc. Các .label-as-badgelớp chỉ thêm các góc tròn, và không có gì khác. Không có định nghĩa màu giới thiệu. Do đó, một dòng CSS duy nhất.

Đúng, việc hack và thả vào các .alert-xxxxxlớp đó sẽ dễ dàng hơn - bạn không phải thêm bất kỳ dòng CSS nào. Hoặc bạn có thể quan tâm nhiều hơn về những điều nhỏ nhặt và thêm một dòng.

Nói tóm lại: Thay thế badge-importantvới một trong hai alert-dangerhoặc progress-bar-danger.

Nó trông như thế này: Bootply Demo .

Bạn có thể kết hợp lớp CSS badgevới alert-*hoặc progess-bar-*tô màu chúng:

Với 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

Cảnh báo Docu: http://getbootstrap.com/components/#alerts

Với class="badges progress-bar-*"(như được đề xuất bởi @ 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

Tiến trình-Bar Docu: http://getbootstrap.com/components/#proTHER-alternigin

Bootstrap 3 đã loại bỏ các tùy chọn màu sắc cho phù hiệu. Tuy nhiên, chúng ta có thể thêm các kiểu đó bằng tay. Đây là giải pháp của tôi và đây là Thùng rác :

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

Các lớp ngữ cảnh badgethực sự bị xóa khỏi Bootstrap 3, vì vậy bạn phải thêm một số CSS tùy chỉnh để tạo hiệu ứng tương tự như ...

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

Bootply

Một cách khác có thể, để làm cho màu sắc mạnh hơn một chút, là cách này:

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

Xem Bootply

Nếu sử dụng phiên bản SASS (ví dụ: phiên bản của thomas-mcdonald ), thì bạn có thể muốn năng động hơn một chút (tôn vinh các biến hiện có) và tạo tất cả bối cảnh huy hiệu bằng cách sử dụng kỹ thuật tương tự như được sử dụng cho nhãn:

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

Tương đương LESS nên đơn giản.

Giống như câu trả lời ở trên nhưng ở đây đang sử dụng bootstrap 3 tên và màu sắc:

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

Khi sử dụng phiên bản LESS, bạn có thể nhập mixins.less và tạo các lớp của riêng bạn cho huy hiệu màu:

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

Tương tự cho các màu khác; chỉ cần thay thế cảnh báo bằng nguy hiểm, thành công, vv

Chà, đây là một câu trả lời muộn khủng khiếp nhưng tôi nghĩ tôi vẫn sẽ đưa hai xu của mình vào ... Tôi có thể đã đăng bài này dưới dạng một bình luận vì câu trả lời này về cơ bản không thêm bất kỳ giải pháp mới nào nhưng nó làm tăng giá trị cho bài đăng như một sự thay thế khác. Nhưng trong một bình luận tôi sẽ không thể đưa ra tất cả các chi tiết vì giới hạn ký tự.

LƯU Ý: Điều này cần chỉnh sửa để khởi động tệp CSS - di chuyển các định nghĩa kiểu cho .badgeở trên .label-default. Không thể tìm thấy bất kỳ tác dụng phụ thực tế nào do sự thay đổi trong thử nghiệm hạn chế của tôi.

Mặc dù giải pháp của broc.seib có lẽ là cách tốt nhất để đạt được yêu cầu của OP với việc bổ sung tối thiểu vào CSS, nhưng có thể đạt được hiệu quả tương tự mà không cần bất kỳ CSS bổ sung nào giống như giải pháp của Jens A. Koch hoặc bằng cách sử dụng .label-xxxcác lớp theo ngữ cảnh bởi vì chúng rất dễ nhớ so với progress-bar-xxxcác lớp học. Tôi không nghĩ rằng .alert-xxxcác lớp học cho hiệu quả tương tự.

Tất cả bạn phải làm chỉ là sử dụng .badgevà .label-xxxcác lớp với nhau (nhưng theo thứ tự này). Đừng quên thực hiện các thay đổi được đề cập trong LƯU Ý ở trên.

<a href="#">Inbox <span class="badge label-warning">42</span></a> trông như thế này:

QUAN TRỌNG: Giải pháp này có thể phá vỡ phong cách của bạn nếu bạn quyết định nâng cấp và quên thực hiện các thay đổi trong tệp CSS cục bộ mới của mình. Giải pháp của tôi cho thử thách này là sao chép tất cả các .label-xxxkiểu trong tệp CSS tùy chỉnh của tôi và tải nó sau tất cả các tệp CSS khác. Cách tiếp cận này cũng hữu ích khi tôi sử dụng CDN để tải BS3.

** PS: ** Cả hai câu trả lời được xếp hạng hàng đầu đều có ưu và nhược điểm. Đó chỉ là cách bạn thích làm CSS của mình vì không có "cách duy nhất đúng" để làm điều đó.