เอกสารประกอบและตัวอย่างสำหรับป้าย ส่วนประกอบการนับจำนวนเล็กน้อยและการติดฉลากของเรา
ตัวอย่าง
มาตราส่วนตราเพื่อให้ตรงกับขนาดขององค์ประกอบหลักในทันทีโดยใช้ขนาดแบบอักษรสัมพันธ์และem
หน่วย
ตัวอย่างหัวเรื่องใหม่
ตัวอย่างหัวเรื่องใหม่
ตัวอย่างหัวเรื่องใหม่
ตัวอย่างหัวเรื่องใหม่
ตัวอย่างหัวเรื่องใหม่
ตัวอย่างหัวเรื่องใหม่
สามารถใช้ตราเป็นส่วนหนึ่งของลิงก์หรือปุ่มเพื่อจัดเตรียมตัวนับ
โปรดทราบว่าขึ้นอยู่กับวิธีการใช้งาน ป้ายสถานะอาจสร้างความสับสนให้กับผู้ใช้โปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลือที่คล้ายคลึงกัน แม้ว่าการจัดสไตล์ของป้ายจะสื่อให้เห็นถึงจุดประสงค์ แต่ผู้ใช้เหล่านี้ก็จะได้รับการนำเสนอด้วยเนื้อหาของป้าย ป้ายเหล่านี้อาจดูเหมือนสุ่มคำหรือตัวเลขเพิ่มเติมที่ท้ายประโยค ลิงก์ หรือปุ่ม ทั้งนี้ขึ้นอยู่กับสถานการณ์
เว้นแต่บริบทจะชัดเจน (เช่นเดียวกับตัวอย่าง "การแจ้งเตือน" ซึ่งเข้าใจว่า "4" คือจำนวนการแจ้งเตือน) ให้พิจารณารวมบริบทเพิ่มเติมด้วยข้อความเพิ่มเติมที่ซ่อนอยู่
การเปลี่ยนแปลงบริบท
เพิ่มคลาสตัวปรับแต่งที่กล่าวถึงด้านล่างเพื่อเปลี่ยนรูปลักษณ์ของตราสัญลักษณ์
หลัก
รอง
ความสำเร็จ
อันตราย
คำเตือน
ข้อมูล
แสงสว่าง
มืด
ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก
การใช้สีเพื่อเพิ่มความหมายเป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่แสดงด้วยสีนั้นชัดเจนจากเนื้อหา (เช่น ข้อความที่มองเห็นได้) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.sr-only
ชั้นเรียน
ป้ายยา
ใช้.badge-pill
คลาสตัวปรับแต่งเพื่อทำให้ตราสัญลักษณ์มีความโค้งมนมากขึ้น (ด้วยborder-radius
แนวนอนที่ใหญ่ขึ้นและเพิ่มเติมpadding
) มีประโยชน์หากคุณพลาดป้ายจาก v3
หลัก
รอง
ความสำเร็จ
อันตราย
คำเตือน
ข้อมูล
แสงสว่าง
มืด
ลิงค์
.badge-*
การใช้ คลาสตามบริบท ใน <a>
องค์ประกอบจะทำให้ ป้ายสถานะ ดำเนินการ ได้อย่างรวดเร็ว ด้วยสถานะโฮเวอร์และโฟกัส