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.

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

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">
    </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. Sebopeho disabledse tla sebelisa 'mala o bobebe ho thusa ho bontša boemo ba tlhahiso.

Li-checkbox le likonopo tsa seea-le-moea li tš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.

Lebokose la kamehla la ho hlahloba

Lebokose la ho hlahloba le emisitsoe

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

Radio ea kamehla

Radio ea bobeli ea kamehla

Radio e holofetseng

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

3 (e holofetse)

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

3 (e holofetse)

<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 mabitso a fumanehang bakeng sa litheknoloji tse 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 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>

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

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.

<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 row">
    <legend class="col-form-label col-sm-2 float-sm-left 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>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <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.

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

<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>
    <legend>Disabled fieldset example</legend>
    <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

Libatli li tšoara litaolo tsohle tsa liforomo ( <input>, <select>, le <button>elements) ka har'a sesebelisoa <fieldset disabled>e le tse holofetseng, li thibela ho sebelisana ha keyboard le mouse ho tsona.

Leha ho le joalo, haeba foromo ea hau e kenyelletsa lintho tse kang likonopo tse tloaelehileng joalo ka <a ... class="btn btn-*">, tsena li tla fuoa feela mokhoa oa pointer-events: none. Joalo ka ha ho boletsoe karolong e mabapi le boemo ba batho ba holofetseng bakeng sa likonopo (haholo-holo karolong e nyenyane ea li-ankora elements), thepa ena ea CSS ha e e-s'o be boemong bo tloaelehileng 'me ha e e-s'o tšehetsoe ka botlalo ho Internet Explorer 10. Litaolo tse thehiloeng ho ankora le tsona li tla be li ntse li le teng. e tsepamisitsoeng maikutlo ebile e sebetsa ka ho sebelisa keyboard. U tlameha ho fetola litaolo tsena ka ho eketsa tabindex="-1"ho li thibela ho fumana tsepamiso ea maikutlo le aria-disabled="disabled"ho bontša boemo ba tsona ho theknoloji e thusang.

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.

Rea tseba hore hajoale mekhoa ea netefatso ea litloaelo tsa bareki le lisebelisoa ha li fihlellehe, kaha ha li kopane le mahlale a thusang. Ha re ntse re sebetsa ka tharollo, re khothaletsa ho sebelisa khetho ea lehlakore la seva kapa mokhoa oa ho netefatsa sebatli sa kamehla.

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 :invalidle :validmekhoa e sebelisoang ho litaolo 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.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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>

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-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </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>

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.

Bakeng sa likarolo tse sa sebetseng, etsa bonnete ba hore maikutlo a fosahetseng/molaetsa oa phoso o amahanngoa le karolo e amehang ea foromo ho sebelisoa aria-describedby. Tšobotsi ena e lumella tse fetang bonngoe idhore li ka boleloa, haeba tšimo e se e ntse e supa mongolo oa mofuta o eketsehileng.

<form>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" 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" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" 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" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" 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

Litaelo tsa netefatso li teng bakeng sa taolo le likarolo tse latelang tsa liforomo:

<input>s le <textarea>s le.form-control
<select>s le .form-controlkapa.custom-select
.form-checks
.custom-checkboxs le .custom-radios
.custom-file

<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="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</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 mb-3">
    <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>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </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.

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 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-6 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>
  <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>

Ho iketsetsa

Lintlha tsa netefatso li ka etsoa ka mokhoa oa Sass ka ' $form-validation-statesmapa. E fumaneha faeleng ea rona _variables.scss, 'mapa ona oa Sass o theohile ho hlahisa maemo a kamehla valid/ a invalidnetefatso. Ho kenyelelitsoe 'mapa o hlophisitsoeng bakeng sa ho ikhethela 'mala le letšoao la naha ka' ngoe. Le ha ho se na linaha tse ling tse tšehetsoang ke libatli, ba sebelisang mekhoa e tloaelehileng ba ka eketsa maikutlo a rarahaneng habonolo.

Ka kopo hlokomela hore ha re khothaletse ho etsa litekanyetso tsena ntle le ho fetola motsoako form-validation-state.

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

Netefatsa sehlopha

Ho bona hore na ke lintlha life tse hlokang likhutlo tse pota-potiloeng ka har'a sehlopha sa ho kenya ka netefatso, sehlopha sa ho kenya se hloka sehlopha se eketsehileng .has-validation.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Ka kopo, khetha lebitso la mosebelisi.

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

Sheba lebokose lena le ikhethileng

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

Sheba lebokose lena le ikhethileng

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

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

Liea-le-moea

Fetolela seea-le-moea sena

Kapa u fetole seea-le-moea sena se tloaelehileng

<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

Fetolela seea-le-moea sena

Kapa u fetole seea-le-moea sena se tloaelehileng

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" 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="customRadioInline" 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.

Sheba lebokose lena le ikhethileng

Fetolela seea-le-moea sena

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

Fetolela ntho ena

Ntho e holofetseng ea switjha

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

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.

Mohlala oa mefuta

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

Mohlala oa mefuta

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

Mohlala oa mefuta

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

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

Khetla Archivo

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

Voeg je toe toe

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

Mefuta

Kakaretso

Litaolo tsa foromo

Boholo

Bala feela

Mongolo o hlakileng feela

Mefuta e Kenyellelitsoeng

Li-checkbox le liea-le-moea

Ea kamehla (e phuthetsoe)

E mocheng

Ntle le lileibole

Sebopeho

Theha lihlopha

Gridi ea foromo

Mola oa foromo

Sebopeho se otlolohileng

Sekhahla sa leibole ea sebopeho se otlolohileng

Tekanyo ea kholomo

Auto-size

Liforomo tsa inline

Mekhoa e meng ea li-label tse patiloeng

Mongolo oa thuso

Ho amahanya mongolo oa thuso le li-control tsa sebopeho

Liforomo tse holofetseng

Caveat ka liankora

Khokahano ea sebatli

Netefatso

Kamoo e sebetsang kateng

Mekhoa e tloaelehileng

Mekhahlelo ea sebatli

Lehlakore la seva

Lintlha tse tšehelitsoeng

Lisebelisoa

Ho iketsetsa

Netefatsa sehlopha

Mefuta e tloaelehileng

Li-checkbox le liea-le-moea

Mabokose

Liea-le-moea

E mocheng

E holofetse

Liphetoho

Khetha menu

Range

Sebatli sa faele

Ho fetolela kapa ho hlophisa likhoele ka mokhoa oa SCSS

Ho fetolela kapa ho hlophisa likhoele ka mokhoa oa HTML