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>
Nesting Button Groups နှင့် Dropdown Menus
dropdown menus ဖန်တီးရန် 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>
Split Button 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>