Source

Kpekpeɖeŋugbalẽviwo

Kpɔɖeŋuwo kple zazã ŋuti mɔfiamewo na agbalẽvi dzi kpɔkpɔ ƒe atsyãwo, ɖoɖo ƒe tiatia, kple akpa siwo wowɔ ɖe ɖoɖo nu hena agbalẽvi vovovowo wɔwɔ.

Kpɔɖeŋunyagbɔgblɔ

Bootstrap ƒe agbalẽvi dzi kpɔkpɔwo kekea míaƒe Rebooted agbalẽvi ƒe atsyãwo ɖe enu kple klasswo. Zã klass siawo nàtsɔ atia woƒe ɖeɖefia siwo wowɔ ɖe ɖoɖo nu la me hena gɔmeɖeɖe si mewɔa tɔtrɔ o wu le web-browserwo kple mɔ̃wo dzi.

Kpɔ egbɔ be yezã typenɔnɔme si sɔ ɖe nyawo katã dzi (le kpɔɖeŋu me, emailna e-mail adrɛs alo numberna xexlẽdzesiwo ŋuti nyatakakawo) be nàwɔ nyawo tsɔtsɔ de eme ƒe dziɖuɖu yeyewo abe e-mail ƒe kpeɖodzi, xexlẽdzesi tiatia, kple bubuwo ŋudɔ.

Kpɔɖeŋu kaba aɖe si nàtsɔ aɖe Bootstrap ƒe nɔnɔme ƒe atsyãwo afiae nye esi. Yi edzi nànɔ nu xlẽm hena nuŋlɔɖi siwo ku ɖe klass siwo wobia tso ame si, agbalẽviawo ƒe ɖoɖo, kple bubuwo ŋu.

Míama wò e-mail la na ame bubu aɖeke gbeɖe o. 
<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>

Kpeɖodzinyawo dzi kpɔkpɔ

Wowɔa nuŋɔŋlɔ ƒe nɔnɔme dziɖunuwo—abe <input>s, <select>s, kple <textarea>s ene—la kple .form-controlklass la. Atsyã siwo woatsɔ akpɔ dzedzeme bliboa, woƒe susu ƒe nɔnɔme, woƒe lolome, kple bubuwo hã le eme.

Kpɔ egbɔ be yeku míaƒe agbalẽvi siwo wowɔ ɖe ɖoɖo nu la me be nàgayi atsyã <select>s ɖe edzi.

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

Ne èdi faɛl ƒe nyawo tsɔtsɔ de eme la, trɔ asi le .form-controlna .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>

Sizing ƒe lolome

Ðo kɔkɔƒewo to klasswo abe .form-control-lgkple .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>

Nuxexlẽ ɖeɖeko

Tsɔ readonlyboolean nɔnɔme kpe ɖe nyawo tsɔtsɔ de eme ŋu be nàxe mɔ ɖe nyawo tsɔtsɔ de eme ƒe asixɔxɔ ƒe tɔtrɔ nu. Nuxexlẽ ɖeɖeko ƒe nyawo dzena le bɔbɔe wu (abe nyawo tsɔtsɔ de nuwɔametɔwoe ene), gake lé fli si wozãna ɖaa la ɖe asi.

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

Nuŋɔŋlɔ gbadzaa koe xexlẽ

Ne èdi be woawɔ <input readonly>nusiwo le wò nuŋlɔɖigbalẽvia me ƒe atsyã abe nuŋɔŋlɔ gbadzaa ene la, zã .form-control-plaintextklass la nàtsɔ aɖe nɔnɔmetata ƒe akpa ƒe nɔnɔme si woɖo ɖi la ɖa eye nàkpɔ axadzinuŋɔŋlɔ kple padding si sɔ la ta.

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

Range ƒe Nyatakakawo

Ðo range inputs siwo woate ŋu aʋu le tsia dzi to .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>

Dzesiɖakawo kple radiowo

Wowɔa dzesideɖaka kple radio siwo woɖo ɖi la wònyona ɖe edzi to kpekpeɖeŋu nana .form-check, klass ɖeka na nyawo tsɔtsɔ de eme ƒomevi eveawo siaa si naa woƒe HTML akpawo ƒe ɖoɖo kple nuwɔna nyona ɖe edzi . Aɖakawo nye tiatia ɖeka alo geɖe tiatia le xexlẽdzesi aɖe me, gake radiowo ya nye tiatia ɖeka tso geɖe me.

Wodoa alɔ dzesiɖakawo kple radio siwo mewɔa dɔ o la. Nɔnɔmea disabledawɔ amadede si me kɔ wu ŋudɔ atsɔ akpe ɖe eŋu wòafia nusi wotsɔ de eme ƒe nɔnɔme.

Dzesiɖakawo kple radio ƒe abɔtawo doa alɔ agbalẽviawo ƒe kpeɖodzinana si wotu ɖe HTML dzi eye wonaa dzeside siwo le kpuie, siwo ŋu woate ŋu aɖo. Esi wòle alea ta la, míaƒe <input>s kple <label>s nye nɔviwo ƒe akpa siwo to vovo na an <input>within a <label>. Esia nye nyagbɔgblɔ geɖe wu vie abe alesi wòle be nàgblɔ idkple fornɔnɔmewo be nàtsɔ asɔ <input>kple kple <label>.

Default (woƒo ƒu ɖe wo nɔewo dzi) .

Le gɔmedzedzea me la, woaɖo dzesiɖaka kple radio xexlẽme ɖesiaɖe si nye nɔvi kplikplikpli la ɖe wo nɔewo dzi le tsitrenu eye woatsɔ .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>

Le fli me

Ƒo dzesiɖakawo alo radiowo nu ƒu ɖe fli ɖeka si le tsia dzi la dzi to wo tsɔtsɔ kpe .form-check-inlineɖe ɖesiaɖe .form-checkŋu me.

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

Nuŋlɔɖiwo manɔmee

Tsɔ kpe .position-staticɖe nyawo tsɔtsɔ de eme .form-checksiwo me label nuŋɔŋlɔ aɖeke mele o ŋu. Ðo ŋku edzi nàgatsɔ dzesideŋkɔ ƒomevi aɖe ana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu (le kpɔɖeŋu me, zazã 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>

Nɔnɔme

Esi Bootstrap wɔa dɔ display: blockeye wòzãa width: 100%míaƒe agbalẽviwo ƒe dziɖuɖuwo katã kloe ta la, agbalẽviwo aƒo ƒu ɖe tsitrenu le gɔmedzedzea me. Woateŋu azã klass bubuwo atsɔ atrɔ asi le ɖoɖo sia ŋu le agbalẽvi ɖesiaɖe nu.

Ðo ƒuƒoƒowo ɖe ɖoɖo nu

Klas .form-grouplae nye mɔ bɔbɔetɔ kekeake si dzi woato atsɔ ɖoɖo aɖewo akpe ɖe agbalẽviwo ŋu. Enaa klass si te ŋu trɔna ɖe nɔnɔmewo ŋu si dea dzesiwo, dziɖuɖuwo, kpekpeɖeŋu nuŋɔŋlɔ siwo woate ŋu atia, kple gbedasiwo ƒe kpeɖodzinana ƒe gbedasiwo ƒe ƒuƒoƒo nyuie ƒe dzi ƒo. By default it only applies margin-bottom, gake efɔa atsyã bubuwo ɖe eme .form-inlinene ehiã. Zãe kple <fieldset>s, <div>s, alo nu bubu ɖesiaɖe kloe.

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

Kpekpeɖeŋunamɔ̃ ƒe grid

Woateŋu atu agbalẽvi siwo sesẽ wu to míaƒe grid klasswo zazã me. Zã esiawo na nuŋlɔɖi ƒe ɖoɖo siwo hiã sɔti geɖe, kekeme vovovowo, kple ɖoɖowɔwɔ ƒe tiatia bubuwo.

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

Kpeɖodzinya ƒe fli

Àteŋu aɖɔli hã .rowna .form-row, míaƒe grid fli si wozãna ɖaa ƒe tɔtrɔ si tsia sɔti ƒe tsiɖɔɖɔɖɔƒe siwo woɖo ɖi la ɖa hena ɖoɖo siwo le sesẽm wu eye wole sue wu.

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

Woateŋu awɔ ɖoɖo siwo sesẽ wu hã kple grid ɖoɖoa.

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

Nɔnɔme si le tsia dzi

Wɔ nuŋlɔɖi siwo le tsia dzi kple grid la to .rowklass la tsɔtsɔ kpe ɖe ƒuƒoƒo ƒuƒoƒowo ŋu kple .col-*-*klassawo zazã atsɔ agblɔ wò dzesiwo kple dziɖuɖuwo ƒe kekeme. Kpɔ egbɔ be yetsɔ kpe .col-form-labelɖe wò <label>s hã ŋu ale be woanɔ titina le tsitrenu kple woƒe nuŋlɔɖi ƒe dziɖuɖu siwo do ƒome kplii.

Ɣeaɖewoɣi la, ɖewohĩ ahiã be nàzã margin alo padding utilities atsɔ awɔ alignment deblibo ma si nèhiã. Le kpɔɖeŋu me, míeɖe padding-tople míaƒe radio inputs ƒe dzeside si woƒo ƒu ɖe wo nɔewo dzi la ɖa be míawɔ nuŋɔŋlɔa ƒe gɔmedzedze nyuie wu.

Radiowo dzi
Dzesiwo ƒe Aɖaka 
<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>
Horizontal agbalẽvi ƒe dzeside ƒe lolome

Kpɔ egbɔ be yezã .col-form-label-smalo .col-form-label-lgna wò <label>s alo <legend>s be nàwɔ ɖe kple ƒe lolome dzi .form-control-lgnyuie .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>

Sɔtiwo ƒe lolome ɖoɖo

.colAbe alesi woɖee fia le kpɔɖeŋu siwo do ŋgɔ me ene la, míaƒe grid ɖoɖoa na be nàte ŋu atsɔ s xexlẽme ɖesiaɖe ade a .rowalo .form-row. Woama kekeme si li la ɖe wo dome sɔsɔe. Àteŋu atia wò sɔtiwo ƒe akpa sue aɖe hã be wòaxɔ teƒe geɖe alo sue aɖe, esime .cols susɔeawo ma susɔeawo sɔsɔe, kple sɔtiwo ƒe hatsotso tɔxɛwo abe .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 ƒe lolome

Kpɔɖeŋu si le ete zãa flexbox dɔwɔnu tsɔ ɖoa ​​emenyawo titina le tsitrenu eye wòtrɔna .colɖe eŋu .col-autoale be wò sɔtiwo naxɔ teƒe geɖe ko alesi wòhiã. Ne míagblɔe bubui la, sɔtiawo ƒe lolome nɔa te ɖe emenyawo dzi.

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

Emegbe àteŋu agbugbɔ atsaka ema ake kple sɔti ƒe klass siwo ƒe lolome le koŋ.

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

Eye le nyateƒe me la , wodoa alɔ custom form controls .

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

Agbalẽvi siwo le fli me

Zã .form-inlineklass la nàtsɔ aɖe dzesiwo, nuŋlɔɖiwo dzi kpɔkpɔ, kple abɔta siwo kplɔ wo nɔewo ɖo afia le fli ɖeka si le tsia dzi dzi. Agbalẽvi dzi kpɔkpɔ le agbalẽvi siwo le fli me me to vovo vie tso woƒe nɔnɔme gbãtɔwo gbɔ.

  • Controls are display: flex, collapsing any HTML white space eye wòɖe mɔ na wò be nàna alignment control kple dometsotso kple flexbox utilities.
  • Dziɖuɖuwo kple nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo xɔa width: autobe woaɖe asi le Bootstrap ƒe gɔmedzedze width: 100%ŋu .
  • Ðeko dziɖunuwo dzena le fli me le nukpɔkpɔ siwo keke 576px ya teti me be woatsɔ abu akɔnta le nukpɔkpɔ gbadza siwo le asitelefonwo dzi ŋu.

Ðewohĩ ahiã be nàtsɔ asi akpɔ agbalẽvi ɖekaɖekawo dzi kpɔkpɔ ƒe kekeme kple woƒe sɔsɔme gbɔ kple dometsotso ƒe dɔwɔnuwo (abe alesi woɖee fia le ete ene). Mlɔeba la, kpɔ egbɔ be yede <label>agbalẽvi ɖesiaɖe dzi ɣesiaɣi, ne ehiã be yeaɣlae ɖe amedzro siwo menye screenreader o kple .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>

Wodoa alɔ agbalẽvi ƒe dziɖuɖu kple tiatia siwo wowɔ ɖe ɖoɖo nu hã.

<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>
Mɔnu siwo woate ŋu azã ɖe dzeside ɣaɣlawo teƒe

Kpekpeɖeŋunamɔ̃wo abe screen readers ene akpɔ kuxi le wò agbalẽviwo ŋu ne mède dzesidenu ɖesiaɖe si nèŋlɔ la ŋu o. Le agbalẽvi siawo siwo le fli me gome la, àte ŋu aɣla dzesideawo to .sr-onlyklass la zazã me. Mɔnu bubuwo li siwo dzi woato ana dzeside na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu, abe aria-label, aria-labelledbyalo titlenɔnɔme ene. Ne esiawo dometɔ aɖeke mele eme o la, kpekpeɖeŋunamɔ̃wo ate ŋu azã placeholdernɔnɔmea zazã, ne ele eme, gake de dzesii be zazãplaceholder womeɖo aɖaŋu be woazãe atsɔ aɖo dzesidemɔnu bubuwo teƒe o.

Kpekpeɖeŋu nuŋɔŋlɔ

Woateŋu awɔ kpekpeɖeŋu nuŋɔŋlɔ si le agbalẽviwo me le mɔxenu ƒe ɖoɖo nu to .form-text(si woyɔna tsã be .help-blockle v3 me) zazã me. Inline kpekpeɖeŋu nuŋɔŋlɔ ateŋu awɔ dɔ le mɔ si trɔna nu to inline HTML element ɖesiaɖe kple utility classes abe.text-muted .

Kpekpeɖeŋu nuŋɔŋlɔa tsɔtsɔ do ƒome kple agbalẽvi dzi kpɔkpɔwo

Ele be kpekpeɖeŋunuŋɔŋlɔ nado ƒome tẽ kple nuŋlɔɖi ƒe dziɖuɖu si wòku ɖe aria-describedbynɔnɔmea zazã ŋu. Esia ana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu—abe screen readers ene—aɖe gbeƒã kpekpeɖeŋunya sia ne ezãla ƒe susu le nu ŋu alo ge ɖe edzi le mɔ̃a dzi.

Kpekpeɖeŋu nuŋɔŋlɔ si le ete nyawo ate ŋu awɔ atsyã kple .form-text. Klass sia display: blocktsɔa tame margin aɖewo dea eme eye wòtsɔa wo kpena ɖe eŋu hena dometsotso bɔbɔe tso nusiwo wotsɔ de eme siwo le etame gbɔ.

Ele be wò nyagbea nadidi ŋɔŋlɔdzesi 8-20, ŋɔŋlɔdzesiwo kple xexlẽdzesiwo nanɔ eme, eye mele be dometsotso, ŋɔŋlɔdzesi tɔxɛwo, alo emoji nanɔ eme o. 
<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>

Inline text ateŋu azã inline HTML element ɖesiaɖe si bɔ (eɖanye <small>, <span>, alo nu bubu aɖe o) si me naneke wu utility class o.

Ele be wòadidi ŋɔŋlɔdzesi 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>

Nuwɔametɔwo ƒe agbalẽviwo

Tsɔ disabledboolean nɔnɔme kpe ɖe nyawo tsɔtsɔ de eme ŋu be nàxe mɔ ɖe zãla ƒe kadodowo nu eye nàna wòadze abe ɖe wòle bɔbɔe ene.

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

Tsɔ disablednɔnɔmea kpe ɖe a <fieldset>ŋu be nàwɔ dziɖuɖu siwo katã le eme la nuwɔametɔe.

<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>
Nuxlɔ̃ame kple sekewo

Le gɔmedzedzea me la, web-browserwo awɔ nu ɖe ​​native form controls ( <input>, <select>kple <button>elements) siwo katã le a me ŋu <fieldset disabled>abe nuwɔametɔwo ene, si axe mɔ na keyboard kple mouse siaa ƒe kadodo le wo dzi. Gake ne nusiwo le wò agbalẽvia me hã le eme <a ... class="btn btn-*">la, ke pointer-events: none. Abe alesi míede dzesii le akpa si ku ɖe nuwɔametɔ ƒe nɔnɔme ŋu na abɔtawo (eye vevietɔ le akpa sue si ku ɖe seke ƒe akpawo ŋu) me ene la, womeɖo CSS ƒe nɔnɔme sia ɖe ɖoɖo nu haɖe o eye womedo alɔe bliboe le Internet Explorer 10 me o, eye maxe mɔ na keyboard zãlawo be woagawɔe o te ŋu léa ŋku ɖe kadodo siawo ŋu alo wɔa dɔ le wo ŋu. Eyata be nànɔ dedie la, zã JavaScript si wowɔ ɖe ɖoɖo nu nàtsɔ awɔ kadodo mawo ŋudɔ.

Cross-browser ƒe dɔwɔwɔ ɖekae

Togbɔ be Bootstrap awɔ atsyã siawo ŋudɔ le web-browserwo katã me hã la, Internet Explorer 11 kple esiwo le ete mewɔa dɔ bliboe le disablednɔnɔme si le a <fieldset>. Zã JavaScript si nèwɔ ɖe ɖoɖo nu nàtsɔ axe mɔ ɖe fieldset la nu le web-browser siawo me.

Dadaɖeanyi

Na nyaŋuɖoɖo xɔasi, si ŋu woate ŋu awɔ dɔ le na wò zãlawo kple HTML5 ƒe agbalẽvi ƒe kpeɖodzi– si le míaƒe web-browser siwo katã míedoa alɔ me . Tia tso web-browser ƒe kpeɖodzinya ƒe nyaŋuɖoɖo gbãtɔa me, alo nàwɔ gbedasi tɔxɛwo ŋudɔ kple míaƒe klass siwo wotu ɖe eme kple JavaScript gɔmedzedze.

Míele aɖaŋu ɖom fifia be nàzã kpeɖodzinana ƒe atsyã siwo wowɔ ɖe ɖoɖo nu, elabena native browser default validation messages meɖea mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu la fiana ɣesiaɣi le web-browserwo katã me o (vevietɔ, Chrome le kɔmpiuta dzi kple asitelefon dzi).

Ale si wòwɔa dɔe

Alesi agbalẽvi ƒe kpeɖodzinana wɔa dɔe kple Bootstrap enye si:

  • Wozãa HTML gbalẽvi ƒe kpeɖodzinana to CSS ƒe alakpa-klas eve dzi, :invalidkple :valid. Eku ɖe <input>, <select>, kple <textarea>nu veviwo ŋu.
  • Bootstrap scopes the :invalidkple :validatsyãwo na dzila .was-validatedƒe klass, zi geɖe la, wozãnɛ ɖe <form>. Ne menye nenema o la, agble ɖesiaɖe si wobia si me asixɔxɔ aɖeke mele o la adze abe mesɔ o ene le axa ƒe agbatsɔtsɔ me. To mɔ sia dzi la, àte ŋu atia ɣeyiɣi si nàwɔ dɔ le wo ŋu (zi geɖe la, ne wote agbalẽviawo ɖoɖo ɖa vɔ).
  • Be nàgbugbɔ aɖo agbalẽvia ƒe dzedzeme (le kpɔɖeŋu me, le agbalẽvia ɖoɖo ɖa si trɔna me to AJAX zazã me la), ɖe .was-validatedklass la ɖa le <form>agate ŋu le eɖoɖo vɔ megbe.
  • Abe fallback ene, .is-invalideye .is-validwoateŋu azã klasswo ɖe pseudo-classes teƒe na server side validation . Womebia tso a.was-validated dzilawo ƒe klass o.
  • Le mɔxexe ɖe alesi CSS wɔa dɔe ta la, míate ŋu (fifia) awɔ atsyãwo ŋudɔ ɖe a <label>si va doa ŋgɔ na nuŋlɔɖi dzikpɔkpɔ le DOM me JavaScript si wowɔ ɖe ɖoɖo nu ƒe kpekpeɖeŋu manɔmee o.
  • Egbegbe web-browserwo katã doa alɔ constraint validation API , si nye JavaScript mɔnu siwo kplɔ wo nɔewo ɖo tsɔ ɖoa ​​kpe agbalẽviwo dzi kpɔkpɔ dzi.
  • Nyaŋuɖoɖo ƒe gbedasiwo ate ŋu azã web-browser la ƒe gɔmedzedze ƒe nɔnɔme gbãtɔwo (woto vovo na web-browser ɖesiaɖe, eye womate ŋu atrɔ asi le wo ŋu to CSS dzi o) alo míaƒe nyaŋuɖoɖo ƒe atsyã tɔxɛwo kple HTML kple CSS bubuwo.
  • Àte ŋu ana gbedasi siwo wowɔ ɖe ɖoɖo nu ƒe kpeɖodzinyawo kple setCustomValidityle JavaScript me.

Esi esia le susu me na wò la, bu míaƒe agbalẽvi ƒe kpeɖodzi ƒe atsyã tɔxɛwo, server ƒe akpa ƒe klass siwo woate ŋu atia, kple browser ƒe nɔnɔme gbãtɔwo ƒe wɔwɔfia siwo gbɔna ŋu kpɔ.

Atsyã siwo wowɔ ɖe ɖoɖo nu

Le Bootstrap ƒe nuŋlɔɖi ƒe kpeɖodzi gbedasi tɔxɛwo gome la, ahiã be nàtsɔ novalidateboolean nɔnɔmea akpe ɖe wò <form>. Esia na be browser ƒe nyaŋuɖoɖo ƒe aɖaŋuɖoɖo siwo woɖo ɖi la mewɔa dɔ o, gake eganaa mɔnukpɔkpɔ ame be wòakpɔ agbalẽviawo ƒe kpeɖodzi APIwo le JavaScript me. Dze agbagba nàtsɔ agbalẽvi si le ete la aɖo ɖa; míaƒe JavaScript la axe mɔ ɖe submit ƒe dzesi la nu eye wòagblɔ nyaŋuɖoɖowo na wò. Ne èle agbagba dzem be yeaɖoe ɖa la, àkpɔ :invalidkple :validatsyã siwo wozã ɖe wò agbalẽvia dzi kpɔkpɔ ŋu.

Nyaŋuɖoɖo ƒe atsyã tɔxɛwo zãa amadede tɔxɛwo, liƒowo, susu ƒe atsyãwo, kple megbe dzesiwo be woatsɔ aɖo nyaŋuɖoɖowo gbɔ nyuie wu. Megbenyawo ƒe nɔnɔmetatawo na <select>s koe li kple .custom-select, eye menye .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>

Browser ƒe ɖoɖowɔɖiwo

Mètsɔ ɖeke le custom validation feedback gbedasiwo alo JavaScript ŋɔŋlɔ me be nàtrɔ agbalẽvi ƒe nuwɔnawo oa? Wo katã nyuie, àte ŋu azã browser la ƒe defaults. Te agbalẽvi si le ete la ɖoɖo ɖa kpɔ. Le wò browser kple OS nu la, àkpɔ nyaŋuɖoɖo ƒe atsyã si to vovo vie.

Togbɔ be womateŋu awɔ nyaŋuɖoɖo ƒe atsyã siawo kple CSS o hã la, àteŋu atrɔ asi le nyaŋuɖoɖo ƒe nuŋɔŋlɔa ŋu kokoko to JavaScript dzi.

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

Server ƒe akpa dzi

Míele aɖaŋu ɖom be nàzã client-side validation, gake nenye be èhiã server-side validation la, àteŋu afia agbalẽvi ƒe akpa siwo mesɔ o eye wosɔ kple .is-invalidkple .is-valid. De dzesii be .invalid-feedbackwodoa alɔe hã kple klass siawo.

Edze nyuie!
Edze nyuie!
@ .
Taflatse tia zãla ƒe ŋkɔ.
Taflatse na du si sɔ la.
Taflatse tia nɔnɔme si sɔ.
Taflatse na zip si sɔ na wò.
Ele be nàlɔ̃ ɖe edzi hafi aɖoe ɖa. 
<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>

Nusiwo wodo alɔe

Dzesidede atsyãwo li na agbalẽvi ƒe dziɖuɖu kple akpa siwo gbɔna:

  • <input>s kple <textarea>s kple .form-control(si me ɖeka .form-controlle nyawo tsɔtsɔ de eme ƒe ƒuƒoƒowo me hã le) .
  • <select>s kple .form-controlalo.custom-select
  • .form-checks
  • .custom-checkboxs kple .custom-radios
  • .custom-file
Taflatse ŋlɔ gbedasi aɖe ɖe nuŋɔŋlɔa ƒe akpaa dzi.
Kpɔɖeŋu nyaŋuɖoɖo ƒe nuŋɔŋlɔ si mesɔ o
Kpɔɖeŋu geɖe wu si nye nyaŋuɖoɖo ƒe nuŋɔŋlɔ si mesɔ o
Kpɔɖeŋu si mesɔ o custom select feedback
Kpɔɖeŋu custom file ƒe nyaŋuɖoɖo si mele eteƒe o 
<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>

Dɔwɔnu ƒe Aɖaŋuɖoɖowo

Ne wò agbalẽvi ƒe ɖoɖo ɖe mɔ ɖe eŋu la, àteŋu aɖɔli .{valid|invalid}-feedbackklassawo ɖe .{valid|invalid}-tooltipklasswo ta be woaɖe kpeɖodzinyaŋuɖoɖo afia le dɔwɔnu ƒe aɖaŋuɖoɖo si wowɔ ɖe atsyã me. Kpɔ egbɔ be dzila aɖe position: relativele asiwò hena dɔwɔnu ƒe aɖaŋuɖoɖo ƒe ɖoɖowɔwɔ. Le kpɔɖeŋu si le ete me la, esia le míaƒe kɔlam klasswo si xoxo, gake wò dɔa ateŋu abia ɖoɖo bubu.

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>

Trɔtrɔ ɖe nɔnɔmewo ŋu

Woateŋu atrɔ asi le kpeɖodzi nɔnɔmewo ŋu to Sass dzi kple $form-validation-statesanyigbatata. Sass ƒe anyigbatata sia si le míaƒe _variables.scssfaɛl me la, wotsɔa ʋuƒo ƒoa ʋuƒoe be wòawɔ valid/ .invalid validation states. Anyigbatata si wotsɔ ƒo ƒui si woatsɔ atrɔ asi le dukɔ ɖesiaɖe ƒe amadede kple dzesi ŋu la le eme. Togbɔ be dukɔ bubu aɖeke medoa alɔ web-browserwo o hã la, amesiwo zãa atsyã siwo wowɔ ɖe ɖoɖo nu ate ŋu atsɔ agbalẽvi ƒe nyaŋuɖoɖo siwo sesẽ wu akpe ɖe eŋu bɔbɔe.

Taflatse de dzesii be míeɖo aɖaŋu be nàtrɔ asi le asixɔxɔ siawo ŋu ne màtrɔ asi le form-validation-statemixin la hã ŋu o.

// 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));
}

Agbalẽvi siwo wowɔ ɖe ɖoɖo nu

Ne èdi be yeatrɔ asi le eŋu geɖe wu eye wòawɔ ɖeka kple browser la, zã míaƒe agbalẽvi ƒe akpa siwo nètrɔ asi le keŋkeŋ la nàtsɔ aɖɔli web-browser la ƒe nɔnɔme gbãtɔwo. Wotu wo ɖe gɔmesese kple dzesidede si ŋu woate ŋu aɖo la tame, eyata wonye nu sesẽ siwo woatsɔ aɖɔli agbalẽvi ɖesiaɖe si woɖo ɖi ƒe dziɖuɖu.

Dzesiɖakawo kple radiowo

Woxatsa aɖaka ɖesiaɖe kple radio <input>kple <label>pairing ɖe a me <div>be woawɔ míaƒe custom control. Le ɖoɖo nu la, esia nye mɔnu ma ke si míezãna le gɔmedzedzea .form-checkme .

Míezãa nɔvi tiatia ( ~) na míaƒe <input>nutoawo katã—abe :checked—be míawɔ míaƒe agbalẽvi ƒe dzesi si wowɔ ɖe ɖoɖo nu la ƒe atsyã nyuie. Ne míetsɔe kpe ɖe .custom-control-labelklass la ŋu la, míate ŋu awɔ nuŋɔŋlɔa ƒe atsyã hã na nu ɖesiaɖe le <input>'s nɔnɔme nu.

Míeɣlaa default la <input>kple opacityeye míezãa la .custom-control-labeltsɔ tua custom form indicator yeye ɖe eƒe teƒe kple ::beforekple ::after. Nublanuitɔe la, míate ŋu atu custom ɖeka tso ko me <input>o elabena CSS's contentmewɔa dɔ le element ma dzi o.

Le nɔnɔme siwo wodo kpɔ me la, míezãa base64 embedded SVG dzesiwo tso Open Iconic . Esia naa míekpɔa ŋusẽ nyuitɔ kekeake dzi le atsyã kple teƒeɖoɖo le web-browserwo kple mɔ̃wo dzi.

Dzesiwo ƒe Aɖakawo

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

Dzesiɖaka siwo wowɔ ɖe ɖoɖo nu hã ateŋu azã :indeterminatepseudo class la ne woɖoe kple asi to JavaScript dzi (HTML nɔnɔme aɖeke meli si woatsɔ agblɔe o).

Ne èle jQuery zãm la, ele be nane si le abe esia ene nasɔ gbɔ:

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

Radiowo dzi

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

Le fli me

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

Si me woɖe dzo le

Woate ŋu awɔ dzesideɖaka kple radio siwo wowɔ ɖe ɖoɖo nu hã nuwɔametɔe. Tsɔ disabledboolean nɔnɔme kpe ɖe la ŋu <input>eye woawɔ ɖoɖo ɖe nɔnɔmefianu tɔxɛ kple dzeside ƒe nuŋlɔɖi ŋu le eɖokui si.

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

Trɔtrɔwo

Trɔtrɔ aɖe ƒe dzesi le aɖaka si wowɔ ɖe ɖoɖo nu ŋu gake ezãa .custom-switchklass la tsɔ ɖea tɔtrɔ ƒe tɔtrɔ aɖe gɔme. Trɔtrɔwo hã doa alɔ disablednɔnɔmea.

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

Tia nuɖuɖu siwo le eme

Menu <select>tɔxɛwo hiã klass tɔxɛ aɖe ko, .custom-selectbe woaʋu atsyã tɔxɛawo. Atsyã siwo wowɔ ɖe ɖoɖo nu la se ɖe <select>'s ƒe dzedzeme gbãtɔ dzi eye womateŋu atrɔ asi le <option>s la ŋu o le web-browser ƒe seɖoƒewo ta.

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

Àte ŋu atiae hã tso tiatia suewo kple gãwo dome be woasɔ kple míaƒe nuŋɔŋlɔ siwo ƒe lolome sɔ kple wo nɔewo.

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

Wodoa multiplealɔ nɔnɔmea hã:

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

Abe alesi sizenɔnɔmea le ene la:

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

Kekeme

Wɔ ɖoɖo siwo wowɔ ɖe ɖoɖo <input type="range">nu kple .custom-range. Wotrɔ asi le hadzidzia (megbea) kple asibidɛ (asixɔxɔa) siaa ŋu be woadze ɖeka le web-browserwo katã me. Esi wònye be IE kple Firefox koe doa alɔ woƒe hadzidzia “yɔyɔ” tso asibidɛa ƒe miame alo ɖusime abe mɔnu si dzi woato afia ŋgɔyiyi kple ŋku ene ta la, míedoa alɔe fifia o.

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

Range inputs le implicit values ​​na minkple max— 0kple 100, ɖe wo nɔewo yome. Àteŋu agblɔ asixɔxɔ yeyewo na amesiwo zãa minkple maxnɔnɔmewo.

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

Le gɔmedzedzea me la, range inputs “snap” na integer values. Be nàtrɔ esia la, àteŋu agblɔ stepasixɔxɔ aɖe. Le kpɔɖeŋu si le ete me la, míedzi afɔɖeɖeawo ƒe xexlẽme ɖe edzi zi gbɔ zi eve to step="0.5".

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

Faɛlwo ƒe nyatakakadzraɖoƒe

Plugin si wokafu be wòawɔ agbe na custom file input: bs-custom-file-input , emae nye nusi míele zazãm fifia le afisia le míaƒe docs me.

Faɛl ƒe nyawo tsɔtsɔ de emee nye gnarly wu le ƒuƒoƒoa me eye wòbia JavaScript kpee ne èdi be yeatsɔ wo aƒo ƒu kple dɔwɔwɔ Tia faɛl... kple faɛl ŋkɔ nuŋɔŋlɔ si nètia.

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

Míeɣlaa faɛl si woɖo ɖi la <input>to . Wowɔa abɔta la eye woɖonɛ ɖe teƒe si nye . Mlɔeba la, míeɖe gbeƒã a kple le la dzi na dometsotso nyuitɔ na nya siwo ƒo xlãe.opacity<label>::afterwidthheight<input>

Gbegɔmeɖeɖe alo asitɔtrɔ le kaawo ŋu kple SCSS

Wozãa :lang()pseudo-class la tsɔ ɖea mɔ be woaɖe “Browse” nuŋɔŋlɔa gɔme ɖe gbe bubuwo me. Tsɔ gbegbɔgblɔ ƒe dzesi si sɔ kple ka siwo woɖo ɖe teƒea la ɖe asi alo tsɔ nyawo kpe ɖe $custom-file-textSass ƒe tɔtrɔ ŋu . Woate ŋu atrɔ asi le Eŋlisigbe me kaawo ŋu nenema ke. Le kpɔɖeŋu me, ale si ame ate ŋu atsɔ Spaingbe me gɔmeɖeɖe aɖe akpe ɖe eŋue nye esi (Spanishgbe me gbegbɔgblɔ ƒe kɔda nye ):es

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

Afi siae lang(es)le dɔ wɔm le faɛl ƒe nuŋɔŋlɔ si wowɔ ɖe ɖoɖo nu na Spaingbe me gɔmeɖeɖe ŋu:

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

Ahiã be nàɖo wò nuŋlɔɖia ƒe gbegbɔgblɔ (alo eƒe ati sue) nyuie hafi nuŋɔŋlɔ si sɔ la nadze. Woateŋu awɔ esia to nɔnɔme silang le <html>element la dzi alo Content-LanguageHTTP tanya la zazã me , le mɔnu bubuwo dome.

Gbegɔmeɖeɖe alo asitɔtrɔ le kaawo ŋu kple HTML

Bootstrap hã na mɔnu aɖe si dzi woato aɖe “Browse” nuŋɔŋlɔa gɔme le HTML me kple data-browsenɔnɔme si woateŋu atsɔ akpe ɖe nuŋɔŋlɔ ƒe dzeside si wowɔ ɖe ɖoɖo nu ŋu (kpɔɖeŋu le Dutchgbe me):

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