ดีครับดอทคอม

Bootstrap 5 การจัดกลุ่มให้ปุ่มกด

Bootstrap 5 การจัดกลุ่มให้ปุ่มกด

Bootstrap 5 การจัดกลุ่มให้ปุ่มกด

ด้วยการใช้ Bootstrap 5 เราสามารถรวมปุ่มกดให้อยู่รวมกันเป็นกลุ่มในบรรทัดเดียวกันได้ โดยการใช้คลาส .btn-group ภายในเอลิเมนต์ <div> ดังนี้

<div class="btn-group">
      <button type="button" class="btn btn-primary">แอปเปิ้ล</button>
      <button type="button" class="btn btn-primary">มะละกอ</button>
      <button type="button" class="btn btn-primary">กล้วย</button>
      <button type="button" class="btn btn-primary">ส้ม</button>
</div>

โดยปกติ เมื่อตกแต่งปุ่มกดด้วยคลาส .btn เราสามารถกำหนดขนาดปุ่มได้โดยระบุอักษรย่อบอกขนาดกำกับไปด้วยได้เลย เช่น .btn-sm .btn-lg แต่เมื่อมีการจัดกลุ่มให้ปุ่มโดยใช้งานคลาส .btn-group เราสามารถกำหนดขนาดของปุ่มภายในกลุ่มได้เลย เช่น .btn-group .btn-group-lg

<div class="btn-gtoup btn-group-lg">
      <button type="button" class="btn btn-primary">แอปเปิ้ล</button>
      <button type="button" class="btn btn-primary">มะละกอ</button>
      <button type="button" class="btn btn-primary">กล้วย</button>
      <button type="button" class="btn btn-primary">ส้ม</button>
</div>

การจัดกลุ่มปุ่มแนวตั้ง

นอกจากการจัดกลุ่มให้ปุ่มกดตามปกติดังที่กล่าวมาแล้ว เรายังสามารถจัดกลุ่มปุ่มกดในรูปแบบแนวตั้งได้อีกด้วย โดยใช้งานคลาส .btn-group-vertical ภายในอิลิเมนต์ <div> ดังนี้

<div class="btn-group-vertical">
      <button type="button" class="btn btn-primary">แอปเปิ้ล</button>
      <button type="button" class="btn btn-primary">มะละกอ</button>
      <button type="button" class="btn btn-primary">กล้วย</button>
      <button type="button" class="btn btn-primary">ส้ม</button>
</div>

กลุ่มปุ่มกดจะแสดงผลเรียงกันในแถวเดียวกัน

เนื่องจากการจัดกลุ่มปุ่มกดโดยใช้งานคลาส .btn-group จะทำให้แสดงผลปุ่มกดเป็นกลุ่มในแถวเดียวกัน ดังนั้น หากมีการสร้างกลุ่มปุ่มกดหลายกลุ่ม ก็จะทำให้แต่ละกลุ่มแสดงเรียงกันไปในแถวเดียวกัน

<div class="btn-group">
      <button type="button" class="btn btn-primary">แอปเปิ้ล</button>
      <button type="button" class="btn btn-primary">มะละกอ</button>
      <button type="button" class="btn btn-primary">กล้วย</button>
      <button type="button" class="btn btn-primary">ส้ม</button>
</div>
<div class="btn-group">
      <button type="button" class="btn btn-success">โตโยต้า</button>
      <button type="button" class="btn btn-success">ฮอนด้า</button>
      <button type="button" class="btn btn-success">อีซูซุ</button>
      <button type="button" class="btn btn-success">มิตซูบิชิ</button>
</div>

สร้างกลุ่มซ้อนกันเพื่อรวมปุ่มกับ Dropdown Menu ไว้ด้วยกัน

เราสามารถสร้างกลุ่มปุ่มกดซ้อนกันได้ ทำให้เราสามารถสร้างปุ่มกดกับ Dropdown Menu ไว้ในกลุ่มเดียวกันได้ด้วย ดังนี้

<div class="btn-group">
      <button type="button" class="btn btn-primary">แอปเปิ้ล</button>
      <button type="button" class="btn btn-primary">ซัมซุง</button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">หัวเหว่ย</button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">เท็บเล็ต</a>
          <a class="dropdown-item" href="#">สมาร์ทโฟน</a>
        </div>
      </div>
</div>

  • 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