Swivumbeko

Nkatsakanyo

Swilawuri swa fomo swa Bootstrap swi andlala eka switayele swa hina swa fomo leswi Rebooted hi titlilasi. Tirhisa titlilasi leti ku hlawula eka swikombiso swa tona leswi endleriweke ku hundzuluxela loku nga cincekiki eka swihlamusela-marito ni switirhisiwa.

Tiyisisa leswaku u tirhisa typexihlawulekisi lexi faneleke eka swingheniso hinkwaswo (xikombiso, emaileka adirese ya imeyili kumbe numbereka vuxokoxoko bya tinhlayo) ku tirhisa vulawuri bya swingheniso leswintshwa swo fana na ku tiyisisiwa ka imeyili, ku hlawula tinomboro, na swin’wana.

Hi lexi xikombiso xo hatlisa xo kombisa switayele swa xivumbeko xa Bootstrap. Tshama u ri karhi u hlaya ku kuma matsalwa ya titlilasi leti lavekaka, maendlelo ya fomo, na swin’wana.

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

Vumba tsalwa

Tsalwa ra fomo ya xiyimo xa xibokisana kumbe ya xiyimo xa le ndzeni ka layini ri nga endliwa hi ku tirhisa .form-text.

Fomo ya tsalwa ehansi ka swingheniso swi nga endliwa xitayili hi .form-text. Loko ku ta tirhisiwa elemente ya block-level, margin yale henhla ya engeteriwa kuva ku olova ku hambana kusuka eka swingheniso leswinga laha henhla.

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

Tsalwa ra le ndzeni ka layini ri nga tirhisa xiaki xihi na xihi xa HTML xa le ndzeni ka layini lexi tolovelekeke (ku nga va <span>, <small>, kumbe swin’wana) lexi nga riki na nchumu handle ka .form-texttlilasi.

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

Tifomo ta vulema

Engetela disabledxihlawulekisi xa boolean eka input ku sivela ku tirhisana ka vatirhisi na ku endla leswaku yi vonaka yi olova.

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

Engetela disabledxihlawulekisi eka a <fieldset>ku tshikisa vulawuri hinkwabyo endzeni. Swihlamusela-marito swi khoma vulawuri hinkwabyo bya xivumbeko xa ntumbuluko ( <input>, <select>, na <button>swiaki) endzeni ka a <fieldset disabled>tanihi leswi nga tirhiki, swi sivela ku tirhisana ka khibhodi na mbeva eka swona.

Kambe loko fomo ya wena yi tlhela yi katsa swiaki swo fana na buti ya ntolovelo swo fana na <a class="btn btn-*">...</a>, leswi swi ta nyikiwa ntsena xitayili xa pointer-events: none, leswi vulaka leswaku swa ha kongomisiwa naswona swa tirha hi ku tirhisa khibhodi. Eka xiyimo lexi, u fanele ku cinca hi voko vulawuri lebyi hi ku engetela tabindex="-1"ku byi sivela ku amukela ku kongomisa na aria-disabled="disabled"ku kombisa xiyimo xa byona eka thekinoloji yo pfuneta.

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

Ku fikelela

Tiyisisa leswaku vulawuri hinkwabyo bya tifomo byi na vito leri faneleke leri fikelelaka leswaku xikongomelo xa byona xi ta hundziseriwa eka vatirhisi va thekinoloji yo pfuneta. Ndlela yo olova yo fikelela leswi i ku tirhisa <label>xiaki, kumbe—eka swikomba-nkarhi—ku katsa tsalwa leri hlamuselaka hi laha ku eneleke tanihi xiphemu xa leswi <button>...</button>nga endzeni.

Eka swiyimo leswi swi nga kotekiki ku katsa <label>nhundzu ya tsalwa leyi vonakaka kumbe leyi faneleke, ku na tindlela tin’wana to ha nyika vito leri fikelelaka, to tanihi:

• <label>swiaki leswi fihliweke hi ku tirhisa .visually-hiddentlilasi
• Ku kombetela eka elemente leyi nga kona leyi nga tirhaka tanihi lebula hi ku tirhisaaria-labelledby
• Ku nyika titlexihlawulekisi
• Ku veka hi ku kongoma vito leri fikelelaka eka elemente hi ku tirhisaaria-label

Loko ku nga ri na xin’we xa leswi lexi nga kona, thekinoloji yo pfuneta yi nga ha tirhisa placeholderxihlawulekisi tanihi ku tlhelela endzhaku eka vito leri fikelelaka eka <input>na <textarea>swiaki. Swikombiso leswi nga eka xiyenge lexi swi nyika maendlelo ma nga ri mangani lama ringanyetiweke, lama kongomeke eka xiyimo.

Loko ku tirhisa swilo leswi fihliweke hi mahlo ( .visually-hidden, aria-label, hambi ku ri placeholderswilo, leswi nyamalaka loko nsimu ya fomo yi ri na nhundzu) swi nga ta vuyerisa vatirhisi va thekinoloji leyi pfunaka, ku pfumaleka ka tsalwa ra lebula leri vonakaka swi nga ha va xiphiqo eka vatirhisi vo karhi. Xivumbeko xin’wana xa lebula leyi vonakaka hi ntolovelo i ndlela leyinene ngopfu, eka ku fikelela na ku tirhiseka.

Sass

Swilo swo tala leswi cinca-cincaka swa xivumbeko swi vekiwa eka xiyimo xo angarhela leswaku swi ta tirhisiwa nakambe no andlariwa hi swiphemu swa xivumbeko ha xin’we. U ta vona leswi ngopfu-ngopfu tanihi $btn-input-*na $input-*swilo leswi cinca-cincaka.

Swilo leswi cinca-cincaka

$btn-input-*swilo leswi cinca-cincaka i swilo leswi cinca-cincaka swa misava hinkwayo leswi avelaniwa exikarhi ka swikomba-nkarhi swa hina ni swiphemu swa hina swa xivumbeko. U ta kuma leswi swi tshamelaka ku averiwa nakambe tanihi mimpimo eka swilo swin’wana leswi cinca-cincaka leswi kongomeke swa xiphemu.

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