Bootstrap 5 ပြုပြင်

ပရိုဂရမ်များ ကို ဖွဲ့စည်း

တည်ဆောက် .input-group

အမှန်တကယ် အကူအညီ အစိုးရ အမျိုးအစား ကို စစ်ဆေး ရန် အသုံးပြုပါ .input-group-text အမျိုးအစား：

အမှတ်အသား

<form>
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" placeholder="အသုံးပြုသူ အမည်">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" placeholder="သင်၏ အီးမေးပို့စာ">
    <span class="input-group-text">@example.com</span>
  </div>
</form>

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

အုပ်စု အရေအတွက်

အရေးသတ် အုပ်စု အရေအတွက်: .input-group-sm အကြောင်းအရာ အုပ်စု အရေအတွက် အသုံးပြု သည်: .input-group-lg ကြီးမား အရေးသတ် အုပ်စု အတွက်:

အမှတ်အသား

<div class="input-group mb-3 input-group-sm">
   <span class="input-group-text">သိချင်း</span>
  <input type="text" class="form-control">
</div>
<div class="input-group mb-3">
  <span class="input-group-text">မည်သည်မှ</span>
  <input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
  <span class="input-group-text">ကြီးမား</span>
  <input type="text" class="form-control">
</div>

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

များပြား အရေးသတ် နှင့် အကူအညီ

များပြား အရေးသတ် အုပ်စု နှင့် ပစ္စည်း ပေါင်းပွဲ့ပြီး:

အမှတ်အသား

<!-- များပြား အရေးသတ် အုပ်စု -->
<div class="input-group mb-3">
  <span class="input-group-text">အမည်</span>
  <input type="text" class="form-control" placeholder="မင်းမျိုး">
  <input type="text" class="form-control" placeholder="အမည်">
</div>
<!-- များပြား ပစ္စည်း/အကြံပေး စာသား -->
<div class="input-group mb-3">
  <span class="input-group-text">တတိယ</span>
  <span class="input-group-text">ဒုတိယ</span>
  <span class="input-group-text">တတိယ</span>
  <input type="text" class="form-control">
</div>

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

စက်တင် နှင့် စက်တင် အုပ်စု

အပြီးမှ စာသား အုပ်စု နှင့် စက်တင် အုပ်စု ကို အသုံးပြုနိုင်ပါသည်:

အမှတ်အသား

<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="ပုံစံ စကားလုံး">
</div>
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="radio">
  </div>
  <input type="text" class="form-control" placeholder="ပုံစံ စကားလုံး">
</div>

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

အရေးသတ် အုပ်စု နောက်ထပ်

အမှတ်အသား

<div class="input-group mb-3">
  <button class="btn btn-outline-primary" type="button">အခြေခံ နောက်ထပ်</button>
  <input type="text" class="form-control" placeholder="ပုံစံ စကားလုံး">
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="ရှာဖွေ">
  <button class="btn btn-success" type="submit">သွားသွား</button>
</div>
<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="ပုံစံ စကားလုံး">
  <button class="btn btn-primary" type="button">အဆိုပါ</button>
  <button class="btn btn-danger" type="button">လွတ်ပြောင်</button>
</div>

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

ကွတ်ပိုင်း အရွှေ့ပ် အုပ်စု

အရွှေ့ပ် အုပ်စု တွင် ကွတ်ပိုင်း ချက် ထပ်ထည့်ပါ။ သမိုင်းကြောင်းအရ သင်သည် .dropdown ချက်ခံ အပေါ်တွင် မလိုလားပါ။

အမှတ်အသား

<div class="input-group mt-3 mb-3">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    ကွတ်ပိုင်း ချက်
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">ချက် 1</a></li>
    <li><a class="dropdown-item" href="#">ချက် 2</a></li>
    <li><a class="dropdown-item" href="#">ချက် 3</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="အသုံးပြုသူ အမည်">
</div>

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