ในรุ่นที่สองฉันสามารถใช้

ป้ายสถานะ - สำคัญ

ฉันเห็นว่าองค์ประกอบ .badge นั้นไม่มีคลาส (-success, -primary, etc .. ) อีกต่อไป

ฉันจะทำสิ่งเดียวกันในเวอร์ชัน 3 ได้อย่างไร

เช่น. ฉันต้องการป้ายเตือนและป้ายสำคัญใน UI ของฉัน

เพียงเพิ่มคลาสหนึ่งบรรทัดใน CSS ของคุณและใช้labelองค์ประกอบbootstrap

.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มันปรับขนาดได้อย่างดีและยังคงมีคลาส "-color" ทั้งหมด ดังนั้นฉลากจะปรับขนาดเป็นแบบอักษรที่ใหญ่กว่าให้ดีขึ้นและสามารถระบายสีด้วยความสำเร็จของป้ายกำกับการเตือนป้ายกำกับและอื่น ๆ ต่อไปนี้เป็นสองตัวอย่าง:

<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แก้ปัญหาเป็นการขยายการออกแบบ bootstrap เท่านั้น เรายังคงไม่หยุดยั้งในการตัดสินใจทั้งหมดโดยนักออกแบบ bootstrap นั่นคือการพิจารณาที่พวกเขาให้ความสามารถในการอ่านและการทำงานร่วมกันในทุกสีที่เป็นไปได้รวมถึงการเลือกสีด้วยตัวเอง .label-as-badgeชั้นเดียวเพิ่มมุมโค้งมนและไม่มีอะไรอื่น ไม่มีคำจำกัดความสีที่แนะนำ ดังนั้น CSS หนึ่งบรรทัด

ใช่มันง่ายกว่าที่จะแฮ็กออกไปและวางใน.alert-xxxxxคลาสเหล่านั้น- คุณไม่ต้องเพิ่มCSS ใด ๆเลย หรือคุณสามารถสนใจเพิ่มเติมเกี่ยวกับสิ่งเล็ก ๆ น้อย ๆ และเพิ่มหนึ่งบรรทัด

ในระยะสั้น: แทนที่badge-importantด้วยหรือalert-dangerprogress-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

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

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 ) คุณอาจต้องการที่จะมีพลังมากขึ้นเล็กน้อย (ให้เกียรติตัวแปรที่มีอยู่แล้ว) และสร้างบริบทตราทั้งหมดโดยใช้เทคนิคเดียวกับที่ใช้กับป้ายกำกับ:

// 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 ที่เทียบเท่าควรตรงไปตรงมา

ชอบคำตอบข้างต้น แต่ที่นี่ใช้ 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;
}

เมื่อใช้รุ่น LESS คุณสามารถนำเข้า mixins.less และสร้างคลาสของคุณเองสำหรับป้ายสี:

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

เหมือนกันสำหรับสีอื่น ๆ ; เพียงแค่เปลี่ยนคำเตือนด้วยอันตรายความสำเร็จ ฯลฯ

นี่เป็นคำตอบที่ล่าช้ามาก แต่ฉันคิดว่าฉันจะยังคงใส่สองเซ็นต์ไว้ใน ... ฉันสามารถโพสต์สิ่งนี้เป็นความคิดเห็นได้เนื่องจากคำตอบนี้ไม่ได้เพิ่มโซลูชันใหม่เป็นหลัก แต่มันเพิ่มมูลค่าให้กับโพสต์ เป็นอีกทางเลือกอื่น แต่ในความคิดเห็นฉันจะไม่สามารถให้รายละเอียดทั้งหมดได้เนื่องจากจำนวนอักขระสูงสุด

หมายเหตุ: นี้ต้องแก้ไขไปยังไฟล์บูต CSS - นิยามสไตล์ย้ายดังกล่าวข้างต้น.badge .label-defaultไม่พบผลข้างเคียงใด ๆ ในทางปฏิบัติเนื่องจากการเปลี่ยนแปลงในการทดสอบที่ จำกัด ของฉัน

ในขณะที่การแก้ปัญหาของ broc.seibน่าจะเป็นวิธีที่ดีที่สุดเพื่อให้บรรลุความต้องการของ OP ด้วยนอกจากนี้น้อยที่สุดเพื่อ CSS นั้นมันเป็นไปได้ที่จะบรรลุผลเช่นเดียวกันโดยไม่ต้อง CSS พิเศษใด ๆ เช่นเดียวกับการแก้ปัญหา Jens เอโคช์สหรือโดยใช้.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 เพราะไม่มี "วิธีที่ถูกต้องเท่านั้น" ในการทำเช่นนั้น