Bootstrap 4 ปุ่มกลุ่ม
กลุ่มปุ่ม
Bootstrap 4 ช่วยให้คุณสามารถจัดกลุ่มชุดของปุ่มต่างๆ เข้าด้วยกัน (ในบรรทัดเดียว) ในกลุ่มปุ่ม:
ใช้<div>องค์ประกอบที่มีคลาส.btn-groupเพื่อสร้างกลุ่มปุ่ม:
ตัวอย่าง
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
เคล็ดลับ:แทนที่จะใช้ขนาดปุ่มกับทุกปุ่มในกลุ่ม ให้ใช้คลาส.btn-group-lgสำหรับกลุ่มปุ่มขนาดใหญ่หรือกลุ่ม.btn-group-smปุ่มขนาดเล็ก:
ปุ่มขนาดใหญ่:
ปุ่มเริ่มต้น:
ปุ่มเล็ก:
ตัวอย่าง
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
กลุ่มปุ่มแนวตั้ง
Bootstrap 4 ยังรองรับกลุ่มปุ่มแนวตั้ง:
ใช้ชั้นเรียน.btn-group-verticalเพื่อสร้างกลุ่มปุ่มแนวตั้ง:
ตัวอย่าง
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
กลุ่มปุ่มซ้อน & เมนูแบบเลื่อนลง
กลุ่มปุ่ม Nest เพื่อสร้างเมนูแบบเลื่อนลง (คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับเมนูแบบเลื่อนลงในบทต่อไป):
ตัวอย่าง
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
แยกปุ่มดรอปดาวน์
ตัวอย่าง
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
กลุ่มปุ่มแนวตั้งพร้อมดรอปดาวน์
ตัวอย่าง
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
ปุ่มกลุ่มเคียงข้างกัน
กลุ่มปุ่มจะเป็นแบบ "อินไลน์" โดยค่าเริ่มต้น ซึ่งจะทำให้ปรากฏเคียงข้างกันเมื่อคุณมีหลายกลุ่ม:
ตัวอย่าง
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>