กลุ่มปุ่ม
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-* ขนาดปุ่มทั้งหมดในกลุ่ม:
ตัวอย่าง
<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> ลองตัวเอง» รังปุ่มกลุ่มและเลื่อนลงเมนู
กลุ่มปุ่มรังเพื่อสร้างเมนูแบบเลื่อนลง:
ตัวอย่าง
<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> ลองตัวเอง» dropdowns ปุ่มสปลิต
ตัวอย่าง
<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> ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »