teny

Overview

Ny fanaraha-maso ny endrika Bootstrap dia mivelatra amin'ny endrika endrika Rebooted miaraka amin'ny kilasy. Ampiasao ireo kilasy ireo mba hisafidianana amin'ny fampiratiana voatokana ho an'ny fandikana tsy miovaova kokoa amin'ny navigateur sy fitaovana.

Aza hadino ny mampiasa typetoetra mety amin'ny fampidirana rehetra (oh: emailny adiresy mailaka na numberny fampahalalana isa) mba hanararaotra ny fanaraha-maso vaovao kokoa toy ny fanamarinana mailaka, fifantenana isa, sy ny maro hafa.

Ity misy ohatra haingana hanehoana ny endrika endrika Bootstrap. Tohizo ny famakiana ho an'ny antontan-taratasy momba ny kilasy ilaina, ny famolavolana endrika, sy ny maro hafa.

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

Text endrika

Azo noforonina amin'ny fampiasana .form-text.

Ny endri-tsoratra eo ambanin'ny fampidirana dia azo atao amin'ny .form-text. Raha singa ambaratonga sakana no hampiasaina, dia asiana sisiny ambony ho mora ny elanelana avy amin'ireo fampidirana etsy ambony.

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

Ny lahatsoratra an-tsoratra dia afaka mampiasa singa HTML an-tsoratra mahazatra (na <span>, <small>, na zavatra hafa) tsy misy afa-tsy ny .form-textkilasy.

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

Endrika kilemaina

Ampio ny disabledtoetra boolean amin'ny fampidirana iray mba hisorohana ny fifandraisan'ny mpampiasa sy hahatonga azy ho maivana kokoa.

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

Ampio ny disabledtoetra amin'ny a <fieldset>hanalana ny fanaraha-maso rehetra ao anatiny. Ny navigateur dia mitondra ny fanaraha-maso ny endriky ny teratany ( <input>, <select>, ary ny <button>singa) ao anaty a <fieldset disabled>ho toy ny kilemaina, manakana ny fifaneraserana amin'ny klavier sy ny totozy.

Na izany aza, raha misy singa mitovy amin'ny bokotra mahazatra toy ny <a class="btn btn-*">...</a>, ny endrikao dia homena style of pointer-events: none, izay midika fa mbola azo ifantohany sy azo ampiasaina amin'ny fampiasana ny klavier. Amin'ity tranga ity, tsy maintsy ovainao amin'ny tanana ireo fanaraha-maso ireo amin'ny fanampiana tabindex="-1"mba hisakanana azy ireo tsy hahazo fifantohana sy aria-disabled="disabled"hanamarihana ny fanjakany amin'ny teknolojia manampy.

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

Accessibility

Ataovy azo antoka fa manana anarana azo idirana mifanaraka amin'izany ny fanaraha-maso ny endrika rehetra mba hampita ny tanjon'izy ireo amin'ireo mpampiasa ny teknolojia manampy. Ny fomba tsotra indrindra hanatrarana izany dia ny fampiasana <label>singa iray, na — raha ny bokotra — mba hampidirana lahatsoratra misy famaritana ampy ho ampahany amin'ny <button>...</button>atiny.

Ho an'ny toe-javatra izay tsy azo atao ny mampiditra <label>atiny lahatsoratra hita maso na mety, dia misy fomba hafa ahafahana manome anarana azo idirana, toy ny:

• <label>singa miafina mampiasa ny .visually-hiddenkilasy
• Manondro singa efa misy izay afaka miasa toy ny etikety mampiasaaria-labelledby
• Fanomezana titletoetra
• Fametrahana mazava ny anarana azo idirana amin'ny singa iray mampiasaaria-label

Raha tsy misy amin'ireo, ny teknolojia mpanampy dia mety hampiasa ny placeholdertoetra ho toy ny fiatoana amin'ny anarana <input>sy <textarea>singa azo idirana. Ny ohatra ato amin'ity fizarana ity dia manome soso-kevitra vitsivitsy, fomba fiasa manokana.

Raha mampiasa votoaty miafina hita maso ( .visually-hidden, aria-label, eny fa na dia placeholdervotoaty aza, izay manjavona rehefa misy votoaty ny sahan'ny endrika iray) dia hahazo tombony amin'ny mpampiasa teknolojia manampy, ny tsy fahampian'ny soratra marika hita maso dia mety mbola olana ho an'ny mpampiasa sasany. Ny endriky ny marika hita maso amin'ny ankapobeny no fomba tsara indrindra, na ho an'ny fahafahana miditra sy azo ampiasaina.

Sass

Maro ireo fari-pahaizan'ny endrika apetraka amin'ny ambaratonga ankapobeny mba hampiasaina indray sy hitarina amin'ny singa endrika tsirairay. Ho hitanao matetika amin'ny anarana $btn-input-*sy $input-*miovaova ireo.

hiovaova

$btn-input-*variables dia mizara fari-pitsipika manerantany eo amin'ny bokotra sy ny singa endrika. Ho hitanao fa voatendry matetika ho sanda ho an'ny fari-pahalalana hafa manokana ireo singa ireo.

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