Source

Mefuta

Mehlala le litataiso tsa tšebeliso bakeng sa mekhoa ea ho laola liforomo, likhetho tsa moralo, le likarolo tsa tloaelo bakeng sa ho theha mefuta e mengata e fapaneng.

Kakaretso

Litaolo tsa foromo ea Bootstrap li hola ho mefuta ea rona ea Rebooted ka litlelase. Sebelisa litlelase tsena ho kena ho liponts'o tsa tsona tse ikhethileng bakeng sa ho fana ka mokhoa o ts'oanang ho libatli le lisebelisoa.

Netefatsa hore o sebelisa typetšobotsi e nepahetseng linthong tsohle tse kentsoeng (mohlala, emailbakeng sa aterese ea lengolo-tsoibila kapa numberlintlha tsa linomoro) ho nka monyetla ka taolo e ncha ea ho kenya joalo ka netefatso ea lengolo-tsoibila, khetho ea linomoro, le tse ling.

Mona ke mohlala o potlakileng oa ho bonts'a mekhoa ea sebopeho sa Bootstrap. Tsoela pele ho bala litokomane tsa litlelase tse hlokahalang, sebopeho sa liforomo, le tse ling.

Ha ho mohla re tla arolelana lengolo-tsoibila la hau le mang kapa mang. 
<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>

Litaolo tsa foromo

Litaolo tsa mongolo - joalo <input>ka s, <select>s, le <textarea>s - li ngotsoe ho latela .form-controlsehlopha. Ho kenyelelitsoe litaele tsa ponahalo e akaretsang, boemo ba maikutlo, boholo, le tse ling.

Etsa bonnete ba hore u hlahloba liforomo tsa rona tsa tloaelo ho ntlafatsa setaele <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>

Ho kenya lifaele, fapanyetsana .form-controlbakeng sa .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>

Boholo

Beha bophahamo u sebelisa litlelase joalo ka .form-control-lgle .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>

Bala feela

Kenya readonlysemelo sa boolean ho se kentsweng ho thibela phetoho ya boleng ba se kentsweng. Melaetsa ea ho bala feela e bonahala e le bobebe (feela joalo ka lintho tse kentsoeng tse koetsoeng), empa boloka khesara e tloaelehileng.

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

Mongolo o hlakileng feela

Haeba u batla ho ba le <input readonly>likarolo ka sebopeho sa hau tse ngotsoeng joalo ka mongolo o hlakileng, sebelisa .form-control-plaintextsehlopha ho tlosa setaele sa sebopeho sa sebopeho sa kamehla le ho boloka moeli o nepahetseng le padding.

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

Mefuta e Kenyellelitsoeng

Seta mefuta e meng ea lintho tse ka phutholloang ka ho otloloha u sebelisa .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>

Li-checkbox le liea-le-moea

Mabokose a kamehla a ho hlahloba le liea-le-moea a ntlafatsoa ka thuso ea .form-check, sehlopha se le seng sa mefuta e 'meli ea ho kenya se ntlafatsang sebopeho le boitšoaro ba likarolo tsa bona tsa HTML . Li-checkbox ke tsa ho khetha khetho e le 'ngoe kapa tse' maloa lethathamong, ha liea-le-moea e le tsa ho khetha khetho e le 'ngoe ho tse ngata.

Mabokose le liea-le-moea tse holofetseng lia tšehetsoa, ​​empa ho fana ka not-allowedcursor ho hover ea motsoali <label>, u tla hloka ho kenya disabledtšobotsi ho .form-check-input. Boemo bo holofetseng bo tla sebelisa 'mala o bobebe ho thusa ho bontša boemo ba ho kenya.

Li-checkbox le lisebelisoa tsa seea-le-moea li hahiloe ho ts'ehetsa netefatso ea foromo e thehiloeng ho HTML le ho fana ka lileibole tse khutšoane, tse fumanehang. Ka hona, bana ba rona <input>le <label>bana ba rona ke likarolo tsa bana ho fapana le tse <input>ka hare ho <label>. Sena se batla se le leetsi ho feta kamoo o tlamehang ho hlakisa idle forlitšoaneleho ho amana <input>le <label>.

Ea kamehla (e phuthetsoe)

Ka mokhoa o ikhethileng, palo efe kapa efe ea li-checkbox le liea-le-moea tseo e leng bana ba motho li tla beoa holimo 'me li aroloe ka tsela e loketseng le .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>

E mocheng

Hlopha li-boxbox kapa liea-le-moea moleng o ts'oanang o tšekaletseng ka ho .form-check-inlineeketsa .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>

Ntle le lileibole

Eketsa .position-staticho tse kentsoeng ka har'a .form-checkmoo, ha u na mongolo oa leibole. Hopola ho fana ka mofuta o mong oa leibole bakeng sa mahlale a thusang (mohlala, ho sebelisa 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>

Sebopeho

Kaha Bootstrap e sebetsa display: blockle width: 100%hoo e batlang e le taolong eohle ea liforomo tsa rona, liforomo li tla ema ka ho sa feleng. Litlelase tse ling li ka sebelisoa ho fetola sebopeho sena ho latela foromo.

Theha lihlopha

Sehlopha .form-groupke mokhoa o bonolo ka ho fetisisa oa ho eketsa sebopeho se itseng ho liforomo. E fana ka sehlopha se feto-fetohang se khothaletsang sehlopha se nepahetseng sa lileibole, li-control, mongolo oa boikhethelo oa thuso, le melaetsa ea netefatso ea foromo. Ka mokhoa o ikhethileng e sebetsa feela margin-bottom, empa e khetha mefuta e meng ka moo ho .form-inlinehlokahalang. E sebelise le <fieldset>s, <div>s, kapa hoo e batlang e le ntho efe kapa efe e 'ngoe.

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

Gridi ea foromo

Mefuta e mengata e rarahaneng e ka hahoa ho sebelisoa lihlopha tsa rona tsa marang-rang. Sebelisa tsena bakeng sa meralo ea liforomo tse hlokang likholomo tse ngata, bophara bo fapaneng, le likhetho tse ling tsa tekano.

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

Mola oa foromo

U ka boela ua fapanyetsana , phetoho .rowea .form-rowmola oa rona o tloaelehileng oa marang-rang o fetang li-gutters tsa kamehla bakeng sa litlhophiso tse thata le tse kopanetsoeng.

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

Mehaho e rarahaneng haholoanyane e ka boela ea etsoa ka tsamaiso ea marang-rang.

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

Sebopeho se otlolohileng

Theha liforomo tse tšekaletseng ka marang-rang ka ho eketsa .rowsehlopha ho theha lihlopha le ho sebelisa .col-*-*lihlopha ho hlakisa bophara ba lileibole le litsamaiso tsa hau. Etsa bonnete ba hore o eketsa .col-form-labelho s ea hau <label>e le hore li shebane le litsamaiso tsa tsona tse amanang.

Ka linako tse ling, u ka 'na ua hloka ho sebelisa lisebelisoa tsa marang-rang kapa tsa padding ho theha tlhophiso e phethahetseng eo u e hlokang. Ka mohlala, re tlositse padding-topleibole ea li-input tsa seea-le-moea tse hlophiloeng ho nyallanya mongolo oa motheo.

Liea-le-moea
Lebokose la ho hlahloba 
<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>
Sekhahla sa leibole ea sebopeho se otlolohileng

Etsa bonnete ba hore o sebelisa .col-form-label-smkapa .col-form-label-lgho <label>s kapa <legend>s ea hau ho latela ka nepo boholo ba .form-control-lgle .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>

Tekanyo ea kholomo

Joalokaha ho bontšitsoe mehlaleng e fetileng, sistimi ea rona ea marang-rang e u lumella ho beha palo efe kapa efe ea .cols ka har'a a .rowkapa .form-row. Ba tla arola bophara bo fumanehang ka ho lekana pakeng tsa bona. U ka boela ua khetha karoloana ea litšiea tsa hau ho nka sebaka se sengata kapa se fokolang, ha tse setseng li .colarola tse ling ka ho lekana, ka lihlopha tse itseng tsa kholomo tse kang .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-size

Mohlala o ka tlase o sebelisa sesebelisoa sa flexbox ho beha litaba le liphetoho .colho .col-autoeona e le hore litšiea tsa hau li nke sebaka se lekaneng kamoo ho hlokahalang. Ka tsela e 'ngoe, boholo ba kholomo ka boeona bo ipapisitse le litaba.

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

U ka boela ua kopanya seo hape ka lihlopha tse khethehileng tsa kholomo.

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

'Me ehlile li-taolo tsa liforomo tsa tloaelo lia tšehetsoa.

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

Liforomo tsa inline

Sebelisa .form-inlinesehlopha ho hlahisa letoto la lileibole, li-control tsa foromo, le likonopo moleng o le mong o tšekaletseng. Litaolo tsa liforomo ka har'a liforomo tsa inline li fapana hanyane ho latela maemo a tsona a kamehla.

  • Litaolo ke display: flex, li putlamisa sebaka leha e le sefe se sesoeu sa HTML le ho u lumella ho fana ka taolo ea ho tsamaisana le libaka le lisebelisoa tsa flexbox .
  • Litaolo le lihlopha tsa ho kenya li fumana width: autoho feta tloaelo ea Bootstrap width: 100%.
  • Litaolo li hlaha feela ka har'a li-ports tsa bonyane tse bophara ba 576px ho ikarabella bakeng sa libaka tse patisaneng tsa ho shebella lisebelisoa tsa mehala.

U ka 'na ua hloka ho sebetsana le bophara le tekano ea litsamaiso tsa foromo ka bomong ka lisebelisoa tsa sebaka (joalokaha ho bontšitsoe ka tlase). Qetellong, etsa bonnete ba hore kamehla o kenyelletsa <label>taolo e nang le foromo ka 'ngoe, leha o hloka ho e patela baeti bao e seng babali ba skrini ba nang le .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>

Litaolo le likhetho tse ikhethileng le tsona lia tšehetsoa.

<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>
Mekhoa e meng ea li-label tse patiloeng

Litheknoloji tse thusang joalo ka sebali sa skrine li tla ba le bothata ka liforomo tsa hau haeba u sa kenyelletse leibole bakeng sa sengoloa se seng le se seng. Bakeng sa liforomo tsena tsa inline, u ka pata lileibole u sebelisa .sr-onlysehlopha. Ho na le mekhoa e meng ea ho fana ka leibole bakeng sa mahlale a thusang, joalo ka aria-label, aria-labelledbykapa titletšobotsi. Haeba ho se le e 'ngoe ea tsena e teng, mahlale a thusang a ka sebelisa placeholdertšobotsi, haeba a le teng, empa hlokomela hore tšebeliso ea placeholdersebaka sa mekhoa e meng ea ho ngola ha e ea eletsoa.

Mongolo oa thuso

Mongolo oa thuso oa li-block-level ka liforomo o ka etsoa ho sebelisoa .form-text(eo pele e neng e tsejoa e le .help-blockho v3). Mongolo oa thuso oa inline o ka kengoa ts'ebetsong ka mokhoa o bonolo ho sebelisa ntho efe kapa efe e kahare ea HTML le litlelase tsa ts'ebeliso joalo ka .text-muted.

Ho amahanya mongolo oa thuso le li-control tsa sebopeho

Mongolo oa thuso o lokela ho amahanngoa ka ho hlaka le taolo ea foromo eo e amanang le ho sebelisa aria-describedbysemelo. Sena se tla etsa bonnete ba hore litheknoloji tse thusang - joalo ka libali tsa skrineng - li tla phatlalatsa mongolo ona oa thuso ha mosebelisi a tsepamisitse maikutlo kapa a kena taolong.

Mongolo oa thuso o ka tlase o ka ngoloa ka .form-text. Sehlopha sena se kenyelletsa display: blockle ho eketsa moeli o ka holimo bakeng sa sebaka se bonolo ho tsoa ho tse ka holimo.

Phasewete ea hau e tlameha ho ba le litlhaku tse 8-20 ka bolelele, e be le litlhaku le linomoro, 'me e se be le libaka, litlhaku tse ikhethileng, kapa 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>

Mongolo o ka hare o ka sebelisa ntho efe kapa efe e tloaelehileng ea inline HTML (e ka ba <small>, <span>, kapa ntho e 'ngoe) ntle le sehlopha sa ts'ebeliso.

E tlameha ho ba le litlhaku tse 8-20 ka bolelele. 
<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>

Liforomo tse holofetseng

Kenya disabledtšobotsi ea boolean ho kenyeletso ho thibela litšebelisano tsa basebelisi le ho etsa hore e bonahale e le bobebe.

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

Kenya disabledtšobotsi ho a <fieldset>ho tima litaolo tsohle tse ka hare.

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

Ka nako e sa lekanyetsoang, libatli li tla tšoara litsamaiso tsohle tsa mofuta oa tlhaho ( <input>, <select>le <button>likarolo ) ka har'a sesebelisoa se <fieldset disabled>holofalitsoeng, ho thibela ho sebelisana ha keyboard le mouse ho tsona. Leha ho le joalo, haeba foromo ea hau e kenyelletsa le <a ... class="btn btn-*">likarolo, tsena li tla fuoa feela mokhoa oa pointer-events: none. Joalo ka ha ho boletsoe karolong e mabapi le boemo ba batho ba nang le bokooa bakeng sa likonopo (haholo-holo karolong e ka tlase bakeng sa likarolo tsa anchor), thepa ena ea CSS ha e e-so be boemong bo botle ebile ha e e-so tšehetsoe ka botlalo ho Internet Explorer 10, 'me e ke ke ea thibela basebelisi ba keyboard ho ba teng. e kgonang ho tsepamisa maikutlo kapa ho kenya tshebetsong mahokelo ana. Kahoo ho bolokeha, sebelisa JavaScript e tloaelehileng ho tima lihokelo tse joalo.

Khokahano ea sebatli

Leha Bootstrap e tla sebelisa mekhoa ena ho libatli tsohle, Internet Explorer 11 le ka tlase ha li tšehetse disabledtšobotsi ka botlalo ho <fieldset>. Sebelisa JavaScript e tloaelehileng ho tima "fieldset" ho libatli tsena.

Netefatso

Fana ka maikutlo a bohlokoa, a sebetsang ho basebelisi ba hau ka netefatso ea foromo ea HTML5- e fumaneha ho libatli tsohle tsa rona tse tšehetsoang . Khetha ho tsoa ho maikutlo a kamehla a netefatso ea sebatli, kapa kenya melaetsa ea tloaelo ka litlelase tsa rona tse ikahetseng le JavaScript e qalang.

Hajoale re khothaletsa ho sebelisa mekhoa e tloahelehileng ea ho netefatsa, kaha melaetsa ea netefatso ea kamehla ea sebatli ha e hlahisoe khafetsa ho litheknoloji tse thusang libatli tsohle (haholo-holo, Chrome komporong ea komporo le mehala).

Kamoo e sebetsang kateng

Mona ke kamoo netefatso ea foromo e sebetsang le Bootstrap:

  • Netefatso ea foromo ea HTML e sebelisoa ka lihlopha tse peli tsa pseudo tsa CSS, :invalidle :valid. E sebetsa ho <input>, <select>, le <textarea>likarolo.
  • Bootstrap e akaretsa :invalidle :validmekhoa ho sehlopha sa batsoali .was-validated, hangata e sebelisoa ho <form>. Ho seng joalo, sebaka se seng le se seng se hlokehang se se nang boleng se hlaha se fosahetse leqepheng la ho laeloa ha leqephe. Ka tsela ena, o ka khetha hore na o tla li sebelisa neng (hangata ka mor'a hore ho lekoe ho fana ka foromo).
  • Ho tsosolosa ponahalo ea foromo (mohlala, tabeng ea tlhahiso ea liforomo tse matla ka ho sebelisa AJAX), tlosa .was-validatedsehlopha <form>hape ka mor'a tlhahiso.
  • E le ho khutlela morao, .is-invalid'me .is-validlihlopha li ka sebelisoa ho e-na le lihlopha tsa pseudo bakeng sa ho netefatsa lehlakoreng la seva . Ha li hloke sehlopha .was-validatedsa batsoali.
  • Ka lebaka la lithibelo mabapi le hore na CSS e sebetsa joang, re ke ke (hajoale) re sebelisa mekhoa ho e <label>tlang pele ho taolo ea foromo ho DOM ntle le thuso ea JavaScript e tloaelehileng.
  • Libatli tsohle tsa sejoale-joale li tšehetsa API ea netefatso ea lithibelo , letoto la mekhoa ea JavaScript ea ho netefatsa litsamaiso tsa liforomo.
  • Melaetsa ea maikutlo e kanna ea sebelisa litlhophiso tsa sebatli (tse fapaneng bakeng sa sebatli se seng le se seng, 'me ha se setaele ka CSS) kapa mekhoa ea rona ea maikutlo ka HTML le CSS e eketsehileng.
  • O ka fana ka melaetsa ea netefatso ea tloaelo setCustomValidityka JavaScript.

U ntse u nahanne ka seo, nahana ka li-demos tse latelang bakeng sa mekhoa ea rona ea ho netefatsa liforomo tse ikhethileng, litlelase tsa boikhethelo tsa lehlakore la seva, le likhetho tsa sebatli.

Mekhoa e tloaelehileng

Bakeng sa melaetsa ea netefatso ea mokhoa oa Bootstrap, o tla hloka ho kenyelletsa novalidatesemelo sa boolean ho <form>. Sena se tima malebela a kamehla a sebatli, empa se ntse se fana ka phihlello ho li-API tsa netefatso ea liforomo ho JavaScript. Leka ho fana ka foromo e ka tlase; JavaScript ea rona e tla amohela konopo ea ho romella ebe e fetisetsa maikutlo ho uena. Ha u leka ho romela, u tla bona mekhoa :invalidle :validmekhoa e sebelisoang litaolong tsa foromo ea hau.

Mekhoa e ikhethileng ea maikutlo e sebelisa mebala e ikhethileng, meeli, mekhoa ea maikutlo, le litšoantšo tsa morao-rao ho fana ka maikutlo hamolemo. Matšoao a ka morao bakeng sa <select>s a fumaneha feela ka .custom-select, eseng .form-control.

E shebahala hantle!
E shebahala hantle!
@
Ka kopo, khetha lebitso la mosebelisi.
Ka kopo, fana ka toropo e nepahetseng.
Ka kopo, fana ka naha e nepahetseng.
Ka kopo, fana ka zip e nepahetseng.
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" 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>

Mekhahlelo ea sebatli

Ha u khahlehele melaetsa ea maikutlo a netefatso kapa ho ngola JavaScript ho fetola boitšoaro ba sebopeho? Ho lokile, o ka sebelisa li-fafault tsa sebatli. Leka ho fana ka foromo e ka tlase. Ho ipapisitse le sebatli sa hau le OS, u tla bona maikutlo a fapaneng hanyane.

Le hoja mekhoa ena ea maikutlo e ke ke ea ngoloa ka CSS, u ntse u ka khona ho fetola mongolo oa maikutlo ka 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>

Lehlakore la seva

Re khothaletsa ho sebelisa netefatso ea lehlakore la bareki, empa haeba o hloka netefatso ea lehlakore la seva, o ka bonts'a likarolo tse sa sebetseng le tse sebetsang tsa foromo ka .is-invalidle .is-valid. Hlokomela hore .invalid-feedbacke boetse e tšehetsoa le lihlopha tsena.

E shebahala hantle!
E shebahala hantle!
@
Ka kopo, khetha lebitso la mosebelisi.
Ka kopo, fana ka toropo e nepahetseng.
Ka kopo, fana ka naha e nepahetseng.
Ka kopo, fana ka zip e nepahetseng.
O tlameha ho dumela pele o romela. 
<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>

Lintlha tse tšehelitsoeng

Liforomo tsa rona tsa mohlala li bonts'a mongolo oa tlhaho <input>s ka holimo, empa mekhoa ea netefatso ea liforomo le eona e teng bakeng sa <textarea>s le taolo ea liforomo tse ikhethileng.

Ka kopo, kenya molaetsa sebakeng sa mongolo.
Mohlala oa mongolo o fosahetseng
Mohlala o mong oa mongolo o fosahetseng oa maikutlo
Mohlala oa maikutlo a fosahetseng a khethiloeng
Mohlala oa maikutlo a fosahetseng a faele ea tloaelo 
<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>

Lisebelisoa

Haeba sebopeho sa foromo ea hau se u lumella, u ka fapanyetsana .{valid|invalid}-feedbacklitlelase bakeng sa .{valid|invalid}-tooltiplitlelase ho hlahisa maikutlo a netefatso ka har'a sesebelisoa sa setaele. Etsa bonnete ba hore u na le motsoali ea nang le position: relativeeona bakeng sa boemo ba lisebelisoa. Mohlala o ka tlase, litlelase tsa rona li se li ntse li e-na le sena, empa morero oa hau o ka hloka mokhoa o mong oa ho seta.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide 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" 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>

Mefuta e tloaelehileng

Bakeng sa ho itloaetsa le ho feta le ho feto-fetoha ha sebatli, sebelisa likarolo tsa rona tsa liforomo tse tloahelehileng ho khutlisa liforomo tsa sebatli. Li hahiloe ka holim'a li-markup tsa semantic le tse fumanehang, ka hona ke liphatlalatso tse tiileng tsa taolo efe kapa efe ea kamehla.

Li-checkbox le liea-le-moea

Lebokose le leng le le leng la ho hlahloba le seea- le-moea <input>le <label>lipara li phuthetsoe ka <div>ho etsa taolo ea rona ea tloaelo. Ka sebopeho, ona ke mokhoa o ts'oanang le oa rona oa kamehla .form-check.

Re sebelisa mokhethoa oa banab'eno ( ~) bakeng sa <input>linaha tsohle tsa rona-joaloka- :checkedho etsa setaele sa rona sa sebopeho sa tloaelo hantle. Ha re kopantsoe le .custom-control-labelsehlopha, re ka boela ra seta mongolo oa ntho ka 'ngoe ho latela boemo ba <input>'s.

Re pata ntho e sa lekanyetsoang <input>le opacityho e sebelisa .custom-control-labelho aha sesupo sa mofuta o mocha sebakeng sa sona ka ::beforele ::after. Ka bomalimabe re ke ke ra theha tloaelo ho tsoa feela <input>hobane CSS's contentha e sebetse nthong eo.

Libakeng tse hlahlobiloeng, re sebelisa li -icon tsa SVG tse kentsoeng tsa base64 ho tsoa ho Open Iconic . Sena se re fa taolo e ntle ka ho fetisisa ea ho etsa setaele le ho beha maemo ho libatli le lisebelisoa.

Mabokose

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

Mabokose a tloaelo a ka boela a sebelisa sehlopha sa :indeterminatepseudo ha se setiloe ka JavaScript (ha ho na semelo sa HTML sa ho se hlakisa).

Haeba u sebelisa jQuery, ntho e kang ena e lokela ho lekana:

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

Liea-le-moea

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

E mocheng

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

E holofetse

Mabokose a tloaelehileng le liea-le-moea le tsona li ka tingoa. Eketsa disabledtšobotsi ea boolean ho <input>'me letšoao la tloaelo le tlhaloso ea leibole li tla etsoa ka mokhoa o ikemetseng.

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

Liphetoho

Switch e na le letšoao la lebokose la tlhahlobo la tloaelo empa e sebelisa .custom-switchsehlopha ho fana ka toggle switch. Li-switches li boetse li tšehetsa disabledtšobotsi.

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

Khetha menu

Li-menu <select>tsa tloaelo li hloka feela sehlopha se ikhethileng, .custom-selectho qala mekhoa e tloaelehileng. Mekhoa e tloahelehileng e lekanyelitsoe <select>ponahalong ea pele 'me ha e khone ho fetola <option>s ka lebaka la mefokolo ea sebatli.

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

U kanna ua khetha ho likhetho tse nyane le tse kholo tsa tloaelo ho tsamaisana le mongolo oa rona oa boholo bo lekanang.

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

Tšobotsi multiplee boetse e tšehetsoa:

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

Joalo ka sizetšobotsi:

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

Range

Etsa <input type="range">litaolo tsa tloaelo ka .custom-range. Pina (kamorao) le monoana (boleng) ka bobeli li ngotsoe ka mokhoa o ts'oanang ho libatli. Kaha ke IE le Firefox feela ba tšehetsang "ho tlatsa" pina ea bona ho tloha ka letsohong le letšehali kapa le letona la monoana o motona e le mokhoa oa ho bonts'a tsoelo-pele, ha joale ha re e tšehetse.

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

Maikutlo a marang-rang a na le litekanyetso tse hlakileng tsa minle max- 0le 100, ka ho latellana. O ka hlakisa boleng bo bocha bakeng sa ba sebelisang minle maxlitšoaneleho.

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

Ka mokhoa oa kamehla, mefuta e fapaneng ea lintho tse kenyang "snap" ho lipalo tse felletseng. Ho fetola sena, o ka hlakisa stepboleng. Mohlala o ka tlase, re habeli palo ea mehato ka ho sebelisa step="0.5".

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

Sebatli sa faele

Plugin e khothaletsoang ho phelisa faele e kentsoeng ka tloaelo: bs-custom-file-input , ke seo re se sebelisang hajoale ho litokomane tsa rona.

Kenyelletso ea faele ke eona e nyarosang ka ho fetesisa 'me e hloka JavaScript e eketsehileng haeba u ka rata ho e hokahanya le e sebetsang Khetha faele… le mongolo o khethiloeng oa lebitso la faele.

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

Re pata faele ea kamehla <input>ka tsela opacityebe ho e-na le hoo re seta faele ea <label>. Konopo e hlahisoa mme e behiloe ka ::after. Qetellong, re fana ka tlhahiso ea a widthle heightho <input>fumana sebaka se nepahetseng bakeng sa litaba tse potolohileng.

Ho fetolela kapa ho hlophisa likhoele ka mokhoa oa SCSS

Sehlopha sa :lang()pseudo se sebelisoa ho lumella ho fetolela mongolo oa "Browse" lipuong tse ling. Fetola kapa u kenye likenyo tsa mofuta oa $custom-file-textSass ka tag ea puo e amehang le likhoele tsa lehae. Likhoele tsa Senyesemane li ka etsoa ka mokhoa o ts'oanang. Mohlala, mona ke mokhoa oo motho a ka kenyang phetolelo ea Sepanishe (khoutu ea puo ea Sepanishe ke es):

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

Sena se lang(es)sebetsa mabapi le mokhoa oa ho kenya lifaele bakeng sa phetolelo ea Sepanishe:

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

U tla hloka ho hlophisa puo ea tokomane ea hau (kapa subtree ea eona) ka nepo e le hore mongolo o nepahetseng o ka bonts'oa. Sena se ka etsoa ho sebelisa tšobotsi langho element <html>kapa hlooho ea Content-LanguageHTTP , har'a mekhoa e meng.

Ho fetolela kapa ho hlophisa likhoele ka mokhoa oa HTML

Bootstrap e boetse e fana ka mokhoa oa ho fetolela mongolo oa "Browse" ho HTML ka data-browsetšobotsi e ka ekeletsoang leiboleng ea ho kenya tloaelo (mohlala ka Sedache):

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