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>
</div>

ทดสอบเอง

คำเตือน：โปรดไม่ได้ใช้ขนาดปุ่มสำหรับแต่ละปุ่มในกลุ่ม แต่ใช้คลาส .btn-group-lg สำหรับกลุ่มปุ่มใหญ่หรือใช้ .btn-group-sm สำหรับกลุ่มปุ่มเล็ก

ตัวอย่าง

<div class="btn-group 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>
</div>

ทดสอบเอง

กลุ่มปุ่มตั้งแต่นั้นเป็นต้นไป

Bootstrap 5 ยังสนับสนุนกลุ่มปุ่มตั้งแต่นั้นเป็นต้นไป:

ใช้คลาส .btn-group-vertical สร้างกลุ่มปุ่มตั้งแต่นั้นเป็นต้นไป:

ตัวอย่าง

<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>
</div>

ทดสอบเอง

กลุ่มปุ่มแถว

โดยเรื่องที่แก้ไขไว้โดยค่าเริ่มต้น กลุ่มปุ่มเป็น "inline" และจะแสดงในแถวเดียวกันเมื่อมีหลายกลุ่มปุ่ม:

ตัวอย่าง

<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>
</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>
</div>

ทดสอบเอง

กลุ่มปุ่มที่ฝังระดับและดาวน์ลูปดาวน์เมนู

กลุ่มปุ่มที่ฝังระดับ สามารถสร้างดาวน์ลูปดาวน์เมนู (คุณจะได้เรียนรู้เกี่ยวกับดาวน์ลูปดาวน์เมนูในบทดั้งเดียว):

ตัวอย่าง

<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-toggle="dropdown">เซิงมิง</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">โทรศัพท์มือถือ</a>
      <a class="dropdown-item" href="#">ตั้งโทรศัพท์แบบแท้งค่า</a>
    </div>
  </div>
</div>

ทดสอบเอง