Bootstrap 4 ป้าย
ตัวอย่างหัวเรื่อง ใหม่
ตัวอย่างหัวเรื่อง ใหม่
ตัวอย่างหัวเรื่อง ใหม่
ตัวอย่างหัวเรื่อง ใหม่
ตัวอย่างหัวเรื่อง ใหม่
ตัวอย่างหัวเรื่อง ใหม่
ป้ายถูกใช้เพื่อเพิ่มข้อมูลเพิ่มเติมให้กับเนื้อหาใดๆ ใช้.badgeคลาสร่วมกับคลาสตามบริบท (like .badge-secondary) ภายใน<span>
องค์ประกอบเพื่อสร้างป้ายสี่เหลี่ยม โปรดทราบว่าป้ายจะปรับขนาดให้ตรงกับขนาดขององค์ประกอบหลัก (ถ้ามี):
ตัวอย่าง
<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>
ป้ายตามบริบท
หลัก
รอง
ความสำเร็จ
อันตราย
คำเตือน
ข้อมูล
แสงสว่าง
มืด
ใช้คลาสตามบริบทใดๆ ( .badge-*) เพื่อเปลี่ยนสีของตราสัญลักษณ์:
ตัวอย่าง
<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>
ป้ายยา
หลัก
รอง
ความสำเร็จ
อันตราย
คำเตือน
ข้อมูล
แสงสว่าง
มืด
ใช้.badge-pillชั้นเรียนเพื่อทำให้ป้ายมีความกลมมากขึ้น:
ตัวอย่าง
<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>
ป้ายภายใน Element
ตัวอย่างการใช้ตราสัญลักษณ์ภายในปุ่ม:
ตัวอย่าง
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>