Siffofin

Dubawa

Gudanar da fom ɗin Bootstrap yana faɗaɗa kan salon fasalin mu da aka sake yi tare da azuzuwan. Yi amfani da waɗannan azuzuwan don ficewa cikin keɓancewar nunin su don ƙarin daidaiton ma'ana a cikin masu bincike da na'urori.

Tabbatar amfani da typesifa mai dacewa akan duk abubuwan shigarwa (misali, emaildon adireshin imel ko numberdon bayanin lamba) don cin gajiyar sabbin abubuwan sarrafawa kamar tabbatarwa imel, zaɓin lamba, da ƙari.

Anan ga misali mai sauri don nuna salon sigar Bootstrap. Ci gaba da karantawa don takaddun azuzuwan da ake buƙata, shimfidar tsari, da ƙari.

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

Tsarin rubutu

Za a iya ƙirƙira matakan toshe ko rubutu na layi ta amfani da .form-text.

Za a iya yin salo da rubutu a ƙasa abubuwan da aka shigar da .form-text. Idan za a yi amfani da kashi-matakin toshe, ana ƙara babban gefe don sauƙin tazara daga abubuwan da ke sama.

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

Rubutun cikin layi na iya amfani da kowane nau'in HTML na layi na yau da kullun (zama a <span>, <small>, ko wani abu dabam) ba tare da komai fiye da .form-textaji ba.

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

Siffofin naƙasassu

Ƙara disabledsifa ta boolean akan shigarwa don hana hulɗar mai amfani da sanya ta zama mai sauƙi.

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

Ƙara disabledsifa zuwa wani <fieldset>don kashe duk abubuwan sarrafawa a ciki. Masu bincike suna kula da duk wani tsari na asali ( <input>, <select>, da <button>abubuwa) a cikin <fieldset disabled>nakasassu, suna hana mu'amalar maɓalli da linzamin kwamfuta a kansu.

Koyaya, idan fom ɗin ku kuma ya ƙunshi abubuwa masu kama da maɓalli na al'ada kamar su <a class="btn btn-*">...</a>, waɗannan za a ba su salo ne kawai na pointer-events: none, ma'ana har yanzu ana iya mai da hankali kuma ana iya aiki da su ta amfani da madannai. A wannan yanayin, dole ne ku canza waɗannan sarrafawa da hannu ta ƙara tabindex="-1"don hana su karɓar mayar da hankali da kuma aria-disabled="disabled"nuna alamar jiharsu zuwa fasahar taimako.

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

Dama

Tabbatar cewa duk sarrafa nau'i suna da daidaitattun suna don a iya isar da manufarsu ga masu amfani da fasahar taimako. Hanya mafi sauƙi don cimma wannan ita ce amfani da wani <label>abu, ko—a cikin yanayin maɓalli—don haɗa isasshiyar rubutun siffantawa a matsayin ɓangaren <button>...</button>abun ciki.

Don yanayin da ba zai yiwu a haɗa <label>abun cikin rubutu na bayyane ko dacewa ba, akwai wasu hanyoyi daban-daban na har yanzu samar da suna mai isa, kamar:

• <label>abubuwan da aka ɓoye ta amfani da .visually-hiddenajin
• Nuna wani abu mai wanzuwa wanda zai iya aiki azaman lakabin amfaniaria-labelledby
• Samar da titlesifa
• Tsare-tsare saitin sunan mai isa akan wani yanki ta amfani da shiaria-label

Idan babu ɗayan waɗannan, fasahohin taimako na iya yin amfani da placeholdersifa a matsayin koma baya don samun damar sunan <input>da <textarea>abubuwa. Misalai a cikin wannan sashe suna ba da ƴan shawarwarin da aka ba da shawara, takamaiman hanyoyin.

Yayin amfani da abubuwan ɓoye na gani ( .visually-hidden, aria-label, har ma da placeholderabun ciki, wanda ke ɓacewa da zarar filin tsari yana da abun ciki) zai amfana masu amfani da fasaha na taimako, rashin rubutun lakabin da ake iya gani yana iya zama matsala ga wasu masu amfani. Wani nau'i na alamar alama gabaɗaya ita ce hanya mafi kyau, duka don samun dama da amfani.

Sass

Yawancin masu canjin nau'i an saita su a matakin gabaɗaya don sake amfani da su kuma a faɗaɗa su ta kowane nau'i na nau'i. Za ku ga waɗannan galibi a matsayin $btn-input-*kuma $input-*masu canji.

Masu canji

$btn-input-*ana raba masu canji a duniya tsakanin maɓallan mu da sassan mu. Za ku sami waɗannan akai-akai ana sake sanya su azaman ƙima zuwa wasu takamaiman ma'auni.

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