Bootstrap ปุ่มกลุ่ม
กลุ่มปุ่ม
Bootstrap ช่วยให้คุณสามารถจัดกลุ่มชุดของปุ่มต่างๆ เข้าด้วยกัน (ในบรรทัดเดียว) ในกลุ่มปุ่ม:
ใช้<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|sm|xsเพื่อกำหนดขนาดปุ่มทั้งหมดในกลุ่ม:
ตัวอย่าง
<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 ยังรองรับกลุ่มปุ่มแนวตั้ง:
ใช้ชั้นเรียน.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>
กลุ่มปุ่มที่เหมาะสม
หากต้องการขยายความกว้างทั้งหมดของหน้าจอ ให้ใช้.btn-group-justified
คลาส:
ตัวอย่างที่มี<a>องค์ประกอบ:
ตัวอย่าง
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
หมายเหตุ:สำหรับ<button>องค์ประกอบ คุณต้องห่อแต่ละปุ่มใน.btn-groupคลาส:
ตัวอย่าง
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</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 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
แยกปุ่มดรอปดาวน์
ตัวอย่าง
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>