ထည့်သွင်းအုပ်စု
စာသားထည့်သွင်းမှုများ၊ စိတ်ကြိုက်ရွေးချယ်မှုများနှင့် စိတ်ကြိုက်ဖိုင်ထည့်သွင်းမှုများ၏တစ်ဖက်တစ်ချက်ရှိ စာသား၊ ခလုတ်များ သို့မဟုတ် ခလုတ်အုပ်စုများကို ပေါင်းထည့်ခြင်းဖြင့် ပုံစံထိန်းချုပ်မှုများကို လွယ်ကူစွာ တိုးချဲ့ပါ။
အခြေခံဥပမာ
ထည့်သွင်းမှု၏တစ်ဖက်တစ်ချက်တွင် အပိုပရိုဂရမ်တစ်ခု သို့မဟုတ် ခလုတ်တစ်ခုကို ထားရှိပါ။ ထည့်သွင်းမှုတစ်ခု၏ နှစ်ဖက်စလုံးတွင် တစ်ခုကိုလည်း သင်ထားနိုင်သည်။ <label>
input group အပြင်ဘက်တွင် s ကို ထားရန် မမေ့ပါနှင့် ။
<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>
စိတ်ကြိုက်ဖိုင်ထည့်သွင်းခြင်း။
<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
အသုံးပြုသူများကို အကျိုးပြုမည်ဖြစ်ပြီး၊ မြင်နိုင်သော အညွှန်းစာသားမရှိခြင်းသည် အချို့သောအသုံးပြုသူများအတွက် ပြဿနာရှိနေဆဲဖြစ်သည်။ မြင်နိုင်သော အညွှန်းပုံစံအချို့သည် အများအားဖြင့် အသုံးပြုရနိုင်မှုနှင့် အသုံးပြုနိုင်မှုတို့အတွက် အကောင်းဆုံးချဉ်းကပ်မှုဖြစ်သည်။