Kpekpeɖeŋugbalẽviwo

Kpɔɖeŋunyagbɔgblɔ

Bootstrap ƒe agbalẽvi dzi kpɔkpɔwo kekea míaƒe Rebooted agbalẽvi ƒe atsyãwo ɖe enu kple klasswo. Zã klass siawo nàtsɔ atia woƒe ɖeɖefia siwo wowɔ ɖe ɖoɖo nu la me hena gɔmeɖeɖe si mewɔa tɔtrɔ o wu le web-browserwo kple mɔ̃wo dzi.

Kpɔ egbɔ be yezã typenɔnɔme si sɔ ɖe nyawo katã dzi (le kpɔɖeŋu me, emailna e-mail adrɛs alo numberna xexlẽdzesiwo ŋuti nyatakakawo) be nàwɔ nyawo tsɔtsɔ de eme ƒe dziɖuɖu yeyewo abe e-mail ƒe kpeɖodzi, xexlẽdzesi tiatia, kple bubuwo ŋudɔ.

Kpɔɖeŋu kaba aɖe si nàtsɔ aɖe Bootstrap ƒe nɔnɔme ƒe atsyãwo afiae nye esi. Yi edzi nànɔ nu xlẽm hena nuŋlɔɖi siwo ku ɖe klass siwo wobia tso ame si, agbalẽviawo ƒe ɖoɖo, kple bubuwo ŋu.

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

Kpe nyawo ɖo

Woateŋu awɔ nuŋlɔɖi si le mɔxenu alo esi le fli me ƒe nuŋɔŋlɔ to .form-text.

Woate ŋu awɔ nuŋɔŋlɔ si le nuŋɔŋlɔ siwo le ete la ƒe atsyã kple .form-text. Ne woazã block-level element la, wotsɔa dzigbe margin kpena ɖe eŋu hena dometsotso bɔbɔe tso nusiwo wotsɔ de eme siwo le etame gbɔ.

<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 ateŋu azã inline HTML element ɖesiaɖe si bɔ (eɖanye <span>, <small>, alo nu bubu aɖe o) kple naneke wu .form-textklass la o.

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

Nuwɔametɔwo ƒe agbalẽviwo

Tsɔ disabledboolean nɔnɔme kpe ɖe nyawo tsɔtsɔ de eme ŋu be nàxe mɔ ɖe zãla ƒe kadodowo nu eye nàna wòadze abe ɖe wòle bɔbɔe ene.

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

Tsɔ disablednɔnɔmea kpe ɖe a <fieldset>ŋu be nàwɔ dziɖuɖu siwo katã le eme la nuwɔametɔe. Browserwo bua native form controls ( <input>, <select>, kple <button>elements) katã le a me <fieldset disabled>abe nuwɔametɔwo ene, si xea mɔ na keyboard kple mouse siaa ƒe kadodo le wo dzi.

Gake ne nusiwo le abe abɔta ene siwo wowɔ ɖe ɖoɖo nu hã le wò agbalẽvia me la <a class="btn btn-*">...</a>, , ƒe atsyã koe woana esiawo pointer-events: none, si fia be woate ŋu akpɔ wo dzi kokoko eye woate ŋu awɔ dɔ le keyboard la zazã me. Le go sia me la, ele be nàtsɔ asi atrɔ asi le dziɖuɖu siawo ŋu to wo tsɔtsɔ kpee tabindex="-1"me be woaxe mɔ na wo be woagaxɔ susu o eye aria-disabled="disabled"nàde dzesi woƒe nɔnɔme na kpekpeɖeŋunamɔ̃ɖaŋunuwo.

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

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Kpɔ egbɔ be ŋkɔ si sɔ si ŋu woate ŋu aɖo la le agbalẽviwo dzi kpɔkpɔwo katã si ale be woate ŋu agblɔ woƒe taɖodzinu na kpekpeɖeŋunamɔ̃wo zãlawo. Mɔ bɔbɔetɔ kekeake si dzi woato awɔ esiae nye be woazã nu <label>vevi aɖe, alo—le abɔtawo gome la—be woade nuŋɔŋlɔ si ɖɔ nu wòade eme la eme abe <button>...</button>emenyawo ƒe akpa aɖe ene.

Le nɔnɔme siwo me manya wɔ be woatsɔ <label>nuŋɔŋlɔ si woate ŋu akpɔ alo si sɔ ade eme o gome la, mɔ bubuwo li siwo dzi woato ana ŋkɔ si ŋu woate ŋu ake ɖo kokoko, abe:

• <label>nusiwo woɣla to .visually-hiddenklass la zazã me
• Fia asi nusi li xoxo si ate ŋu awɔ dɔ abe dzeside ene zazãaria-labelledby
• titleNɔnɔme aɖe nana
• Ðo ŋkɔ si ŋu woate ŋu age ɖo la ɖe element aɖe dzi tẽe to zazã mearia-label

Ne esiawo dometɔ aɖeke mele afima o la, kpekpeɖeŋunamɔ̃wo ateŋu azã placeholdernɔnɔmea abe fallback na ŋkɔ si woateŋu akpɔ le <input>kple <textarea>elements. Kpɔɖeŋu siwo le akpa sia me na mɔnu ʋɛ aɖewo siwo wodo ɖa, siwo ku ɖe nya aɖewo koŋ ŋu.

Togbɔ be nyatakaka siwo woɣla ɖe nukpɔkpɔ me zazã ( .visually-hidden, aria-label, kple placeholdernyatakakawo gɔ̃ hã, siwo nu yina ne nyatakakawo le agbalẽvi aɖe ƒe akpa aɖe me ko) aɖe vi na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu zãlawo hã la, nuŋɔŋlɔ si woate ŋu akpɔ ƒe anyimanɔmanɔ ate ŋu anye kuxi na ezãla aɖewo kokoko. Zi geɖe la, dzesidenu si wokpɔna ƒomevi aɖee nye mɔnu nyuitɔ kekeake, le alesi woate ŋu akpɔe kple alesi woate ŋu azãe siaa gome.

Sass ƒe nyawo

Woɖoa nɔnɔme ƒe tɔtrɔ geɖewo ɖe ɖoɖo si bɔ nu be woagazã wo ake eye woakeke wo ɖe enu to nɔnɔme ƒe akpa ɖekaɖekawo dzi. Àkpɔ esiawo zi geɖe wu abe $input-btn-*kple $input-*tɔtrɔwo ene.

Nusiwo trɔna

$input-btn-*tɔtrɔwo nye xexeame katã ƒe tɔtrɔ siwo woma ɖe míaƒe abɔtawo kple míaƒe nɔnɔmetata ƒe akpawo dome. Àkpɔe be wogbugbɔ dea asi na esiawo enuenu abe asixɔxɔwo ene na akpa aɖewo koŋ ƒe tɔtrɔ bubuwo.

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