Source

ป้าย

เอกสารประกอบและตัวอย่างสำหรับป้าย การนับจำนวนเล็กน้อยและส่วนประกอบการติดฉลากของเรา

ตัวอย่าง

มาตราส่วนตราเพื่อให้ตรงกับขนาดขององค์ประกอบหลักในทันทีโดยใช้ขนาดแบบอักษรสัมพันธ์และ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>