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>
Nesting Button Groups နှင့် Dropdown Menus
dropdown menus ဖန်တီးရန် Nest ခလုတ်အုပ်စုများ (နောက်ခန်းတွင် dropdowns များအကြောင်း ပိုမိုလေ့လာနိုင်ပါမည်)
ဥပမာ
<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>
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
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>
ဒေါင်လိုက်ခလုတ်အဖွဲ့ နှင့် Dropdown
ဥပမာ
<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>
ခလုတ်အုပ်စုများ ဘေးချင်းကပ်
ခလုတ်အုပ်စုများသည် ပုံမှန်အားဖြင့် "inline" ဖြစ်သည်၊ ၎င်းသည် သင့်တွင် အဖွဲ့များစွာရှိသောအခါ ၎င်းတို့ကို ဘေးချင်းကပ်တွေ့စေသည်-
ဥပမာ
<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>