Bootstrap 5 စက်တင်း အုပ်စု

ဘက်အုပ်အုပ်စု

Bootstrap 5 က ဘက်အုပ်အုပ်စု တွင် ဘက်အုပ် အစုအဝေး ကို ပေါင်းစပ်နိုင်သည် (တစ်ကြိမ် တစ်လျှောက် တွင်):

သင့်ကောင်းသော ဘက်အုပ်အုပ်စု အတွက် .btn-group အအုပ်အုပ်စု <div> အအုပ်အုပ်စု အတွက် အအုပ်အုပ် အစား အအုပ်အုပ်စု ဖန်တီး

အမှုလုပ်

<div class="btn-group">
  <button type="button" class="btn btn-primary">ဟိုးဟိုး</button>
  <button type="button" class="btn btn-primary">ဒိုင်င်</button>
  <button type="button" class="btn btn-primary">ဟိုးလျူ</button>
</div>

ကိုယ်တိုင် စမ်းသပ်ကြည့်ပါ

အကြောင်းပြချက်:ဘက်အုပ် အရွယ်အစား ကို ဘက်အုပ်အုပ်စု အနေဖြင့် အသုံးပြုသော .btn-group-lg သင့်ကောင်းသော ဘက်အုပ်အုပ်စု သို့မဟုတ် သုံး .btn-group-sm သင့်ကောင်းသော ဘက်အုပ်အုပ်စု

အမှုလုပ်

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">ဟိုးဟိုး</button>
  <button type="button" class="btn btn-primary">ဒိုင်င်</button>
  <button type="button" class="btn btn-primary">ဟိုးလျူ</button>
</div>

ကိုယ်တိုင် စမ်းသပ်ကြည့်ပါ

တစ်ခုခု တည်းသော နှာပြင် အသုံးပြုနိုင်သော နှာပြင်

Bootstrap 5 သည် တစ်ခုခု တည်းသော နှာပြင် အသုံးပြုနိုင်သော နှာပြင် အသုံးပြုပါ:

သုံးပြီးဖြစ်သော အက်စ် .btn-group-vertical အဆက်အသွယ် နှာပြင် အသုံးပြုနိုင်သော နှာပြင် အသုံးပြုပါ:

အမှုလုပ်

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">ဟိုးဟိုး</button>
  <button type="button" class="btn btn-primary">ဒိုင်င်</button>
  <button type="button" class="btn btn-primary">ဟိုးလျူ</button>
</div>

ကိုယ်တိုင် စမ်းသပ်ကြည့်ပါ

တူညီသော နှာပြင် အသုံးပြုခြင်း

မူလအားဖြင့် နှာပြင် အသုံးပြုခြင်း "inline" ဖြစ်ပါသည်၊ နှာပြင် အသုံးပြုခြင်း အများအပြား ရှိလျှင် တူညီသော နှာပြင် ဖြင့် ပြသပါသည်:

အမှုလုပ်

<div class="btn-group">
  <button type="button" class="btn btn-primary">ဟိုးဟိုး</button>
  <button type="button" class="btn btn-primary">ဒိုင်င်</button>
  <button type="button" class="btn btn-primary">ဟိုးလျူ</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">ဂျူး</button>
  <button type="button" class="btn btn-primary">ဟီဂျန်</button>
  <button type="button" class="btn btn-primary">ဟိုးလျူ</button>
</div>

ကိုယ်တိုင် စမ်းသပ်ကြည့်ပါ

အဆက်အသွယ် နှာပြင် နှင့် အသုံးပြုနိုင်သော နှာပြင် အသုံးပြုပါ

အဆက်အသွယ် နှာပြင် နှင့် အသုံးပြုနိုင်သော နှာပြင် အသုံးပြုပါ (သို့မဟုတ် နှာပြင် အဆက်အသွယ် နှင့် ပတ်သက်သော အချက်အလက် ကို နောက်ပိုင်း ခွင့်ပြုလိမ့်မည်):

အမှုလုပ်

<div class="btn-group">
  <button type="button" class="btn btn-primary">ဟိုးဟိုး</button>
  <button type="button" class="btn btn-primary">ဒိုင်င်</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">ဟိုးလျူ</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">လက်လီ</a>
      <a class="dropdown-item" href="#">ပုံစံကုပ်</a>
    </div>
  </div>
</div>

ကိုယ်တိုင် စမ်းသပ်ကြည့်ပါ