Source

teny

Ohatra sy torolalana fampiasana ho an'ny fomba fanaraha-maso ny endrika, safidy fandrindrana ary singa manokana amin'ny famoronana endrika isan-karazany.

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.

Tsy hizara ny mailakao amin'olona na oviana na oviana izahay. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group 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>

Fifehezana endrika

Ny fanaraha-mason'ny endri-tsoratra—toy ny <input>s, <select>s, ary <textarea>s—dia atao amin'ny .form-controlkilasy. Ao anatin'izany ny endrika ho an'ny endrika ankapobeny, ny toetry ny fifantohana, ny habeny ary ny maro hafa.

Aza hadino ny mijery ireo endrika fanaonay mba hahitana fomba hafa <select>.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Ho an'ny fampidiran-drakitra, ampifamadiho .form-controlny .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Famaritana

Mametraha haavo amin'ny fampiasana kilasy toy ny .form-control-lgand .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Mamaky fotsiny

Ampio ny readonlytoetra boolean amin'ny fidirana iray mba hisorohana ny fanovana ny sandan'ny fidirana. Ny fampidirana vakiana fotsiny dia toa maivana kokoa (tahaka ny fampidirana kilemaina), saingy tazony ny cursor mahazatra.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>

Lahatsoratra tsotra fotsiny

Raha te hanana <input readonly>singa ao amin'ny endrikao ho toy ny lahatsoratra tsotra ianao dia ampiasao ny .form-control-plaintextkilasy hanesorana ny famolavolan'ny sahan'ny endrika default ary tehirizo ny sisiny sy ny padding marina.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Fampidirana isan-karazany

Mametraha fampidirana isan-karazany azo aroso mitsivalana amin'ny fampiasana .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Boxes sy radios

Nohatsaraina ny boaty fisavana sy ny radio mahazatra miaraka amin'ny fanampian'ny .form-check, kilasy tokana ho an'ireo karazana fampidirana izay manatsara ny fandrindrana sy ny fitondran-tenan'ireo singa HTML . Ny boaty fanamarihana dia natao hisafidianana safidy iray na maromaro ao anaty lisitra, raha ny radio kosa dia natao hisafidianana safidy iray amin'ny maro.

Tohanana ny boaty fisaka sy radio kilemaina. Ny disabledtoetra dia hampihatra loko maivana kokoa hanampy amin'ny famantarana ny toetran'ny fampidirana.

Ny boaty sy ny bokotra radio dia manohana ny fanamarinana endrika mifototra amin'ny HTML ary manome etikety fohy sy azo idirana. Noho izany, ny <input>s sy <label>s dia singa iray mpirahalahy mifanohitra amin'ny <input>ao anatin'ny <label>. Somary be verbose kokoa ity satria tsy maintsy amaritanao ny toetra idsy forny toetra mifandraika amin'ny <input>and <label>.

Default (mifantina)

Amin'ny alàlan'ny default, izay isan'ny boaty fisaka sy radio izay mpiray tampo akaiky dia hatambatra mitsangana ary apetraka mifanaraka amin'ny .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Milahatra

Vondrona boaty na radio amin'ny andalana marindrano mitovy amin'ny fanampiana .form-check-inlineamin'ny .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Tsy misy etikety

Ampio .position-staticamin'ny fampidirana ao anatiny .form-checkizay tsy misy soratra misy marika. Tsarovy fa mbola manome endrika marika ho an'ny teknolojia manampy (ohatra, ny fampiasana aria-label).

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

fisehon'ny

Koa satria mihatra ny Bootstrap display: blockary width: 100%saika amin'ny fanaraha-maso ny endrika rehetra, dia mitsangana mitsangana ny endrika. Ny kilasy fanampiny dia azo ampiasaina hanovana an'io lamina io amin'ny endrika isan-karazany.

Manaova vondrona

Ny .form-groupkilasy no fomba mora indrindra hanampiana rafitra sasany amin'ny endrika. Izy io dia manome kilasy miovaova izay mamporisika ny fanakambanana etikety araka ny tokony ho izy, ny fanaraha-maso, ny lahatsoratra fanampiana azo atao, ary ny fandefasana hafatra fanamarinana. Amin'ny alàlan'ny default dia mihatra fotsiny izy io margin-bottom, fa maka endrika fanampiny .form-inlineraha ilaina izany. Ampiasao miaraka amin'ny <fieldset>s, <div>s, na saika singa hafa.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
  </div>
</form>

Form grid

Ny endrika sarotra kokoa dia azo amboarina amin'ny alàlan'ny kilasin'ny grid. Ampiasao ireo ho an'ny famolavolana endrika izay mitaky tsanganana maro, sakany isan-karazany ary safidy fampifanarahana fanampiny.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Laharana endrika

Azonao atao ihany koa ny manakalo .rowamin'ny .form-row, fiovaovan'ny tsipika manara-penitra izay manafoana ny tatatra tsanganana mahazatra ho an'ny fisehon'ny tery kokoa sy mirindra kokoa.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Azo amboarina miaraka amin'ny rafitra grid ihany koa ny fandrafetana sarotra kokoa.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

endrika marindrano

Mamorona endrika marindrano miaraka amin'ny grid amin'ny alàlan'ny fampidirana ny .rowkilasy hamorona vondrona ary ampiasao ireo .col-*-*kilasy mba hamaritana ny sakan'ny marika sy ny fanaraha-maso. Ataovy azo antoka ny manampy .col-form-labelny <label>s anao koa mba hiorenan'izy ireo mitsangana miaraka amin'ny fanaraha-maso ny endrika mifandray aminy.

Indraindray, mety mila mampiasa margin na fitaovana padding ianao mba hamoronana ny fampifanarahana tonga lafatra ilainao. Ohatra, nesorinay ny padding-topmari-pamantarana fampidiran-dresaka amin'ny onjam-peo mba hampifanaraka tsara ny tsipika fototra.

Radios
Checkbox 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Famaritana ny mari-pamantarana endrika marindrano

Aza hadino ny mampiasa .col-form-label-smna .col-form-label-lgamin'ny <label>s na ny anao <legend>mba hanaraka tsara ny haben'ny .form-control-lgsy .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Fametrahana tsanganana

Araka ny asehon'ireo ohatra teo aloha, ny rafitra grid dia ahafahanao mametraka isa maromaro ao .colanatin'ny a .rowna .form-row. Hozarainy mitovy amin'izy ireo ny sakany misy. Azonao atao ihany koa ny misafidy ny ampahany amin'ny tsangananao mba haka toerana bebe kokoa na latsaka, fa ny ambiny kosa .coldia mizara ny ambiny, miaraka amin'ny kilasy tsanganana manokana toy ny .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-sizing

Ny ohatra eto ambany dia mampiasa fampiasa flexbox mba hampifantohana mitsangana ny atiny sy hanova .colazy .col-automba tsy haka toerana betsaka araka izay ilaina ihany ny tsangananao. Raha lazaina amin'ny teny hafa, ny haben'ny tsanganana dia miankina amin'ny atiny.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Azonao atao ny mampifangaro izany indray miaraka amin'ny kilasy tsanganana voafaritra habe.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Ary mazava ho azy fa tohanana ny fanaraha- maso fanao mahazatra .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Endrika an-tsoratra

Ampiasao ny .form-inlinekilasy hanehoana marika maromaro, fanaraha-maso endrika, ary bokotra amin'ny laharana marindrano iray. Ny fanaraha-maso ny endrika ao anatin'ny endrika an-tsoratra dia miovaova kely amin'ny toetry ny default.

  • Ny fanaraha-maso dia display: flex, mampirodana ny habaka fotsy HTML rehetra ary mamela anao hanome fifehezana fampifanarahana amin'ny fampitaovana sy flexbox .
  • Ny vondrona fanaraha-maso sy ny fampidirana dia mahazo manaisotra width: autony default Bootstrap width: 100%.
  • Ny fanaraha- maso dia miseho an-tserasera fotsiny amin'ny seranan-tsambo izay 576px fara fahakeliny ny sakany mba hahitana ny seranan-tsambo tery amin'ny fitaovana finday.

Mety ilainao ny miresaka amin'ny tanana ny sakany sy ny fampifanarahana ny fanaraha-mason'ny endrika tsirairay miaraka amin'ny fitaovana fanasarahana (araka ny aseho etsy ambany). Farany, aoka ho azo antoka ny hampiditra foana ny <label>fanaraha-maso ny endrika tsirairay, na dia mila manafina izany amin'ireo mpitsidika tsy mpamaky efijery miaraka amin'ny .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Tohanana ihany koa ny fanaraha-maso sy fifantenana endrika manokana.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Alternatives amin'ny labels miafina

Ny teknolojia manampy toy ny mpamaky efijery dia hanana olana amin'ny lasitranao raha tsy mampiditra marika ho an'ny fidirana rehetra ianao. Ho an'ireo endrika an-tsoratra ireo dia azonao atao ny manafina ireo etikety amin'ny fampiasana ny .sr-onlykilasy. Misy fomba hafa hafa amin'ny fanomezana marika ho an'ny teknolojia manampy, toy ny aria-label, aria-labelledbyna titletoetra. Raha tsy misy amin'ireo, ny teknolojia mpanampy dia mety hampiasa ny placeholdertoetra, raha misy, saingy mariho fa ny fampiasana placeholderho solon'ny fomba fametahana marika hafa dia tsy soso-kevitra.

Lahatsoratra fanampiana

Ny lahatsoratra fanampiana amin'ny ambaratonga sakana dia azo noforonina amin'ny fampiasana .form-text(fantatra taloha hoe .help-blockamin'ny v3). Ny lahatsoratra fanampiana an-tserasera dia azo ampiharina amin'ny fomba mora ampiasaina amin'ny alàlan'ny singa HTML an-tserasera sy kilasy ilaina toy ny .text-muted.

Ampifandraiso amin'ny fanaraha-maso ny endrika

Ny lahatsoratra fanampiana dia tokony ampifandraisina mazava amin'ny fifehezana endrika mifandraika amin'ny fampiasana ilay aria-describedbytoetra. Izany dia hiantoka fa ny teknolojia manampy — toy ny mpamaky efijery — dia hanambara ity lahatsoratra fanampiana ity rehefa mifantoka na miditra amin'ny fanaraha-maso ny mpampiasa.

Ny lahatsoratra fanampiana eto ambany dia azo asiana endrika miaraka amin'ny .form-text. Ity kilasy ity dia ahitana display: blocksy manampy sisiny ambony ho mora ny elanelana avy amin'ireo fidirana etsy ambony.

Tsy maintsy tarehintsoratra 8-20 ny halavan'ny tenimiafinao, misy litera sy isa, ary tsy tokony hisy habaka, tarehintsoratra manokana, na emoji. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

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

Tsy maintsy tarehintsoratra 8-20 ny halavany. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

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.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <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>
Azafady miaraka amin'ny vatofantsika

Amin'ny alàlan'ny default, ny mpitety tranonkala dia hitondra ny fanaraha-maso ny endriky ny teratany rehetra ( <input>, <select>sy ny <button>singa) ao anatin'ny ho <fieldset disabled>toy ny kilemaina, manakana ny fifandraisan'ny klavier sy ny totozy eo aminy. Na izany aza, raha misy <a ... class="btn btn-*">singa ihany koa ny endrikao, dia homena style of pointer-events: none. Araka ny nomarihina tao amin'ny fizarana momba ny toetry ny kilema ho an'ny bokotra (ary indrindra ao amin'ny fizarana ho an'ny singa vatofantsika), ity fananana CSS ity dia tsy mbola manara-penitra ary tsy tohanana tanteraka ao amin'ny Internet Explorer 10, ary tsy manakana ny mpampiasa klavier tsy ho lasa. afaka mampifantoka na manetsika ireo rohy ireo. Noho izany, mba ho azo antoka, mampiasa JavaScript manokana hanaisotra ny rohy toy izany.

Mifanaraka amin'ny navigateur

Raha hampihatra ireo fomba ireo amin'ny navigateur rehetra i Bootstrap, ny Internet Explorer 11 sy ambany dia tsy manohana tanteraka ny disabledtoetra amin'ny <fieldset>. Mampiasà JavaScript manokana hanesorana ny saha ao amin'ireo mpitety tranonkala ireo.

fankatoavana

Manomeza valin-teny sarobidy sy azo atao ho an'ny mpampiasa anao miaraka amin'ny fanamarinana endrika HTML5– azo alaina amin'ny navigateur tohananay rehetra . Misafidiana avy amin'ny valin-kafatra fanamarinana default amin'ny navigateur, na asio hafatra manokana miaraka amin'ireo kilasy voaorina sy JavaScript fanombohana.

Manoro hevitra izahay amin'izao fotoana izao mba hampiasana fomba fanamarinana manokana, satria tsy mibaribary tsy tapaka amin'ny teknolojia manampy amin'ny navigateur rehetra ny hafatra fanamarinana default amin'ny navigateur teratany (indrindra indrindra, Chrome amin'ny desktop sy finday).

Ahoana ny fiasan'izany

Toy izao ny fomba fiasan'ny validation amin'ny Bootstrap:

  • Ny fanamarinana endrika HTML dia ampiharina amin'ny alàlan'ny pseudo-class roa an'ny CSS, :invalidary :valid. Mihatra amin'ny <input>, <select>, ary <textarea>singa izany.
  • Ny Bootstrap dia mametaka ny :invalidsy ny :validfomba ho an'ny .was-validatedkilasin'ny ray aman-dreny, matetika ampiharina amin'ny <form>. Raha tsy izany, izay saha ilaina tsy misy sandany dia miseho ho tsy manan-kery amin'ny entana pejy. Amin'izany fomba izany, azonao atao ny misafidy hoe rahoviana no hampavitrika azy ireo (matetika rehefa avy nanandrana ny fandefasana taratasy).
  • Mba hamerenana ny endriky ny endrika (ohatra, amin'ny fandefasana endrika mavitrika amin'ny fampiasana AJAX), esory ny .was-validatedkilasy <form>indray aorian'ny fandefasana.
  • Amin'ny maha-famerenana azy, .is-invalidary ny .is-validkilasy dia azo ampiasaina ho solon'ny kilasy pseudo ho an'ny fanamarinana ny lafiny mpizara . Tsy mila .was-validatedkilasy ray aman-dreny izy ireo.
  • Noho ny faneriterena amin'ny fomba fiasan'ny CSS dia tsy afaka (amin'izao fotoana izao) izahay hampihatra fomba amin'ny endrika iray <label>alohan'ny fifehezana endrika ao amin'ny DOM raha tsy misy ny fanampian'ny JavaScript mahazatra.
  • Ny navigateur maoderina rehetra dia manohana ny API validation constraint , andiana fomba JavaScript hanamarinana ny fanaraha-maso ny endrika.
  • Ny hafatra valin- kafatra dia mety hampiasa ny default amin'ny navigateur (samy hafa ho an'ny navigateur tsirairay, ary tsy azo fehezina amin'ny alàlan'ny CSS) na ny fomba fanehoan-kevitra mahazatra misy HTML sy CSS fanampiny.
  • Azonao atao ny manome hafatra manan-kery manokana setCustomValidityamin'ny JavaScript.

Miaraka amin'izany ao an-tsaina, diniho ireto demo manaraka ireto ho an'ny fomba fanamarinana ny endrika mahazatra, ny kilasin'ny mpizara azo atao, ary ny tsy mety amin'ny navigateur.

Fomba mahazatra

Ho an'ny hafatra fanamarinana ny endrika Bootstrap mahazatra dia mila manampy ny novalidatetoetra boolean amin'ny <form>. Izany dia manafoana ny toro-hevitra momba ny valin-kafatra ho an'ny navigateur, fa mbola manome fidirana amin'ny API fanamarinana endrika amin'ny JavaScript. Andramo ny mandefa ny taratasy eto ambany; ny JavaScript dia hanakana ny bokotra fandefasana ary hampita hevitra aminao. Rehefa manandrana manatitra ianao dia ho hitanao ny fomba :invalidsy ny :validfomba ampiharina amin'ny fanaraha-maso ny endrikao.

Mampihatra loko, sisin-tany, fomba fifantohana, ary kisary ambadika mba hampitana hevitra tsara kokoa ny fomba fanehoan-kevitra manokana. Ny kisary background ho an'ny <select>s dia tsy misy afa-tsy amin'ny .custom-select, fa tsy .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Ny navigateur default

Tsy liana amin'ny hafatra fanehoan-kevitra momba ny fanamarinana manokana na manoratra JavaScript hanovana fitondran-tena? Tsara daholo, azonao ampiasaina ny default navigateur. Andramo mandefa ny taratasy etsy ambany. Miankina amin'ny navigateur sy ny OS, dia hahita fomba fanehoan-kevitra hafa kely ianao.

Na dia tsy azo atao amin'ny CSS aza ireo fomba fanehoan-kevitra ireo, dia mbola azonao atao ny manamboatra ny lahatsoratra fanehoan-kevitra amin'ny alàlan'ny JavaScript.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Lafiny mpizara

Manoro hevitra izahay hampiasa ny fanamarinana amin'ny lafiny mpanjifa, fa raha toa ka mila fanamarinana amin'ny lafiny server ianao, dia azonao atao ny manondro saha misy endrika tsy mety sy manankery miaraka amin'ny .is-invalidsy .is-valid. Mariho fa .invalid-feedbacktohana ihany koa amin'ireo kilasy ireo.

Toa tsara!
Toa tsara!
@
Mifidiana solonanarana azafady.
Omeo tanàna manan-kery azafady.
Mifidiana fanjakana manan-kery azafady.
Omeo zip manan-kery azafady.
Tsy maintsy manaiky ianao alohan'ny handefasana azy. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Singa tohanana

Ny fomba fanamarinana dia misy amin'ireto fanaraha-maso sy singa manaraka ireto:

  • <input>s sy <textarea>s miaraka amin'ny .form-control(anisan'izany hatramin'ny iray .form-controlamin'ny vondrona fampidirana)
  • <select>s miaraka amin'ny .form-controlor.custom-select
  • .form-checks
  • .custom-checkboxs sy .custom-radios
  • .custom-file
Ampidiro hafatra ao amin'ny textarea azafady.
Ohatra lahatsoratra fanehoan-kevitra tsy mety
Ohatra hafa lahatsoratra fanehoan-kevitra tsy mety
Ohatra ny valin-kafatra voafantina tsy mety
Ohatra fanehoan-kevitra momba ny rakitra manokana tsy mety 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Tooltips

Raha mamela izany ny fandrafetana endrikao dia azonao atao ny manova ny .{valid|invalid}-feedbackkilasy ho an'ny .{valid|invalid}-tooltipkilasy mba hanehoana valin-kafatra momba ny fanamarinana amin'ny tondro-fitaovana voalamina. Ataovy azo antoka fa manana ray aman-dreny miaraka position: relativeamin'ny fametrahana fitaovana. Ao amin'ny ohatra etsy ambany, ny kilasin'ny tsanganana dia efa manana an'io, fa ny tetikasanao dia mety mitaky fanamboarana hafa.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Customizing

Ny fanjakana fanamarinana dia azo amboarina amin'ny alàlan'ny Sass miaraka amin'ny $form-validation-statessarintany. Ao amin'ny _variables.scssrakitray, ity sari-tany Sass ity dia mihodinkodina mba hamoronana ny fanjakana valid/ invalidfanamarinana. Ao anatin'izany ny sarintany misy akany ho an'ny fanamboarana ny loko sy ny kisary tsirairay avy. Na dia tsy misy fanjakana hafa tohanan'ny mpitety tranonkala aza, ireo mampiasa fomba fanao mahazatra dia afaka manampy mora foana ny fanehoan-kevitra sarotra kokoa.

Azafady, azafady fa tsy manoro hevitra ny manamboatra ireo soatoavina ireo izahay raha tsy manova ny form-validation-statemixin.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Fomba fanao

Ho an'ny fanasokajiana bebe kokoa sy ny tsy fitovian'ny navigateur, ampiasao ny singa endrika mahazatra antsika hanoloana ny default amin'ny navigateur. Izy ireo dia natsangana teo ambonin'ny marika semantika sy azo idirana, noho izany dia fanoloana mafy orina ho an'ny fanaraha-maso ny endrika default.

Boxes sy radios

Ny boaty fisavana sy ny radio <input>ary ny <label>fampiarahana dia nofonosina anaty iray <div>mba hamoronana fanaraha-maso mahazatra. Amin'ny lafiny ara-drafitra, ity dia fomba fiasa mitovy amin'ny default .form-check.

Ampiasainay ny mpifidy mpiray tampo ( ~) ho an'ny <input>fanjakanay rehetra—tahaka ny :checked— mba handrafetana araka ny tokony ho izy ny mari-pamantarana endrika mahazatra. Rehefa ampiarahina amin'ny .custom-control-labelkilasy dia azontsika atao ihany koa ny manamboatra ny lahatsoratra ho an'ny singa tsirairay mifototra amin'ny <input>toetran'ny '.

Afeninay amin'ny <input>alalan'ny opacityfampiasana ny .custom-control-labeldefault ny fanondroana endrika vaovao amin'ny toerany miaraka amin'ny ::beforesy ::after. Indrisy anefa fa tsy afaka manangana fomba amam-panao avy amin'ny fotsiny izahay satria tsy miasa amin'io singa io ny <input>CSS .content

Any amin'ny fanjakana voamarika, mampiasa kisary SVG voarakitra base64 avy amin'ny Open Iconic izahay . Izany dia manome antsika ny fanaraha-maso tsara indrindra amin'ny fanaingoana sy ny fametrahana ny navigateur sy ny fitaovana.

Boxes

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Afaka mampiasa ny :indeterminatekilasy pseudo ihany koa ny boaty fisavana manokana rehefa apetraka amin'ny tanana amin'ny alalan'ny JavaScript (tsy misy toetra HTML azo hamaritana azy).

Raha mampiasa jQuery ianao dia ampy ny zavatra toy izao:

$('.your-checkbox').prop('indeterminate', true)

Radios

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Milahatra

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

sembana

Mety ho kilemaina ihany koa ny boaty fisavana manokana sy radio. Ampio ny disabledtoetra boolean amin'ny <input>ary ny famantarana manokana sy ny famariparitana marika dia ho voalamina ho azy.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
  <label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>

Switches

Ny switch dia manana mari-pamantarana amin'ny boaty fisavana manokana fa mampiasa ny .custom-switchkilasy mba hamoahana switch toggle. Ny switch koa dia manohana ny disabledtoetra.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Safidio ny sakafo

Ny menio manokana <select>dia mila kilasy mahazatra fotsiny, .custom-selectmba hanosehana ny fomba fanao. Ny fomba fanao dia voafetra amin'ny <select>fisehoan'ny voalohany ary tsy afaka manova ny <option>s noho ny fetran'ny navigateur.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Azonao atao ihany koa ny misafidy amin'ny safidy manokana kely sy lehibe mba hifanaraka amin'ny fampidirana lahatsoratra mitovy habe.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Ny multipletoetra koa dia tohana:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Toy ny sizetoetra:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

isan-karazany

Mamorona <input type="range">fanaraha-maso manokana amin'ny .custom-range. Ny lalana (ny ambadika) sy ny ankihibe (ny sandany) dia samy novolavolaina mba hiseho mitovy amin'ny navigateur. Satria ny IE sy Firefox ihany no manohana ny "famenoana" ny dian-dry zareo avy eo ankavia na havanana amin'ny ankihibe ho fitaovana hanehoana ny fandrosoana, dia tsy manohana izany izahay amin'izao fotoana izao.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Ny fampidirana isan-karazany dia manana soatoavina implicit ho an'ny minsy max— 0ary 100, tsirairay avy. Azonao atao ny mamaritra ny soatoavina vaovao ho an'ireo mampiasa ny minsy ny maxtoetra.

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Amin'ny alàlan'ny default, ampidiro ny "snap" amin'ny sanda integer. Raha hanova izany dia azonao atao ny mamaritra stepsanda iray. Ao amin'ny ohatra etsy ambany, dia avo roa heny ny isan'ny dingana amin'ny fampiasana step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

File browser

Ny plugin atolotra hanentanana ny fampidiran-drakitra manokana: bs-custom-file-input , izany no ampiasainay eto amin'ny dokanay.

Ny fampidirana fisie no tena manjavozavo indrindra amin'ny andiany ary mila JavaScript fanampiny raha te hampifandray azy ireo amin'ny Fisafidianana rakitra azo ampiasaina… sy ny anaran-drakitra voafantina.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Afeninay amin'ny <input>alàlan'ny opacityfametahana ny <label>. Ny bokotra dia noforonina sy napetraka miaraka amin'ny ::after. Farany, ambarantsika ny a widthand heighton the <input>ho an'ny elanelana mety amin'ny atiny manodidina.

Mandika na manamboatra ny tady amin'ny SCSS

Ny :lang()pseudo-class dia ampiasaina ahafahana mandika ny lahatsoratra “Browse” amin'ny fiteny hafa. Amboary na ampio ny fidirana amin'ny $custom-file-textfari-piadidiana Sass miaraka amin'ny tenifototra momba ny fiteny sy tady eo an-toerana. Ny tady anglisy dia azo amboarina amin'ny fomba mitovy. Ohatra, izao no fomba mety hanampiana dikanteny espaniola (ny fehezan-teny amin'ny teny espaniola dia es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Ity misy lang(es)hetsika momba ny fampidirana rakitra manokana ho an'ny dikanteny espaniola:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Mila mametraka tsara ny fitenin'ny antontan-taratasinao ianao (na ny zana-kazo) mba hampisehoana ny lahatsoratra marina. Azo atao izany amin'ny fampiasana ny langtoetra amin'ny <html>singa na ny Content-Languagelohatenin'ny HTTP , ankoatry ny fomba hafa.

Mandika na manamboatra ny tady amin'ny HTML

Ny Bootstrap koa dia manome fomba handikana ny lahatsoratra "Browse" amin'ny HTML miaraka amin'ny data-browsetoetra izay azo ampidirina amin'ny marika fampidirana manokana (ohatra amin'ny teny holandey):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>