Ụdị

Nchịkọta

Njikwa ụdị Bootstrap na-agbasawanye n'ụdị anyị ewegharịrị na klas. Jiri klaasị ndị a banye n'ime ihe ngosi haziri ahazi maka ntụgharị na-agbanwe agbanwe n'ofe ihe nchọgharị na ngwaọrụ.

Jide n'aka na ị ga-eji njirimara kwesịrị ekwesị typena ntinye niile (dịka ọmụmaatụ, emailmaka adreesị ozi-e ma ọ bụ numbermaka ozi ọnụọgụ) iji nweta uru njikwa ndenye ọhụrụ dị ka nkwenye email, nhọrọ nọmba, na ndị ọzọ.

Nke a bụ ọmụmaatụ ngwa ngwa iji gosipụta ụdị ụdị Bootstrap. Nọgidenụ na-agụ maka akwụkwọ na klas achọrọ, nhazi ụdị, na ndị ọzọ.

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

Ụdị ederede

Enwere ike ịmepụta ederede ọkwa mgbochi ma ọ bụ ọkwa ntanetị site na iji .form-text.

Enwere ike iji ụdị ederede dị n'okpuru ntinye .form-text. Ọ bụrụ na a ga-eji mmewere-ọkwa mgbochi, a ga-agbakwunye oke oke maka ohere dị mfe site na ntinye n'elu.

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

Ederede inline nwere ike iji ihe ọ bụla HTML inline inline (bụ a <span>, <small>, ma ọ bụ ihe ọzọ) na-enweghị ihe ọ bụla karịa .form-textklas.

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

Ụdị nkwarụ

Tinye njirimara disabledboolean na ntinye iji gbochie mmekọrịta ndị ọrụ wee mee ka ọ dị ọkụ.

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

Tinye disablednjirimara na a <fieldset>iji gbanyụọ njikwa niile dị n'ime. Ihe nchọgharị na-emeso njikwa ụdị ala ala niile ( <input>, <select>, na <button>ọcha) n'ime onye <fieldset disabled>nwere nkwarụ, na-egbochi ma keyboard na òké mmekọrịta na ha.

Otú ọ dị, ọ bụrụ na ụdị gị gụnyekwara ihe ndị yiri bọtịnụ omenala dị ka <a class="btn btn-*">...</a>, a ga-enye ndị a naanị ụdị nke pointer-events: none, nke pụtara na ha ka na-elekwasị anya ma na-arụ ọrụ site na iji ahụigodo. N'okwu a, ị ga-eji aka gbanwee njikwa ndị a site n'ịgbakwunye tabindex="-1"iji gbochie ha ịnweta elekwasị anya na aria-disabled="disabled"igosi steeti ha na teknụzụ enyemaka.

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

Nnweta

Gbaa mbọ hụ na njikwa ụdị niile nwere aha enwere ike ịnweta nke ọma ka ebumnobi ha nye ndị ọrụ teknụzụ enyemaka. Ụzọ kachasị mfe iji nweta nke a bụ iji <label>mmewere, ma ọ bụ-n'ihe gbasara bọtịnụ-tinye ederede nkọwa zuru oke dịka akụkụ nke <button>...</button>ọdịnaya.

Maka ọnọdụ ebe ọ na-agaghị ekwe omume ịgụnye <label>ọdịnaya ederede a na-ahụ anya ma ọ bụ dabara adaba, enwere ụzọ ọzọ ị ka na-enye aha enwere ike ịnweta, dị ka:

• <label>ihe ezoro ezo site na iji .visually-hiddenklas
• Na-atụ aka na mmewere dị adị nwere ike rụọ ọrụ dị ka akara ijiaria-labelledby
• Inye titleàgwà
• Dozie aha a ga-enweta nke ọma na mmewere site na ijiaria-label

Ọ bụrụ na ọdịghị nke ọ bụla n'ime ihe ndị a, teknụzụ enyemaka nwere ike ịmalite iji placeholdernjirimara dị ka ndaghachi azụ maka aha enwere ike na <input>na <textarea>ihe. Ọmụmaatụ ndị dị na ngalaba a na-enye ụzọ ole na ole atụpụtara, nke akọwapụtara nke ọma.

Mgbe ị na-eji ọdịnaya ezoro ezo ( .visually-hidden, aria-label, na ọbụna placeholderọdịnaya, nke na-apụ n'anya ozugbo mpaghara ụdị nwere ọdịnaya) ga-erite uru ndị ọrụ teknụzụ na-enyere aka, enweghị ederede akara ngosi a na-ahụ anya ka nwere ike bụrụ nsogbu maka ụfọdụ ndị ọrụ. Ụdị ụfọdụ nke akara a na-ahụ anya bụ n'ozuzu ụzọ kachasị mma, ma maka ịnweta ya na ojiji.

Sass

A na-edozi ọtụtụ ụdị mgbanwe n'ogo n'ozuzu ka a ga-ejikwa ya ma gbasaa site na ngwa ụdị nke ọ bụla. Ị ga-ahụkarị ndị a dị ka $input-btn-*na $input-*mgbanwe.

Mgbanwe

$input-btn-*mgbanwe na-ekekọrịta mgbanwe zuru ụwa ọnụ n'etiti bọtịnụ anyị na ngwa ụdị anyị. Ị ga-ahụ ndị a na-ekenye kwa oge ka ọ bụrụ ụkpụrụ na mgbanwe ndị ọzọ akọwapụtara.

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