အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
in English

ထည့်သွင်းအုပ်စု

စာသားထည့်သွင်းမှုများ၊ စိတ်ကြိုက်ရွေးချယ်မှုများနှင့် စိတ်ကြိုက်ဖိုင်ထည့်သွင်းမှုများ၏တစ်ဖက်တစ်ချက်ရှိ စာသား၊ ခလုတ်များ သို့မဟုတ် ခလုတ်အုပ်စုများကို ပေါင်းထည့်ခြင်းဖြင့် ပုံစံထိန်းချုပ်မှုများကို လွယ်ကူစွာ တိုးချဲ့ပါ။

အခြေခံဥပမာ

ထည့်သွင်းမှု၏တစ်ဖက်တစ်ချက်တွင် အပိုပရိုဂရမ်တစ်ခု သို့မဟုတ် ခလုတ်တစ်ခုကို ထားရှိပါ။ ထည့်သွင်းမှုတစ်ခု၏ နှစ်ဖက်စလုံးတွင် တစ်ခုကိုလည်း သင်ထားနိုင်သည်။ <label>input group အပြင်ဘက်တွင် s ကို ထားရန် မမေ့ပါနှင့် ။

@
@example.com
https://example.com/users/
$ .၀၀
@
textarea နှင့်အတူ
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Server" aria-label="Server">
</div>

<div class="input-group">
  <span class="input-group-text">With textarea</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

ထုပ်ပိုးခြင်း။

flex-wrap: wrapထည့်သွင်း မှုအုပ်စုအတွင်း စိတ်ကြိုက်ပုံစံအကွက်အတည်ပြုချက်ကို လိုက်လျောညီထွေဖြစ်စေရန်အတွက် ထည့်သွင်းသည့်အဖွဲ့များ ကို ပုံသေအားဖြင့် ခြုံထားသည် ။ ၎င်းကိုသင်ပိတ်ထားနိုင်သည် .flex-nowrap

@
<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>

အရွယ်အစား

ဆက်စပ်ပုံစံ အရွယ်အစားအတန်းအစား အတန်းများကို သူ့ဘာသာသူ ပေါင်းထည့်လိုက်ပြီး .input-groupအတွင်းမှ အကြောင်းအရာများကို အလိုအလျောက် အရွယ်အစား ပြောင်းလဲမည်—ဒြပ်စင်တစ်ခုစီရှိ ဖောင်ထိန်းချုပ်မှုအရွယ်အစား အတန်းများကို ထပ်တလဲလဲ ပြုလုပ်ရန် မလိုအပ်ပါ။

တစ်ဦးချင်းစီထည့်သွင်းမှုအုပ်စုဒြပ်စင်များပေါ်တွင်အရွယ်အစားအရွယ်အစားကိုပံ့ပိုးမပေးပါ။

သေးငယ်သည်။
ပုံသေ
ကြီးမားသည်။
<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

အမှန်ခြစ်ပုံးများနှင့် ရေဒီယိုများ

စာသားအစား ထည့်သွင်းသည့်အဖွဲ့၏ addon အတွင်း မည်သည့် checkbox သို့မဟုတ် ရေဒီယိုရွေးချယ်ခွင့်ကိုမဆို ထည့်ပါ။ ထည့်သွင်းမှုဘေးတွင် မမြင်နိုင်သော စာသားမရှိသည့်အခါတွင် ထည့်သွင်း .mt-0ရန် အကြံပြုအပ်ပါသည် ။.form-check-input

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

သွင်းအားစုများစွာ

များစွာသော <input>s ကို အမြင်အာရုံဖြင့် ပံ့ပိုးထားသော်လည်း၊ အတည်ပြုခြင်းပုံစံများကို တစ်ခုတည်းဖြင့် ထည့်သွင်းအုပ်စုများအတွက်သာ ရနိုင်ပါသည် <input>

ပထမနှင့်နောက်ဆုံးအမည်
<div class="input-group">
  <span class="input-group-text">First and last name</span>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

addons အများအပြား

အပိုပရိုဂရမ်များစွာကို ပံ့ပိုးထားပြီး အမှန်ခြစ်ဘောက်စ်နှင့် ရေဒီယိုထည့်သွင်းမှုဗားရှင်းများဖြင့် ရောနှောနိုင်သည်။

$ ၀.၀၀
$ ၀.၀၀
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
</div>

ခလုတ် addons များ

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

dropdowns ပါသောခလုတ်များ

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action before</a></li>
    <li><a class="dropdown-item" href="#">Another action before</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with 2 dropdown buttons">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

အပိုင်းလိုက် ခလုတ်များ

<div class="input-group mb-3">
  <button type="button" class="btn btn-outline-secondary">Action</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <button type="button" class="btn btn-outline-secondary">Action</button>
  <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

စိတ်ကြိုက်ပုံစံများ

ထည့်သွင်းသည့်အဖွဲ့များတွင် စိတ်ကြိုက်ရွေးချယ်မှုများနှင့် စိတ်ကြိုက်ဖိုင်ထည့်သွင်းမှုများအတွက် ပံ့ပိုးမှုပါဝင်သည်။ ဘရောက်ဆာ၏ မူရင်းဗားရှင်းများကို ပံ့ပိုးမထားပါ။

စိတ်ကြိုက်ရွေးချယ်ပါ။

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupSelect01">Options</label>
  <select class="form-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="form-select" id="inputGroupSelect02">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button">Button</button>
  <select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group">
  <select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

စိတ်ကြိုက်ဖိုင်ထည့်သွင်းခြင်း။

<div class="input-group mb-3">
  <label class="input-group-text" for="inputGroupFile01">Upload</label>
  <input type="file" class="form-control" id="inputGroupFile01">
</div>

<div class="input-group mb-3">
  <input type="file" class="form-control" id="inputGroupFile02">
  <label class="input-group-text" for="inputGroupFile02">Upload</label>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  <input type="file" class="form-control" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload">
</div>

<div class="input-group">
  <input type="file" class="form-control" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload">
  <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
</div>

ဆူး

ကိန်းရှင်များ

$input-group-addon-padding-y:           $input-padding-y;
$input-group-addon-padding-x:           $input-padding-x;
$input-group-addon-font-weight:         $input-font-weight;
$input-group-addon-color:               $input-color;
$input-group-addon-bg:                  $gray-200;
$input-group-addon-border-color:        $input-border-color;