Source

Ifishi

Ingero nubuyobozi bukoreshwa muburyo bwo kugenzura imiterere, imiterere yimiterere, nibice byabigenewe byo gukora ibintu byinshi bitandukanye.

Incamake

Ifishi ya Bootstrap igenzura kwaguka kumurongo wuburyo bwa Rebooted hamwe namasomo. Koresha aya masomo kugirango uhitemo ibyerekanwe byabigenewe kugirango bihindurwe neza kuri mushakisha n'ibikoresho.

Wemeze gukoresha typeikiranga gikwiye ku nyongeramusaruro zose (urugero, emailkuri imeri imeri cyangwa numberamakuru yumubare) kugirango ukoreshe igenzura rishya ryinjira nko kugenzura imeri, guhitamo umubare, nibindi byinshi.

Dore urugero rwihuse rwo kwerekana imiterere ya Bootstrap. Komeza usome ibyangombwa kumasomo asabwa, imiterere, nibindi byinshi.

Ntabwo tuzigera dusangira imeri yawe nabandi bose. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <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" placeholder="Password">
  </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>

Kugenzura imiterere

Ifishi yimyandikire igenzura-nka <input>s, <select>s, na <textarea>s - yanditswe hamwe .form-controlnishuri. Harimo nuburyo bwo kugaragara muri rusange, kwibanda kuri leta, ubunini, nibindi byinshi.

Witondere gushakisha imiterere yacu kugirango ubone ubundi buryo <select>s.

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

Kuri dosiye yinjiza, hinduranya .form-controlkuri .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>

Ingano

Shiraho uburebure ukoresheje amasomo nka .form-control-lgna .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>

Soma gusa

Ongeramo readonlyikiranga boolean kumurongo kugirango wirinde guhindura agaciro kinjiza. Gusoma-gusa ibyinjira bigaragara byoroheje (kimwe ninjiza zamugaye), ariko gumana indanga isanzwe.

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

Byasomwe neza

Niba ushaka kugira <input readonly>ibintu muburyo bwawe byanditse nkumwandiko usobanutse, koresha urwego .form-control-plaintextkugirango ukureho imiterere isanzwe yumurima wububiko kandi ubike margin hamwe na padi.

<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" placeholder="Password">
    </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>

Urutonde rwinjiza

Shiraho utambitse tuzenguruka urutonde rwinjiza ukoresheje .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>

Agasanduku na radiyo

Ubusanzwe agasanduku na radiyo byatejwe imbere hifashishijwe ubufasha bwa .form-check, icyiciro kimwe kubwoko bwombi bwinjiza butezimbere imiterere nimyitwarire yibintu bya HTML . Kugenzura agasanduku ni uguhitamo kimwe cyangwa byinshi murutonde, mugihe amaradiyo yo guhitamo inzira imwe muri benshi.

Isanduku yamugaye hamwe na radio birashyigikirwa, ariko kugirango utange not-allowedindanga hejuru yumubyeyi <label>, uzakenera kongeramo disabledikiranga kuri .form-check-input. Ikiranga cyahagaritswe kizakoresha ibara ryoroshye kugirango rifashe kwerekana ibyinjira.

Kugenzura agasanduku na radiyo gukoresha byubatswe kugirango bishyigikire ifishi ishingiye kuri HTML kandi itange ibisobanuro byoroshye, byoroshye. Nka, <input>s na <label>s ni ibintu bivukana bitandukanye no muri <input>a <label>. Nibisobanuro birenze gato nkuko ugomba kwerekana idnibiranga forguhuza na <input>na <label>.

Ibisanzwe (byegeranye)

Mburabuzi, umubare uwo ari wo wose wo kugenzura agasanduku na radiyo bihita bivukana bizahagarikwa kandi bihagaritswe neza .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>

Umurongo

Itsinda ryisanduku cyangwa amaradiyo kumurongo umwe utambitse wongeyeho icyaricyo .form-check-inlinecyose .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>

Nta kirango

Ongeraho inyongeramusaruro .position-staticimbere .form-checkidafite inyandiko yanditse. Wibuke gutanga ubundi buryo bwa label ya tekinoroji ifasha (urugero, gukoresha 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>

Imiterere

Kubera ko Bootstrap ikoreshwa display: blockkandi width: 100%hafi ya fomu yacu yose igenzura, amafishi azahagarikwa muburyo buhagaritse. Amasomo yinyongera arashobora gukoreshwa muguhindura iyi miterere kumurongo.

Shiraho amatsinda

Icyiciro .form-groupnuburyo bworoshye bwo kongeramo imiterere kumiterere. Itanga icyiciro cyoroshye gishishikarizwa guteranya neza ibirango, kugenzura, inyandiko ifasha kubushake, hamwe nubutumwa bwo kwemeza. Mburabuzi ikoreshwa gusa margin-bottom, ariko ifata ubundi buryo muburyo .form-inlinebukenewe. Koresha hamwe na <fieldset>s, <div>s, cyangwa hafi ikindi kintu cyose.

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

Urusobemiyoboro

Ifishi nyinshi zoroshye zirashobora kubakwa ukoresheje amasomo ya grid. Koresha ibi kugirango ubone imiterere isaba inkingi nyinshi, ubugari butandukanye, hamwe nuburyo bwo guhuza.

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

Umurongo

Urashobora kandi guhinduranya .rowkuri .form-row, itandukaniro ryurwego rusanzwe rwa grid umurongo urenga inkingi isanzwe yinkingi kugirango irusheho gukomera.

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

Imiterere igoye irashobora kandi gushirwaho hamwe na sisitemu ya gride.

<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" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </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>

Ifishi itambitse

Kora imiterere itambitse hamwe na gride wongeyeho urwego .rowrwo gushinga amatsinda no gukoresha .col-*-*amasomo kugirango ugaragaze ubugari bwibirango byawe hamwe nubugenzuzi. Witondere kongera .col-form-labelkuri <label>s yawe kugirango bahagarike hagati hamwe nuburyo bugenzurwa.

Rimwe na rimwe, birashoboka ko ukeneye gukoresha margin cyangwa padi yingirakamaro kugirango ukore ibyo uhuza neza ukeneye. Kurugero, twakuyeho padding-topkuri radio yacu yinjije ibirango kugirango duhuze neza ibyingenzi.

Amaradiyo
Agasanduku 
<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" placeholder="Email">
    </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" placeholder="Password">
    </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>
Ifishi itambitse ikirango ingana

Witondere gukoresha .col-form-label-smcyangwa .col-form-label-lgkuri <label>s cyangwa <legend>s kugirango ukurikize neza ingano ya .form-control-lgna .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>

Ingano yinkingi

Nkuko bigaragara mu ngero zabanjirije iyi, sisitemu ya grid igufasha gushyira umubare uwo ariwo wose wa .cols muri a .rowcyangwa .form-row. Bazagabanya ubugari buboneka bingana hagati yabo. Urashobora kandi gutoranya igice cyinkingi zawe kugirango ufate umwanya munini cyangwa muto, mugihe ibisigaye .colbinganya kugabana ibisigaye, hamwe ninkingi yihariye nk .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>

Ingano-yimodoka

Urugero rukurikira rukoresha flexbox yingirakamaro kugirango uhagarike hagati yibirimo nibihinduka .colkugirango .col-autoinkingi zawe zifate umwanya munini nkuko bikenewe. Shyira mu bundi buryo, inkingi nini ubwayo ishingiye kubirimo.

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

Urashobora noneho gusubiramo ibyo byongeye hamwe nubunini-bwihariye bwinkingi.

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

Kandi byumvikane ko imiterere yihariye igenzurwa .

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

Ifishi yerekana

Koresha urwego .form-inlinekugirango werekane urukurikirane rwibirango, ifishi igenzura, na buto kumurongo umwe utambitse. Ifishi igenzura muburyo butandukanye iratandukanye gato na reta zisanzwe.

  • Igenzura ni display: flex, gusenyuka umwanya wose wa HTML yera kandi bikwemerera gutanga igenzura rihuza umwanya hamwe nibikorwa bya flexbox .
  • Kugenzura no kwinjiza amatsinda yakira width: autokugirango arengere Bootstrap isanzwe width: 100%.
  • Igenzura rigaragara gusa kumurongo mubireba byibuze byibuze 576px kugirango ubare kubireba bigufi kubikoresho bigendanwa.

Urashobora gukenera gukoresha intoki ubugari no guhuza imiterere ya buri muntu kugenzura hamwe ningirakamaro (nkuko bigaragara hano). Ubwanyuma, menya neza ko buri gihe ushiramo a <label>hamwe na buri fomu igenzura, nubwo ukeneye kubihisha kubatari abasoma hamwe .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>

Ifishi yihariye igenzura kandi ihitamo nayo irashyigikiwe.

<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>
Ibindi bisobanuro byihishe

Tekinoroji ifasha nkabasomyi ba ecran bazagira ikibazo kumpapuro zawe niba udashyizemo ikirango kuri buri cyinjijwe. Kuri iyi fomu yumurongo, urashobora guhisha ibirango ukoresheje urwego .sr-only. Hariho ubundi buryo butandukanye bwo gutanga ikirango cya tekinoroji ifasha, nka aria-label, aria-labelledbycyangwa titleikiranga. Niba ntanumwe muribi uhari, tekinoroji ifasha irashobora kwifashisha placeholderikiranga, niba ihari, ariko menya ko gukoresha placeholdernkuwasimbuye ubundi buryo bwo kuranga ntabwo ari byiza.

Gufasha inyandiko

Guhagarika urwego rwo gufasha inyandiko muburyo bushobora gushirwaho ukoresheje .form-text(mbere bizwi nko .help-blockmuri v3). Inline ifasha inyandiko irashobora gushyirwa mubikorwa byoroshye ukoresheje ibice byose bya HTML hamwe nibyiciro byingirakamaro nka .text-muted.

Guhuza inyandiko ifasha hamwe nuburyo bugenzura

Ubufasha bwanditse bugomba guhuzwa neza nuburyo bwo kugenzura bifitanye isano no gukoresha aria-describedbyikiranga. Ibi bizemeza ko tekinoroji ifasha-nkabasomyi ba ecran-izatangaza iyi nyandiko ifasha mugihe uyikoresha yibanze cyangwa yinjiye kugenzura.

Ubufasha bwanditse munsi yinyongera burashobora kwandikwa hamwe .form-text. Iri somo ririmo display: blockkandi ryongeramo marike yo hejuru kugirango byoroshye gutandukana kuva inyongeramusaruro hejuru.

Ijambobanga ryawe rigomba kuba rifite inyuguti 8-20, rikubiyemo inyuguti nimibare, kandi ntirigomba kuba rifite umwanya, inyuguti zidasanzwe, cyangwa 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>

Inyandiko yumurongo irashobora gukoresha ikintu icyo aricyo cyose gisanzwe cya HTML (cyaba a <small>, <span>cyangwa ikindi kintu) ntakindi kirenze icyiciro cyingirakamaro.

Ugomba kuba ufite inyuguti 8-20. 
<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>

Impapuro zahagaritswe

Ongeramo disabledikiranga boolean kumurongo winjiza kugirango wirinde imikoreshereze yabakoresha kandi igaragare ko yoroshye.

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

Ongeramo disabledikiranga kuri a <fieldset>kugirango uhagarike igenzura ryose imbere.

<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>
Caveat hamwe na ankeri

Mburabuzi, mushakisha izajya ifata imiterere kavukire yose ( <input>, <select>nibintu <button>) imbere <fieldset disabled>nkuwamugaye, ikumira clavier nimbeba kuri bo. Ariko, niba ifishi yawe nayo irimo <a ... class="btn btn-*">ibintu, ibi bizahabwa gusa uburyo bwa pointer-events: none. Nkuko byavuzwe mu gice cyerekeye leta yamugaye kuri buto (kandi cyane cyane mu gice cyibice bya ankeri), uyu mutungo wa CSS nturashyirwa mubikorwa kandi ntabwo ushyigikiwe byuzuye muri Internet Explorer 10, kandi ntibizabuza abakoresha clavier kuba gushobora kwibanda cyangwa gukora iyi link. Kugirango rero ugire umutekano, koresha JavaScript yihariye kugirango uhagarike amahuza nkaya.

Guhuza-mushakisha

Mugihe Bootstrap izakoresha ubu buryo muri mushakisha zose, Internet Explorer 11 na hepfo ntabwo ishigikira byimazeyo disabledikiranga kuri a <fieldset>. Koresha JavaScript yihariye kugirango uhagarike ikibanza muri izi mushakisha.

Kwemeza

Tanga ibitekerezo byingirakamaro, bifatika kubakoresha bawe hamwe na HTML5 yo kwemeza - iboneka muri mushakisha zacu zose zishyigikiwe . Hitamo muri mushakisha idasanzwe yo kwemeza ibitekerezo, cyangwa ushyire mubikorwa ubutumwa bwihariye hamwe namasomo yacu yubatswe hanyuma utangire JavaScript.

Kugeza ubu turasaba gukoresha uburyo bwo kwemeza byemewe, nkuko mushakisha kavukire ubutumwa busanzwe bwo kwemeza butagaragazwa nubuhanga bufasha muri mushakisha zose (cyane cyane, Chrome kuri desktop na mobile).

Uburyo ikora

Dore uko ifishi yo kwemeza ikorana na Bootstrap:

  • Ifishi ya HTML yemewe ikoreshwa binyuze muri CSS ibyiciro bibiri bya pseudo, :invalidna :valid. Bireba Kuri <input>, <select>na <textarea>Ibintu.
  • Bootstrap isimbuza i :invalidna :validstil kurwego rwababyeyi .was-validated, mubisanzwe bikoreshwa kuri <form>. Bitabaye ibyo, umurima wose usabwa udafite agaciro ugaragara nkaho utemewe kurupapuro rwumutwaro. Ubu buryo, urashobora guhitamo igihe cyo kubikora (mubisanzwe nyuma yo gutanga impapuro zagerageje).
  • Kugirango usubiremo isura yifishi (kurugero, mugihe cyoherejwe na dinamike yoherejwe ukoresheje AJAX), kura .was-validatedibyiciro <form>byongeye nyuma yo gutanga.
  • Nkugusubira inyuma, .is-invalidkandi .is-validamasomo arashobora gukoreshwa aho gukoresha pseudo-amasomo ya seriveri yo kwemeza . Ntibasaba .was-validatedishuri ryababyeyi.
  • Bitewe nimbogamizi muburyo CSS ikora, ntidushobora (kurubu) gukoresha uburyo kuri a <label>biza mbere yo kugenzura ifishi muri DOM tutabifashijwemo na JavaScript yihariye.
  • Mucukumbuzi zose zigezweho zishyigikira kwemeza API , urukurikirane rwuburyo bwa JavaScript bwo kwemeza igenzura.
  • Ubutumwa bwo gutanga ibitekerezo bushobora gukoresha ibisanzwe bya mushakisha (bitandukanye kuri buri mushakisha, kandi ntibishobora gukoreshwa binyuze kuri CSS) cyangwa uburyo bwo gutanga ibitekerezo byihariye hamwe na HTML hamwe na CSS.
  • Urashobora gutanga ubutumwa bwemewe hamwe na setCustomValidityJavaScript.

Hamwe nibitekerezo, suzuma demo zikurikira kumurongo wihariye wo kwemeza uburyo bwo kwemeza, ibyiciro bya seriveri kuruhande, hamwe na mushakisha isanzwe.

Imiterere yihariye

Kubisanzwe Bootstrap ifishi yubutumwa bwo kwemeza, uzakenera kongeramo novalidateikiranga boolean yawe <form>. Ibi birahagarika amashakiro yububiko bwibitekerezo, ariko biracyatanga uburyo bwo kwemeza APIs muri JavaScript. Gerageza gutanga urupapuro rukurikira; JavaScript yacu izahagarika buto yohereza no gutanga ibitekerezo kuri wewe. Mugihe ugerageza gutanga, uzabona imiterere :invalidnuburyo :validbukoreshwa muburyo bugenzura.

Uburyo bwo gutanga ibitekerezo bwigenga bukoresha amabara yihariye, imipaka, uburyo bwo kwibandaho, hamwe nibishushanyo mbonera kugirango tumenye neza ibitekerezo. Amashusho yinyuma ya <select>s arahari gusa .custom-select, kandi ntabwo .form-control.

Birasa neza!
Birasa neza!
@
Nyamuneka hitamo izina ukoresha.
Nyamuneka tanga umujyi wemewe.
Nyamuneka tanga leta yemewe.
Nyamuneka tanga zipi yemewe.
Ugomba kubyemera mbere yo gutanga. 
<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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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>

Mucukumbuzi isanzwe

Ntabwo ushishikajwe no kwemeza ibitekerezo byemewe cyangwa kwandika JavaScript kugirango uhindure imyitwarire? Byose byiza, urashobora gukoresha mushakisha isanzwe. Gerageza gutanga urupapuro rukurikira. Ukurikije amashusho yawe na OS, uzabona uburyo butandukanye bwo gutanga ibitekerezo.

Mugihe ubu buryo bwo gutanga ibitekerezo budashobora kwandikwa na CSS, urashobora guhitamo inyandiko yatanzwe binyuze muri 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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" 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>

Uruhande rwa seriveri

Turasaba gukoresha umukiriya-kwemeza, ariko mugihe ukeneye seriveri kuruhande rwemeza, urashobora kwerekana ifishi itemewe kandi yemewe hamwe .is-invalidna .is-valid. Menya ko .invalid-feedbacknayo ishyigikiwe naya masomo.

Birasa neza!
Birasa neza!
@
Nyamuneka hitamo izina ukoresha.
Nyamuneka tanga umujyi wemewe.
Nyamuneka tanga leta yemewe.
Nyamuneka tanga zipi yemewe.
Ugomba kubyemera mbere yo gutanga. 
<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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide 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" placeholder="Zip" 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>

Ibintu bishyigikiwe

Urugero rwacu rwerekana inyandiko kavukire <input>s hejuru, ariko ifishi yo kwemeza nayo iraboneka kuri <textarea>s nuburyo bwihariye bwo kugenzura.

Nyamuneka andika ubutumwa muri textarea.
Urugero inyandiko itemewe
Urugero rwinshi inyandiko itemewe
Urugero rutemewe guhitamo guhitamo ibitekerezo
Urugero rwibitekerezo bya dosiye byemewe 
<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>

Ibikoresho

Niba imiterere ya fomu ibyemerera, urashobora guhinduranya .{valid|invalid}-feedbackamasomo .{valid|invalid}-tooltipkumasomo kugirango werekane ibitekerezo byemewe muburyo bwanditse. Witondere kugira umubyeyi position: relativekuriwo kugirango uhagarare ibikoresho. Murugero rukurikira, ibyiciro byinkingi byacu bifite ibi, ariko umushinga wawe urashobora gusaba ubundi buryo.

Birasa neza!
Birasa neza!
@
Nyamuneka hitamo izina ryihariye kandi ryemewe.
Nyamuneka tanga umujyi wemewe.
Nyamuneka tanga leta yemewe.
Nyamuneka tanga zipi yemewe. 
<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" placeholder="First name" 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" placeholder="Last name" 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" placeholder="Username" 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" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide 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" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Impapuro zabugenewe

Kubindi byinshi byo kwihitiramo no guhuza ibice bya mushakisha, koresha ibintu byabigenewe byuzuye kugirango usimbuze ibisanzwe. Zubatswe hejuru yibisobanuro kandi byoroshye kugerwaho, nuko rero bisimburwa bikomeye kubisanzwe byubugenzuzi.

Agasanduku na radiyo

Buri gasanduku na radio <input>hamwe no <label>gufunga bipfunyitse muri <div>kugirango dukore igenzura ryihariye. Muburyo, ubu ni inzira imwe nkibisanzwe .form-check.

Twifashishije abatoranya bavukana ( ~) kuri leta zacu zose <input>- nka :checked- kugirango dukore neza ibipimo byerekana imiterere. Iyo uhujwe .custom-control-labelnishuri, turashobora kandi gutunganya inyandiko kuri buri kintu gishingiye kuri <input>'leta.

Duhishe ibisanzwe <input>hamwe opacitykandi dukoresha i .custom-control-labelkugirango twubake igikoresho gishya cyerekana imiterere mu mwanya wacyo hamwe ::beforena ::after. Kubwamahirwe ntidushobora kubaka umugenzo kuva gusa <input>kuberako CSS contentidakora kuri kiriya kintu.

Muri leta zagenzuwe, dukoresha base64 yashyizwemo amashusho ya SVG kuva Gufungura Iconic . Ibi biduha kugenzura neza uburyo bwo gutunganya no guhagarara kuri mushakisha n'ibikoresho.

Agasanduku

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

Isanduku yihariye irashobora kandi gukoresha :indeterminateicyiciro cya pseudo mugihe ukoresheje intoki ukoresheje JavaScript (nta kiranga HTML kiboneka cyo kubigaragaza).

Niba ukoresha jQuery, ikintu nkiki kigomba kuba gihagije:

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

Amaradiyo

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

Umurongo

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

Abamugaye

Isanduku yisanduku na radiyo nabyo birashobora guhagarikwa. Ongeramo disabledibiranga boolean kuri i <input>na indangagaciro yihariye na label ibisobanuro bizahita byandikwa.

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

Guhindura

Ihindura ifite marike yisanduku yihariye ariko ikoresha urwego .custom-switchkugirango itange icyerekezo. Guhindura nabyo bishyigikira disabledikiranga.

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

Hitamo menu

Ibikubiyemo byihariye <select>bikenera icyiciro cyihariye, .custom-selectkugirango utere imiterere yihariye. Imisusire yihariye igarukira kumurongo <select>wambere kandi ntishobora guhindura <option>s kubera imbogamizi za mushakisha.

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

Urashobora kandi guhitamo kuva ntoya nini nini yihariye ihitamo guhuza ibyangano bisa nkibisobanuro byinjira.

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

Ikiranga multiplenacyo gishyigikiwe:

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

Nka sizeIkiranga:

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

Urwego

Kora <input type="range">igenzura ryigenga hamwe .custom-range. Inzira (inyuma) hamwe nigikumwe (agaciro) byombi byanditse kugirango bigaragare kimwe kuri mushakisha. Nka IE na Firefox gusa bashyigikira "kuzuza" inzira zabo uhereye ibumoso cyangwa iburyo bwintoki nkuburyo bwo kwerekana muburyo bugaragara iterambere, ntabwo ubu tubishyigikiye.

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

Urutonde rwinjiza rufite indangagaciro zisobanutse kuri minna max- 0na 100, kimwe. Urashobora kwerekana indangagaciro nshya kubakoresha i minna maxIbiranga.

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

Mburabuzi, urutonde rwinjiza "snap" kumubare wuzuye. Guhindura ibi, urashobora kwerekana stepagaciro. Murugero rukurikira, twikubye kabiri umubare wintambwe dukoresheje step="0.5".

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

Mucukumbuzi ya dosiye

Amacomeka asabwa kugirango yinjize dosiye yihariye: bs-gakondo-dosiye-yinjiza , nibyo dukoresha ubu hano muri docs.

Idosiye yinjiza ni gnarly cyane ya bunch kandi isaba JavaScript yinyongera niba ushaka kubahuza hamwe na imikorere ikora Hitamo dosiye… hanyuma uhitemo izina ryizina rya dosiye.

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

Duhishe dosiye isanzwe <input>dukoresheje opacityhanyuma tugahindura uburyo <label>. Akabuto kakozwe kandi gahagaze hamwe ::after. Ubwanyuma, turatangaza a widthno heightkumurongo <input>ukwiye kubirimo bikikije.

Guhindura cyangwa gutunganya imirongo hamwe na SCSS

Pseudo :lang()-class ikoreshwa kugirango yemererwe guhindura inyandiko "Gushakisha" mu zindi ndimi. Kurenga cyangwa kongeramo ibyanditse kuri $custom-file-textSass ihindagurika hamwe nururimi rujyanye nimirongo yaho. Imirongo y'Icyongereza irashobora gutegurwa kimwe. Kurugero, dore uburyo umuntu yakongeramo igisobanuro cyicyesipanyoli (kode yururimi rwicyesipanyoli ni es):

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

Hano lang(es)haribikorwa kumikorere ya dosiye yihariye yo guhindura icyesipanyoli:

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

Uzakenera gushyiraho imvugo yinyandiko yawe (cyangwa subtree yayo) neza kugirango inyandiko iboneye yerekanwe. Ibi birashobora gukorwa ukoresheje ikiranga langkubintu<html> cyangwa umutwe wa HTTP Content-Language, mubundi buryo.

Guhindura cyangwa gutunganya imirongo hamwe na HTML

Bootstrap itanga kandi uburyo bwo guhindura inyandiko "Gushakisha" muri HTML hamwe na data-browsekiranga gishobora kongerwaho ikirango cyabigenewe (urugero mu giholandi):

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