in English

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

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

အခြေခံဥပမာ

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

@
@example.com
https://example.com/users/
$
.၀၀
textarea နှင့်အတူ
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <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">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

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

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

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

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

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

@
<div class="input-group flex-nowrap">
  <div class="input-group-prepend">
    <span class="input-group-text" id="addon-wrapping">@</span>
  </div>
  <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">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

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

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

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

စာသားအစား ထည့်သွင်းသည့်အဖွဲ့၏ addon အတွင်း မည်သည့် checkbox သို့မဟုတ် ရေဒီယိုရွေးချယ်ခွင့်ကိုမဆို ထည့်ပါ။

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

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

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

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

ပထမနှင့်နောက်ဆုံးအမည်
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <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">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <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)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

ခလုတ် addons များ

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
  </div>
  <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">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
  </div>
</div>

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

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

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

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

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

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

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <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">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

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

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

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

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-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="custom-select" id="inputGroupSelect02">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-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="custom-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>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

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

ဤဥပမာသည် သီးခြား bs-custom-file-input ပလပ်အင် ကို အားကိုးသည့် စိတ်ကြိုက်ဖိုင်ဘရောက်ဆာ အစိတ်အပိုင်းကို အသုံးပြုသည်။
တင်သည်။
တင်သည်။
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
  </div>
</div>

သုံးစွဲနိုင်မှု

ဖောင်ထိန်းချုပ်မှုအားလုံးတွင် ၎င်းတို့၏ရည်ရွယ်ချက်ကို အထောက်အကူပြုနည်းပညာအသုံးပြုသူများထံ ပေးပို့နိုင်စေရန် သင့်လျော်သောဝင်ရောက်နိုင်သောအမည်တစ်ခုရှိကြောင်း သေချာပါစေ။ ၎င်းကိုရရှိရန် အရိုးရှင်းဆုံးနည်းလမ်းမှာ အကြောင်းအရာ <label>၏တစ်စိတ်တစ်ပိုင်းအဖြစ် လုံလောက်သောဖော်ပြချက်စာသားကို ထည့်သွင်းရန်အတွက် ဒြပ်စင်တစ်ခု သို့မဟုတ်—ခလုတ်များကိစ္စတွင်— အသုံးပြုရန် <button>...</button>ဖြစ်သည်။

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

  • <label>.sr-onlyအတန်း ကို အသုံးပြု၍ ဝှက်ထားသော အစိတ်အပိုင်းများ
  • အညွှန်းကို အသုံးပြု၍ အညွှန်းအဖြစ် လုပ်ဆောင်နိုင်သော ရှိပြီးသားအရာတစ်ခုကို ညွှန်ပြပါ။aria-labelledby
  • titleရည်ညွှန်း ချက်ကို ပေးဆောင်ခြင်း။
  • အသုံးပြု၍ရနိုင်သော အမည်ကို ဒြပ်စင်တစ်ခုပေါ်တွင် အတိအလင်း သတ်မှတ်ခြင်း။aria-label

ယင်းတို့အနက်မှ တစ်ခုမျှမရှိပါက၊ အထောက်အကူပြုနည်းပညာများသည် အသုံးပြုနိုင်သော အမည် နှင့် ဒြပ်စင် placeholderများအတွက် ရည်ညွှန်းချက်ကို အားကိုးရာအဖြစ် အသုံးပြုနိုင်သည်။ ဤကဏ္ဍရှိ ဥပမာများသည် အကြံပြုထားသော ကိစ္စရပ်အလိုက် ချဉ်းကပ်နည်းအချို့ကို ပေးဆောင်ပါသည်။<input><textarea>

အမြင်အာရုံဖြင့် ဝှက်ထားသော အကြောင်းအရာများ (ပုံစံအကွက်တွင် အကြောင်းအရာတစ်ခုပါ၀င်သည်နှင့် ပျောက်ကွယ်သွားသည့်အကြောင်းအရာကိုပင်) အသုံးပြုနေစဉ်တွင် .sr-onlyအထောက်အကူ aria-labelနည်းပညာ placeholderအသုံးပြုသူများကို အကျိုးပြုမည်ဖြစ်ပြီး၊ မြင်နိုင်သော အညွှန်းစာသားမရှိခြင်းသည် အချို့သောအသုံးပြုသူများအတွက် ပြဿနာရှိနေဆဲဖြစ်သည်။ မြင်နိုင်သော အညွှန်းပုံစံအချို့သည် အများအားဖြင့် အသုံးပြုရနိုင်မှုနှင့် အသုံးပြုနိုင်မှုတို့အတွက် အကောင်းဆုံးချဉ်းကပ်မှုဖြစ်သည်။