Bootstrap

Bootstrap 5 การสร้าง Badge

30/08/2022
ดีครับดอทคอม
Bootstrap 5 การสร้าง Badge

Bootstrap 5 การสร้าง Badge

Badge มีไว้สำหรับแสดงข้อมูลเพิ่มเติมต่อจากข้อมูลหลัก เช่น แสดงจำนวนตัวเลขการแจ้งเตือนใหม่ เป็นต้น หรือใช้งานอย่างอื่นในลักษณะเป็นป้าย

การสร้าง Badge สามารถทำได้โดยการใช้คลาส .badge ร่วมกับเอลิเมนต์ <span> นอกจากนี้ยังสามารถกำหนดสีพื้นหลังให้ Badge โดยการใช้ contextual classes (.bg-*) เพื่อกำหนดสีพื้นหลังให้ Badge ได้อีกด้วย

<h1>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-secondary">ส่วนนี้คือ Badge</span></h1>
<h2>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-primary">ส่วนนี้คือ Badge</span></h2>
<h3>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-success">ส่วนนี้คือ Badge</span></h3>
<h4>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-warning">ส่วนนี้คือ Badge</span></h4>
<h4>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-danger">ส่วนนี้คือ Badge</span></h4>
<h6>ส่วนนี้คือข้อความทั่ว ๆ ไป <span class="badge bg-info">ส่วนนี้คือ Badge</span></h6>

จากตัวอย่างด้านบน เราจะได้ป้าย Badge เป็นกรอบสี่เหลี่ยม แต่ถ้าต้องการให้ Badge เป็นแบบมุมมน ก็สามารถทำได้โดยเพิ่มคลาส .rounded-pill เข้าไป

<span class="badge rounded-pill bg-primary">This Is Badge</span>
<span class="badge rounded-pill bg-secondary">This Is Badge</span>
<span class="badge rounded-pill bg-success">This Is Badge</span>
<span class="badge rounded-pill bg-danger">This Is Badge</span>
<span class="badge rounded-pill bg-warning">This Is Badge</span>
<span class="badge rounded-pill bg-info">This Is Badge</span>
<span class="badge rounded-pill bg-light">This Is Badge</span>
<span class="badge rounded-pill bg-dark">This Is Badge</span>

เราสามารถใช้งาน Badge ภายในเอลิเมนต์อื่นได้ เช่น ปุ่มกด เป็นต้น

<button type="button" class="btn btn-success">
    การแจ้งเตือนใหม่ <span class="badge bg-danger">10</span>
</button>
  • Bootstrap 5 Tooltip
  • Bootstrap 5 Popover
  • Bootstrap 5 Toasts
  • Bootstrap 5 Scrollspy
  • Bootstrap 5 Offcanvas
  • Bootstrap 5 Utilities
  • Bootstrap 5 Flex
  • Bootstrap 5 Forms
  • Bootstrap 5 Select
  • Bootstrap 5 Checkboxes and Radio buttons
  • Bootstrap 5 Range
  • Bootstrap 5 Input Groups
  • Bootstrap 5 Form Floating Labels
  • Bootstrap 5 Form Validation
  • Bootstrap 5 Grid System
  • Bootstrap 5 Grid Stacked to horizontal
  • Bootstrap 5 Grid Extra Small
  • Bootstrap 5 Grid Small
  • Bootstrap 5 Grid Medium
  • Bootstrap 5 Grid Large
  • Bootstrap 5 Grid Extra Large
  • Bootstrap 5 Grid XXL
  • Bootstrap 5 Grid Examples

คุณอาจสนใจ:

Container ใน Bootstrap 5ทำความรู้จักกับ Container ใน Bootstrap 5 ทำความเข้าใจระบบ Grid พื้นฐาน ใน Bootstrap 5ทำความเข้าใจระบบ Grid พื้นฐาน ใน Bootstrap 5 ตกแต่งการแสดงผลรูปภาพด้วย Bootstrap 5ตกแต่งการแสดงผลรูปภาพด้วย Bootstrap 5 Bootstrap 5 การจัดกลุ่มให้ปุ่มกดBootstrap 5 การจัดกลุ่มให้ปุ่มกด