Obrazci

Pregled

Kontrolniki obrazcev Bootstrap razširijo naše stile obrazcev Rebooted z razredi. Uporabite te razrede, da se odločite za njihove prilagojene prikaze za bolj dosledno upodabljanje v brskalnikih in napravah.

Prepričajte se, da uporabljate ustrezen typeatribut pri vseh vnosih (npr. emailza e-poštni naslov ali numberza številske informacije), da izkoristite novejše kontrolnike vnosa, kot je preverjanje e-pošte, izbira številk in več.

Tukaj je hiter primer za predstavitev slogov obrazcev Bootstrapa. Nadaljujte z branjem za dokumentacijo o zahtevanih razredih, postavitvi obrazca in več.

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

Besedilo obrazca

Besedilo obrazca na ravni bloka ali v vrstici je mogoče ustvariti z uporabo .form-text.

Besedilo obrazca pod vnosi je mogoče oblikovati z .form-text. Če bo uporabljen element na ravni bloka, je dodan zgornji rob za enostavno ločitev od zgornjih vnosov.

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

Besedilo v vrstici lahko uporablja kateri koli tipičen element HTML v vrstici (naj bo to <span>, <small>, ali kaj drugega) z nič več kot .form-textrazredom.

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

Onemogočeni obrazci

V vnos dodajte disabledlogični atribut, da preprečite interakcije uporabnikov in naredite lažji.

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

Dodajte disabledatribut a <fieldset>, da onemogočite vse kontrole znotraj. Brskalniki obravnavajo vse izvorne kontrolnike obrazca ( <input>, <select>, in <button>elemente) znotraj <fieldset disabled>kot onemogočene, kar preprečuje interakcije s tipkovnico in miško na njih.

Če pa vaš obrazec vključuje tudi elemente, podobne gumbom po meri, kot <a class="btn btn-*">...</a>je , bodo ti dobili samo slog pointer-events: none, kar pomeni, da jih je še vedno mogoče fokusirati in upravljati s tipkovnico. V tem primeru morate ročno spremeniti te kontrolnike z dodajanjem tabindex="-1", da jim preprečite prejemanje fokusa in aria-disabled="disabled"sporočite njihovo stanje podpornim tehnologijam.

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

Dostopnost

Zagotovite, da imajo vsi kontrolniki obrazca ustrezno dostopno ime, tako da je njihov namen mogoče posredovati uporabnikom podpornih tehnologij. Najenostavnejši način za dosego tega je uporaba <label>elementa ali – v primeru gumbov – vključitev dovolj opisnega besedila kot dela <button>...</button>vsebine.

V primerih, ko ni mogoče vključiti vidne <label>ali ustrezne besedilne vsebine, obstajajo alternativni načini za zagotavljanje dostopnega imena, kot so:

• <label>elementi skriti z uporabo .visually-hiddenrazreda
• Kaže na obstoječi element, ki lahko deluje kot oznaka z uporaboaria-labelledby
• Zagotavljanje titleatributa
• Eksplicitna nastavitev dostopnega imena za element z uporaboaria-label

Če nič od tega ni prisotno, se lahko podporne tehnologije zatečejo k uporabi placeholderatributa kot rezerve za dostopno ime <input>in <textarea>elemente. Primeri v tem razdelku ponujajo nekaj predlaganih pristopov za posamezne primere.

Medtem ko bo uporaba vizualno skrite vsebine ( .visually-hidden, aria-label, in celo placeholdervsebine, ki izgine, ko ima polje obrazca vsebino), koristila uporabnikom podporne tehnologije, je lahko pomanjkanje vidnega besedila oznake za nekatere uporabnike še vedno problematično. Neka oblika vidne oznake je na splošno najboljši pristop, tako za dostopnost kot za uporabnost.

Sass

Številne spremenljivke obrazca so nastavljene na splošni ravni za ponovno uporabo in razširitev s posameznimi komponentami obrazca. Najpogosteje jih boste videli kot spremenljivke $btn-input-*in .$input-*

Spremenljivke

$btn-input-*spremenljivke so skupne globalne spremenljivke med našimi gumbi in komponentami obrazca. Ugotovili boste, da so te pogosto prerazporejene kot vrednosti drugim spremenljivkam, specifičnim za komponente.

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