Mafomu

Mwachidule

Kuwongolera mawonekedwe a Bootstrap kumakulitsa masitayilo athu a Rebooted mawonekedwe ndi makalasi. Gwiritsani ntchito makalasiwa kuti mulowe m'mawonekedwe awo makonda kuti aziwonetsa mosasinthasintha pamasakatuli ndi zida.

Onetsetsani kuti mukugwiritsa ntchito malingaliro oyenera typepazolowetsa zonse (monga emailma adilesi a imelo kapena numbermanambala) kuti mutengere mwayi pazowongolera zatsopano monga kutsimikizira imelo, kusankha manambala, ndi zina zambiri.

Nachi chitsanzo chachangu chowonetsera masitayilo a Bootstrap. Pitilizani kuwerenga zolemba pamakalasi ofunikira, masanjidwe a fomu, ndi zina zambiri.

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

Mawu a fomu

Zolemba za block-level kapena inline-level zitha kupangidwa pogwiritsa ntchito .form-text.

Mawu a fomu pansipa akhoza kulembedwa ndi .form-text. Ngati chinthu cha block-level chidzagwiritsidwa ntchito, malire apamwamba amawonjezedwa kuti mutalikirane mosavuta ndi zomwe zili pamwambapa.

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

Zolemba zapaintaneti zitha kugwiritsa ntchito chinthu chilichonse chamkati cha HTML (chikhale <span>, <small>, kapena china) popanda chilichonse kuposa .form-textkalasi.

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

Mafomu olumala

Onjezani mawonekedwe a disabledboolean pazolowetsa kuti mupewe kulumikizana ndi ogwiritsa ntchito ndikupangitsa kuti ziwonekere zopepuka.

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

Onjezani zomwe zili disabledku a <fieldset>kuti muletse zowongolera zonse mkati. Osakatula amayang'anira mawonekedwe amtundu uliwonse ( <input>, <select>, ndi <button>zinthu) mkati <fieldset disabled>mwazolephereka, kuletsa kulumikizana kwa kiyibodi ndi mbewa pa iwo.

Komabe, ngati mawonekedwe anu akuphatikizanso zinthu zonga mabatani monga <a class="btn btn-*">...</a>, izi zimangopatsidwa kalembedwe ka pointer-events: none, kutanthauza kuti akadali owoneka bwino komanso osavuta kugwiritsa ntchito kiyibodi. Pamenepa, muyenera kusintha maulamulirowa pamanja powonjezera tabindex="-1"kuti muwalepheretse kuyang'ana kwambiri aria-disabled="disabled"ndikuwonetsa dziko lawo ku matekinoloje othandizira.

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

Kufikika

Onetsetsani kuti zowongolera mafomu zonse zili ndi dzina loyenera kupezeka kuti cholinga chake chiperekedwe kwa ogwiritsa ntchito matekinoloje othandizira. Njira yosavuta yokwaniritsira izi ndikugwiritsa ntchito <label>chinthu, kapena - ngati mabatani - kuphatikiza mawu ofotokozera mokwanira monga gawo la <button>...</button>zomwe zili.

Pazochitika zomwe sizingatheke kuyika mawu owoneka <label>kapena oyenera, pali njira zina zoperekera dzina lopezeka, monga:

• <label>zinthu zobisika pogwiritsa ntchito .visually-hiddenkalasi
• Kulozera ku chinthu chomwe chilipo chomwe chingathe kukhala ngati chizindikiro chogwiritsa ntchitoaria-labelledby
• Kupereka titlelingaliro
• Kukhazikitsa dzina lopezeka pachinthu chogwiritsa ntchitoaria-label

Ngati palibe chimodzi mwa izi, matekinoloje othandizira atha kugwiritsa ntchito mawonekedwewo placeholderngati kubwereranso kwa dzina lofikirako <input>ndi <textarea>zinthu. Zitsanzo zomwe zili m'gawoli zimapereka njira zingapo zopangira, zomwe zimatengera zochitika zenizeni.

Ngakhale kugwiritsa ntchito zobisika zowoneka (,, .visually-hiddenkomanso aria-labelzomwe placeholderzili, zomwe zimasowa kamodzi gawo la mawonekedwe liri ndi zokhutira) zidzapindulitsa ogwiritsa ntchito zipangizo zamakono zothandizira, kusowa kwa malemba owoneka bwino kungakhalebe kovuta kwa ogwiritsa ntchito ena. Mitundu ina ya zilembo zowonekera nthawi zambiri ndiyo njira yabwino kwambiri, yopezeka komanso yogwiritsidwa ntchito.

Sass

Mitundu yambiri yamitundu imayikidwa pamlingo wamba kuti igwiritsidwenso ntchito ndikuwonjezedwa ndi zigawo zamtundu uliwonse. Mudzawona izi nthawi zambiri ngati $btn-input-*ndi $input-*zosinthika.

Zosintha

$btn-input-*zosinthika zimagawidwa padziko lonse lapansi pakati pa mabatani athu ndi zigawo zathu za mawonekedwe. Mupeza kuti izi zimagawikanso pafupipafupi ngati zosintha zamagulu ena.

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