ပုံစံများ

ခြုံငုံသုံးသပ်ချက်

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

အီးမေးလ်အတည်ပြုခြင်း၊ နံပါတ်ရွေးချယ်ခြင်းနှင့် အခြားအရာများကဲ့သို့ အသစ်သော ထည့်သွင်းထိန်းချုပ်မှုများကို အခွင့်ကောင်းယူရန် ထည့် typeသွင်းမှုအားလုံးတွင် (ဥပမာ၊ emailအီးမေးလ်လိပ်စာ သို့မဟုတ် ဂဏန်းအချက်အလက်အတွက်) သင့်လျော်သော အရည်အချင်းတစ်ရပ်ကို အသုံးပြုရန် သေချာ ပါစေ။number

ဤသည်မှာ Bootstrap ၏ပုံစံစတိုင်များကိုသရုပ်ပြရန် အမြန်ဥပမာတစ်ခုဖြစ်သည်။ လိုအပ်သောအတန်းများ၊ ဖောင်ပုံစံအပြင်အဆင်နှင့် အခြားအရာများအတွက် စာရွက်စာတမ်းများအတွက် ဆက်လက်ဖတ်ရှုပါ။

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

စာသားပုံစံ

Block-level သို့မဟုတ် inline-level form စာသားကို အသုံးပြု၍ ဖန်တီးနိုင်သည် .form-text။

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

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

Inline text သည် class ထက် ဘာမှမပိုဘဲ ပုံမှန် inline HTML ဒြပ်စင် (၎င်းသည် a <span>, <small>, or other something) ကို အသုံးပြုနိုင်သည်။.form-text

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

မသန်စွမ်းပုံစံများ

ထည့်ပါ။disabledအသုံးပြုသူ အပြန်အလှန်တုံ့ပြန်မှုများကို တားဆီးကာ ပိုမိုပေါ့ပါးလာစေရန် ထည့်သွင်းမှုတစ်ခုတွင် boolean attribute ကို

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

အတွင်း ထိန်းချုပ်မှုအားလုံးကို ပိတ်ရန် disabledရည်ညွှန်းချက်ကို a တွင် ထည့်ပါ ။ <fieldset>ဘရောက်ဆာများသည် မူလပုံစံထိန်းချုပ်မှုများ ( <input>, <select>, နှင့် <button>ဒြပ်စင်များ) အားလုံးကို <fieldset disabled>ပိတ်ထားသည့်အတိုင်း လုပ်ဆောင်ပြီး ၎င်းတို့တွင် ကီးဘုတ်နှင့် မောက်စ် အပြန်အလှန်တုံ့ပြန်မှုများကို တားဆီးပေးသည်။

သို့သော်၊ သင့်ဖောင်တွင် စိတ်ကြိုက်ခလုတ်ကဲ့သို့သော အစိတ်အပိုင်းများပါ၀င်ပါက <a class="btn btn-*">...</a>၊ ၎င်းတို့ကို စတိုင်တစ်ခုသာ ပေးလိမ့်မည် pointer-events: none၊ ဆိုလိုသည်မှာ ၎င်းတို့သည် ကီးဘုတ်ကို အသုံးပြု၍ အာရုံစိုက်နိုင်ပြီး လုပ်ဆောင်နိုင်ဆဲဖြစ်သည်။ tabindex="-1"ဤကိစ္စတွင်၊ ၎င်းတို့အား အာရုံစူးစိုက်မှုမရရှိစေရန်နှင့် aria-disabled="disabled"၎င်းတို့၏အခြေအနေကို အကူအညီပေးသည့်နည်းပညာများသို့ အချက်ပြရန် ထည့်သွင်းခြင်းဖြင့် ဤထိန်းချုပ်မှုများကို သင်ကိုယ်တိုင် ပြင်ဆင်ရပါမည် ။

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

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

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

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

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

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

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

ဆူး

ဖောင်တစ်ခုချင်းစီ၏ အစိတ်အပိုင်းများအလိုက် ပြန်လည်အသုံးပြုရန်နှင့် တိုးချဲ့ရန်အတွက် ဖောင်ပုံစံပြောင်းကိန်းများစွာကို ယေဘူယျအဆင့်တွင် သတ်မှတ်ထားသည်။ ဤအရာများကို မကြာခဏအဖြစ် $btn-input-*နှင့် $input-*ကိန်းရှင်များကို သင်တွေ့ရပါမည်။

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

$btn-input-*ကိန်းရှင်များသည် ကျွန်ုပ်တို့၏ခလုတ်များ နှင့် ကျွန်ုပ်တို့၏ပုံစံအစိတ်အပိုင်းများ ကြားတွင် ကမ္ဘာလုံးဆိုင်ရာကိန်းရှင်များကို မျှဝေ ပါသည်။ ဤအရာများကို အခြားအစိတ်အပိုင်းအလိုက် ကိန်းရှင်များထံ မကြာခဏတန်ဖိုးများအဖြစ် ပြန်လည်သတ်မှတ်ပေးသည်ကို သင်တွေ့ရပါမည်။

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;