ပုံစံများ

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

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အသုံးပြုသူ အပြန်အလှန်တုံ့ပြန်မှုများကို တားဆီးကာ ပိုမိုပေါ့ပါးလာစေရန် ထည့်သွင်းမှုတစ်ခုတွင် ဘူလီယံရည်ညွှန်းချက်ကို ထည့်သွင်းပါ ။

<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အသုံးပြုသူများကို အကျိုးပြုမည်ဖြစ်ပြီး၊ မြင်နိုင်သော အညွှန်းစာသားမရှိခြင်းသည် အချို့သောအသုံးပြုသူများအတွက် ပြဿနာရှိနေဆဲဖြစ်သည်။ မြင်နိုင်သော အညွှန်းပုံစံအချို့သည် အများအားဖြင့် အသုံးပြုရနိုင်မှုနှင့် အသုံးပြုနိုင်မှုတို့အတွက် အကောင်းဆုံးချဉ်းကပ်မှုဖြစ်သည်။

ဆူး

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

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

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

$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;