Badge ใน Bootstrap 4 เป็นเครื่องมือที่ใช้สำหรับการแสดงตัวบ่งชี้ (indicator) หรือข้อมูลเพิ่มเติม เช่น จำนวนแจ้งเตือน การแจ้งเตือน หรือข้อมูลเพิ่มเติมที่เล็กกระทัดรัด ซึ่งสามารถแสดงผลร่วมกับปุ่ม ลิสต์ หรือข้อความได้อย่างง่ายดาย Badge มีความยืดหยุ่นในการใช้งานและสามารถตกแต่งเพิ่มเติมให้เหมาะสมกับสไตล์ที่ต้องการได้
การใช้งานเบื้องต้น
ในการใช้งาน Badge เบื้องต้น เราใช้คลาส badge เพื่อแสดง Badge และคลาส badge-* สำหรับการกำหนดสีพื้นหลัง ซึ่งมีหลายรูปแบบให้เลือกใช้งาน เช่น badge-primary, badge-secondary, badge-success, badge-danger, badge-warning, badge-info, badge-light, และ badge-dark
ตัวอย่างการใช้งานกับข้อความ
<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 สามารถแสดงข้อความ “New” ข้าง ๆ หัวเรื่อง (heading) แต่ละระดับได้
Badge กับปุ่ม (Button)
Badge มักถูกใช้งานร่วมกับปุ่ม เพื่อแสดงข้อมูลเพิ่มเติม เช่น จำนวนแจ้งเตือน จำนวนรายการ หรือข้อมูลที่เกี่ยวข้อง โดยใช้ร่วมกับคลาส badge และวางไว้ในปุ่ม (button)
ตัวอย่างการใช้งานกับปุ่ม
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
</button>ในตัวอย่างนี้ Badge จะปรากฏอยู่ข้าง ๆ ข้อความ “Notifications” และแสดงหมายเลข 4 เพื่อบ่งบอกจำนวนการแจ้งเตือน
Badge แบบ Pill (Badge Pills)
Badge แบบ Pill จะมีลักษณะเป็นมุมโค้งมนหรือวงรี เหมาะสำหรับการออกแบบที่ต้องการความนุ่มนวลมากขึ้น โดยเราสามารถใช้คลาสเพิ่มเติม badge-pill เพื่อเปลี่ยนให้ Badge เป็นแบบ Pill
ตัวอย่างการใช้งาน Badge Pills
<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 แต่ละอันจะถูกแสดงเป็นมุมโค้งมน และสามารถปรับแต่งสีตามที่ต้องการได้
Badge ร่วมกับลิสต์ (List Group)
เราสามารถใช้ Badge เพื่อแสดงข้อมูลเพิ่มเติมในลิสต์ได้ โดยใช้ร่วมกับ list-group และวาง Badge ไว้ในแต่ละรายการลิสต์
ตัวอย่างการใช้งานกับลิสต์
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>ในตัวอย่างนี้ Badge จะแสดงจำนวนในแต่ละรายการของลิสต์ เพื่อบ่งบอกข้อมูลที่เกี่ยวข้อง เช่น จำนวนสินค้า จำนวนข้อความ ฯลฯ
การใช้ Badge ในแบบลิงก์
นอกจากใช้ Badge กับปุ่มหรือลิสต์แล้ว เรายังสามารถใช้ Badge ร่วมกับลิงก์ได้ด้วย เพื่อเพิ่มตัวบ่งชี้ให้กับลิงก์ต่าง ๆ
ตัวอย่างการใช้งานกับลิงก์
<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>ในตัวอย่างนี้ Badge จะถูกแสดงเป็นลิงก์ที่สามารถคลิกได้
สรุป
Badge ใน Bootstrap 4 เป็นเครื่องมือที่ใช้งานง่ายและสามารถประยุกต์ใช้งานได้หลากหลายรูปแบบ ไม่ว่าจะเป็นการแสดงจำนวนในลิสต์ แสดงข้อมูลเพิ่มเติมในปุ่ม หรือใช้ร่วมกับหัวข้อหรือข้อความ โดยเราสามารถปรับแต่งสไตล์ต่าง ๆ ได้ผ่านคลาสของ Bootstrap เพื่อให้สอดคล้องกับดีไซน์ที่ต้องการ