Ifishi

Incamake

Ifishi ya Bootstrap igenzura kwaguka kumurongo wuburyo bwa Rebooted hamwe namasomo. Koresha aya masomo kugirango uhitemo ibyerekanwe byabigenewe kugirango bihindurwe neza kuri mushakisha n'ibikoresho.

Wemeze gukoresha typeikiranga gikwiye ku nyongeramusaruro zose (urugero, emailkuri imeri imeri cyangwa numberamakuru yumubare) kugirango ukoreshe igenzura rishya ryinjira nko kugenzura imeri, guhitamo umubare, nibindi byinshi.

Dore urugero rwihuse rwo kwerekana imiterere ya Bootstrap. Komeza usome ibyangombwa kumasomo asabwa, imiterere, nibindi byinshi.

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

Ifishi yinyandiko

Guhagarika-urwego cyangwa umurongo-urwego rwinyandiko irashobora gushirwaho ukoresheje .form-text.

Ifishi yinyandiko iri munsi yinyandiko irashobora kwandikwa hamwe .form-text. Niba ikintu cyo guhagarika urwego ruzakoreshwa, urwego rwo hejuru rwongewe kumwanya woroshye uhereye kubisubizo hejuru.

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

Inyandiko yumurongo irashobora gukoresha ikintu icyo aricyo cyose gisanzwe cya HTML (cyaba a <span>, <small>cyangwa ikindi kintu) ntakindi kirenze .form-texticyiciro.

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

Impapuro zahagaritswe

Ongeramo disabledikiranga boolean kumurongo winjiza kugirango wirinde imikoreshereze yabakoresha kandi igaragare ko yoroshye.

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

Ongeramo disabledikiranga kuri a <fieldset>kugirango uhagarike igenzura ryose imbere. Mucukumbuzi ifata imiterere kavukire yose igenzura ( <input>,, <select>nibintu <button>) imbere imbere <fieldset disabled>nkubumuga, ikumira clavier nimbeba kuri bo.

Ariko, niba ifishi yawe nayo irimo buto yihariye nkibintu nka <a class="btn btn-*">...</a>, ibi bizahabwa gusa uburyo bwa pointer-events: none, bivuze ko bikibandwaho kandi bikoreshwa ukoresheje clavier. Muri iki kibazo, ugomba guhindura intoki ubugenzuzi wongeyeho tabindex="-1"kugirango ubabuze kwakira intumbero no aria-disabled="disabled"kwerekana leta yabo muburyo bwikoranabuhanga bufasha.

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

Kuboneka

Menya neza ko igenzura ryose rifite izina ryoroshye kugirango intego zabo zishobore kugezwa kubakoresha ikorana buhanga. Inzira yoroshye yo kubigeraho ni ugukoresha ikintu <label>, cyangwa - mugihe cya buto - gushyiramo inyandiko isobanura bihagije nkigice <button>...</button>cyibirimo.

Kubihe bidashoboka gushyiramo inyandiko igaragara <label>cyangwa ikwiye, hari ubundi buryo bwo gukomeza gutanga izina ryoroshye, nka:

• <label>ibintu byihishe ukoresheje .visually-hiddenurwego
• Kwerekana ikintu kiriho gishobora gukora nkikirango ukoreshejearia-labelledby
• Gutanga titleikiranga
• Gushiraho neza izina ryoroshye kubintu ukoreshejearia-label

Niba ntanumwe muribi uhari, tekinoroji ifasha irashobora kwifashisha placeholderikiranga nkigisubizo cyizina ryoroshye kuri <input>nibintu <textarea>. Ingero ziri muri iki gice zitanga ibitekerezo bike, uburyo bwihariye.

Mugihe ukoresheje ibintu byihishe bigaragara ( .visually-hidden,, aria-labelndetse placeholdernibirimo, bikazimira iyo ifishi yumurongo ifite ibirimo) bizagirira akamaro abakoresha ikoranabuhanga rifasha, kubura inyandiko yibirango bigaragara birashobora kuba ikibazo kubakoresha bamwe. Ubwoko bumwe bwibirango bigaragara muri rusange ni inzira nziza, haba kubigeraho no gukoreshwa.

Sass

Imiterere myinshi ihindagurika yashyizweho kurwego rusange kugirango yongere ikoreshwe kandi yongerwe nibice bigize imiterere. Uzabibona kenshi $btn-input-*nkimpinduka $input-*.

Ibihinduka

$btn-input-*Ibihinduka bisangiwe kwisi yose ihinduka hagati ya buto yacu nibice bigize imiterere. Uzasangamo kenshi washyizweho nkindangagaciro kubindi bice byihariye bihinduka.

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