ป้าย
เอกสารประกอบและตัวอย่างสำหรับป้าย ส่วนประกอบการนับจำนวนเล็กน้อยและการติดฉลากของเรา
มาตราส่วนตราเพื่อให้ตรงกับขนาดขององค์ประกอบหลักในทันทีโดยใช้ขนาดแบบอักษรสัมพันธ์และemหน่วย
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>สามารถใช้ตราเป็นส่วนหนึ่งของลิงก์หรือปุ่มเพื่อจัดเตรียมตัวนับ
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>โปรดทราบว่าขึ้นอยู่กับวิธีการใช้งาน ป้ายสถานะอาจสร้างความสับสนให้กับผู้ใช้โปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลือที่คล้ายคลึงกัน แม้ว่าการจัดสไตล์ของป้ายจะสื่อให้เห็นถึงจุดประสงค์ แต่ผู้ใช้เหล่านี้ก็จะได้รับการนำเสนอด้วยเนื้อหาของป้าย ป้ายเหล่านี้อาจดูเหมือนสุ่มคำหรือตัวเลขเพิ่มเติมที่ท้ายประโยค ลิงก์ หรือปุ่ม ทั้งนี้ขึ้นอยู่กับสถานการณ์
เว้นแต่บริบทจะชัดเจน (เช่นเดียวกับตัวอย่าง "การแจ้งเตือน" ซึ่งเข้าใจว่า "4" คือจำนวนการแจ้งเตือน) ให้พิจารณารวมบริบทเพิ่มเติมด้วยข้อความเพิ่มเติมที่ซ่อนอยู่
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
<span class="sr-only">unread messages</span>
</button>เพิ่มคลาสตัวปรับแต่งที่กล่าวถึงด้านล่างเพื่อเปลี่ยนรูปลักษณ์ของตราสัญลักษณ์
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก
การใช้สีเพื่อเพิ่มความหมายเป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่แสดงด้วยสีนั้นชัดเจนจากเนื้อหา (เช่น ข้อความที่มองเห็นได้) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.sr-onlyชั้นเรียน
ใช้.badge-pillคลาสตัวปรับแต่งเพื่อทำให้ตราสัญลักษณ์มีความโค้งมนมากขึ้น (ด้วยborder-radiusแนวนอนที่ใหญ่ขึ้นและเพิ่มเติมpadding) มีประโยชน์หากคุณพลาดป้ายจาก v3
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>.badge-*การใช้ คลาสตามบริบท ใน <a>องค์ประกอบจะทำให้ ป้ายสถานะ ดำเนินการ ได้อย่างรวดเร็ว ด้วยสถานะโฮเวอร์และโฟกัส
<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>