Fòm

Egzanp ak direktiv itilizasyon pou estil kontwòl fòm, opsyon layout, ak konpozan koutim pou kreye yon gran varyete fòm.

Apèsi sou lekòl la

Kontwòl fòm Bootstrap yo elaji sou estil fòm Rebooted nou yo ak klas yo. Sèvi ak klas sa yo pou patisipe nan ekspozisyon Customized yo pou yon rann ki pi konsistan atravè navigatè ak aparèy.

Asire ou ke ou sèvi ak yon typeatribi apwopriye sou tout antre (pa egzanp, emailpou adrès imel oswa numberpou enfòmasyon nimerik) pou pwofite de nouvo kontwòl antre tankou verifikasyon imel, seleksyon nimewo, ak plis ankò.

Men yon egzanp rapid pou demontre estil fòm Bootstrap la. Kontinye lekti pou dokimantasyon sou klas obligatwa yo, fòm fòm, ak plis ankò.

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

Kontwòl fòm

Kontwòl fòm tèks yo-tankou <input>s, <select>s, ak <textarea>s-yo style ak .form-controlklas la. Gen estil pou aparans jeneral, eta konsantre, gwosè, ak plis ankò.

Asire ou ke ou eksplore fòm koutim nou an plis style <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>

Pou antre fichye a, chanje .form-controlpou .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>

Dimansyon

Mete wotè lè l sèvi avèk klas tankou .form-control-lgak .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>

Li sèlman

Ajoute readonlyatribi boolean an sou yon opinyon pou anpeche modifikasyon valè opinyon an. Antre lekti sèlman parèt pi lejè (menm jan ak entrain andikape), men kenbe kurseur estanda a.

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

Tèks senp lekti sèlman

Si ou vle gen <input readonly>eleman nan fòm ou a estile kòm tèks klè, sèvi ak .form-control-plaintextklas la pou retire fòm nan jaden fòm default epi konsève maj ki kòrèk la ak 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>

Ranje Antre

Mete entrées ranje defile orizontal lè l sèvi avèk .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>

Case ak radyo

Yo amelyore kaz ak radyo yo defo ak èd .form-check, yon sèl klas pou tou de kalite antre ki amelyore layout ak konpòtman eleman HTML yo . Bwat yo se pou chwazi youn oswa plizyè opsyon nan yon lis, pandan y ap radyo yo se pou chwazi yon opsyon nan plizyè.

Yo sipòte kaz ak radyo ki andikape. Atribi disableda pral aplike yon koulè pi lejè pou ede endike eta opinyon an.

Bwat ak bouton radyo yo sipòte validasyon fòm ki baze sou HTML epi yo bay etikèt ki kout, aksesib. Kòm sa yo, <input>s ak <label>s nou yo se eleman frè ak sè yo opoze ak yon <input>nan yon <label>. Sa a se yon ti kras plis verbose kòm ou dwe presize idak foratribi yo gen rapò <input>ak ak <label>.

Default (anpille)

Pa default, nenpòt kantite kaz ak radyo ki se frè ak sè imedyat yo pral anpile vètikal ak yon espas apwopriye ak .form-check.

Default kaz

Bwat enfim

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

Default radyo

Dezyèm radyo default

Radyo andikape

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

Nan liy

Gwoup kaz oswa radyo sou menm ranje orizontal la lè w ajoute .form-check-inlinenan nenpòt .form-check.

3 (enfim)

<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 (enfim)

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

San etikèt

Ajoute .position-staticnan entrain .form-checkki pa gen okenn tèks etikèt. Sonje toujou bay kèk fòm non aksesib pou teknoloji asistans (pa egzanp, lè l sèvi avèk 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>

Layout

Depi Bootstrap aplike display: blockak width: 100%prèske tout kontwòl fòm nou yo, fòm yo pral pa default pile vètikal. Lòt klas yo ka itilize pou varye layout sa a sou yon baz pou chak fòm.

Fòme gwoup yo

Klas .form-groupla se fason ki pi fasil pou ajoute kèk estrikti nan fòm yo. Li bay yon klas fleksib ki ankouraje bon gwoupman etikèt, kontwòl, tèks èd opsyonèl, ak mesaj validation fòm. Pa default li aplike sèlman margin-bottom, men li chwazi estil adisyonèl nan .form-inlinejan sa nesesè. Sèvi ak li ak <fieldset>s, <div>s, oswa prèske nenpòt lòt eleman.

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

Fòm griyaj

Fòm ki pi konplèks yo ka bati lè l sèvi avèk klas griy nou yo. Sèvi ak sa yo pou fòm fòm ki mande plizyè kolòn, lajè varye, ak opsyon aliyman adisyonèl.

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

Fòm ranje

Ou ka chanje tou .rowpou .form-row, yon varyasyon nan ranje kadriyaj estanda nou an ki pase plis pase goutyè kolòn default yo pou layout pi sere ak plis kontra enfòmèl ant.

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

Layout ki pi konplèks yo ka kreye tou ak sistèm kadriyaj la.

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

Fòm orizontal

Kreye fòm orizontal ak kadriyaj la lè w ajoute .rowklas la pou fòme gwoup epi itilize .col-*-*klas yo pou presize lajè etikèt ou yo ak kontwòl yo. Asire ou ke ou ajoute .col-form-labelnan <label>s ou tou pou yo ap vètikal santre ak kontwòl fòm ki asosye yo.

Pafwa, ou petèt bezwen sèvi ak sèvis piblik Marge oswa padding pou kreye aliyman pafè ou bezwen. Pou egzanp, nou te retire padding-topetikèt sou antre radyo anpile nou an pou pi byen aliman debaz tèks la.

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

Orizontal fòm etikèt gwosè

Asire w ou sèvi ak .col-form-label-smou .col-form-label-lgpou ou <label>kòrèkteman <legend>swiv gwosè .form-control-lgak .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>

Dimansyon kolòn

Jan yo montre nan egzanp anvan yo, sistèm kadriyaj nou an pèmèt ou mete nenpòt kantite .cols nan yon .rowoswa .form-row. Yo pral divize lajè ki disponib egalman ant yo. Ou ka chwazi tou yon ti gwoup kolòn ou yo pou pran plis oswa mwens espas, pandan y ap rès .colyo divize rès la egalman, ak klas kolòn espesifik tankou .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>

Oto-gwosè

Egzanp ki anba a sèvi ak yon sèvis piblik flexbox pou santre sa ki an vètikal ak chanjman .colpou .col-autokolòn ou yo sèlman pran otan espas sa nesesè. Mete yon lòt fason, gwosè kolòn nan tèt li ki baze sou kontni an.

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

Lè sa a, ou ka remix sa yon lòt fwa ankò ak klas kolòn gwosè espesifik.

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

Ak nan kou kontwòl fòm koutim yo sipòte.

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

Fòm Inline

Sèvi ak .form-inlineklas la pou montre yon seri etikèt, kontwòl fòm, ak bouton sou yon sèl ranje orizontal. Kontwòl fòm nan fòm enline yo varye yon ti kras nan eta default yo.

Kontwòl yo se display: flex, efondre nenpòt espas blan HTML ak pèmèt ou bay kontwòl aliyman ak espas ak sèvis piblik flexbox .
Kontwòl ak gwoup antre resevwa width: autopou pase sou valè Bootstrap default la width: 100%.
Kontwòl yo parèt sèlman nan liy nan pòch yo ki gen omwen 576 px lajè pou konsidere pòch yo etwat sou aparèy mobil.

Ou ka bezwen manyèlman adrese lajè ak aliyman kontwòl fòm endividyèl yo ak sèvis piblik espas (jan yo montre anba a). Anfen, asire w ke ou toujou mete yon <label>ak chak kontwòl fòm, menm si ou bezwen kache li nan vizitè ki pa lektè ekran ak .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>

Kontwòl fòm koutim ak seleksyon yo sipòte tou.

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

Altènatif pou etikèt kache yo

Teknoloji asistans tankou lektè ekran pral gen pwoblèm ak fòm ou yo si ou pa mete yon etikèt pou chak opinyon. Pou fòm enline sa yo, ou ka kache etikèt yo lè l sèvi avèk .sr-onlyklas la. Gen lòt metòd altènatif pou bay yon etikèt pou teknoloji asistans, tankou aria-label, aria-labelledbyoswa titleatribi. Si pa gen youn nan sa yo ki prezan, teknoloji asistans yo ka itilize itilize placeholderatribi a, si yo prezan, men sonje ke itilizasyon placeholderkòm yon ranplasman pou lòt metòd etikèt yo pa konseye.

Ede tèks

Tèks èd nan nivo blòk nan fòm yo ka kreye lè l sèvi avèk .form-text(ki te deja konnen kòm .help-blocknan v3). Tèks èd Inline ka aplike yon fason fleksib lè l sèvi avèk nenpòt eleman HTML aliye ak klas sèvis piblik tankou .text-muted.

Asosye tèks èd ak kontwòl fòm

Tèks èd yo ta dwe asosye klèman ak kontwòl fòm li gen rapò ak lè l sèvi avèk aria-describedbyatribi a. Sa a pral asire ke teknoloji asistans-tankou lektè ekran-ap anonse tèks èd sa a lè itilizatè a konsantre oswa antre nan kontwòl la.

Tèks èd ki anba a antre yo ka style ak .form-text. Klas sa a gen ladan display: blockepi ajoute kèk maj pi wo pou espas fasil soti nan entrain ki anwo yo.

Modpas Modpas ou a dwe genyen 8-20 karaktè, li dwe genyen lèt ak nimewo, epi li pa dwe genyen espas, karaktè espesyal oswa 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>

Tèks Inline ka sèvi ak nenpòt eleman HTML enline tipik (ke se yon <small>, <span>, oswa yon lòt bagay) ki pa gen anyen plis pase yon klas sèvis piblik.

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

Fòm andikape

Ajoute disabledatribi boolean an sou yon opinyon pou anpeche entèraksyon itilizatè yo epi fè li parèt pi lejè.

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

Ajoute disabledatribi a nan yon <fieldset>pou enfim tout kontwòl ki nan.

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

Opozisyon ak lankr

Navigatè trete tout kontwòl fòm natif natal ( <input>, <select>, ak <button>eleman) andedan yon <fieldset disabled>kòm andikape, anpeche tou de entèraksyon klavye ak sourit sou yo.

Sepandan, si fòm ou a gen ladan tou eleman koutim tankou bouton tankou <a ... class="btn btn-*">, yo pral sèlman bay sa yo yon style nan pointer-events: none. Jan yo note sa nan seksyon sou eta andikape pou bouton yo (e espesyalman nan sou-seksyon pou eleman jete lank), pwopriyete CSS sa a poko estandadize epi li pa konplètman sipòte nan Internet Explorer 10. Kontwòl ki baze sou jete lank yo pral toujou toujou. konsantre ak opere lè l sèvi avèk klavye a. Ou dwe modifye kontwòl sa yo manyèlman lè w ajoute tabindex="-1"pou anpeche yo resevwa konsantre epi aria-disabled="disabled"pou siyal eta yo bay teknoloji asistans yo.

Konpatibilite kwa-navigatè

Pandan ke Bootstrap pral aplike estil sa yo nan tout navigatè, Internet Explorer 11 ak anba a pa konplètman sipòte disabledatribi a sou yon <fieldset>. Sèvi ak JavaScript koutim pou enfim fieldset nan navigatè sa yo.

Validasyon

Bay itilizatè ou yo fidbak ki gen anpil valè ak aksyon ak validation fòm HTML5 – disponib nan tout navigatè nou yo sipòte . Chwazi nan fidbak validasyon default navigatè a, oswa aplike mesaj koutim ak klas entegre nou yo ak JavaScript starter.

Nou konnen kounye a estil validation personnalisé bò kliyan yo ak konsèy zouti yo pa aksesib, paske yo pa ekspoze a teknoloji asistans. Pandan ke nou travay sou yon solisyon, nou ta rekòmande swa itilize opsyon nan bò sèvè oswa metòd la validation navigatè default.

Ki jan li fonksyone

Men ki jan validasyon fòm travay ak Bootstrap:

Validasyon fòm HTML aplike atravè de pseudo-klas CSS yo, :invalidak :valid. Li aplike a <input>, <select>, ak <textarea>eleman yo.
Bootstrap sijè a :invalidak :validestil nan klas paran .was-validated, anjeneral, aplike nan <form>. Sinon, nenpòt jaden obligatwa san yon valè parèt kòm envalid sou chaj paj la. Nan fason sa a, ou ka chwazi ki lè pou aktive yo (tipikman apre yo fin eseye soumèt fòm).
Pou reset aparans fòm nan (pa egzanp, nan ka soumèt fòm dinamik lè l sèvi avèk AJAX), retire .was-validatedklas la nan <form>ankò apre soumèt.
Kòm yon sekou, .is-invalidak .is-validklas yo ka itilize olye pou yo pseudo-klas yo pou validation bò sèvè . Yo pa bezwen yon .was-validatedklas paran.
Akòz kontrent nan fason CSS travay, nou pa ka (kounye a) aplike estil nan yon <label>ki vini anvan yon kontwòl fòm nan DOM a san èd nan JavaScript koutim.
Tout navigatè modèn yo sipòte API validation contrainte , yon seri metòd JavaScript pou validation kontwòl fòm yo.
Mesaj Feedback yo ka itilize defo navigatè yo (diferan pou chak navigatè, epi ki pa gen stil atravè CSS) oswa estil fidbak koutim nou yo ak HTML ak CSS adisyonèl.
Ou ka bay mesaj validite koutim ak setCustomValiditynan JavaScript.

Avèk sa nan tèt ou, konsidere demonstrasyon sa yo pou estil validation fòm koutim nou yo, klas bò sèvè opsyonèl, ak default navigatè.

Styles koutim

Pou mesaj validation fòm Bootstrap koutim, w ap bezwen ajoute novalidateatribi boolean nan <form>. Sa a enfim konsèy zouti yo nan navigatè a defo, men li toujou bay aksè a API validasyon fòm yo nan JavaScript. Eseye soumèt fòm ki anba a; JavaScript nou an pral entèsepte bouton soumèt la ak relè fidbak ba ou. Lè w ap eseye soumèt, ou pral wè estil yo :invalidak :validaplike nan kontwòl fòm ou yo.

Estil fidbak koutim aplike koulè koutim, fwontyè, estil konsantre, ak ikon background yo pi byen kominike fidbak. Ikon background pou <select>s yo disponib sèlman ak .custom-select, epi yo pa .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>

Defo navigatè a

Ou pa enterese nan mesaj fidbak validasyon koutim oswa ekri JavaScript pou chanje konpòtman fòm? Tout bon, ou ka itilize default navigatè yo. Eseye soumèt fòm ki anba a. Tou depan de navigatè ou a ak OS, ou pral wè yon style yon ti kras diferan nan fidbak.

Pandan ke estil fidbak sa yo pa ka style ak CSS, ou ka toujou Customize tèks la fidbak atravè 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>

Bò sèvè

Nou rekòmande pou sèvi ak validation bò kliyan, men nan ka ou bezwen validation bò sèvè, ou ka endike jaden fòm ki pa valab ak valab ak .is-invalidak .is-valid. Remake byen ke .invalid-feedbackse sipòte tou ak klas sa yo.

Pou jaden ki pa valab, asire w ke fidbak/mesaj erè a ki pa valab asosye ak jaden fòm ki enpòtan an lè l sèvi avèk aria-describedby. Atribi sa a pèmèt plis pase yon idreferans, nan ka jaden an deja montre tèks fòm adisyonèl.

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

Eleman sipòte

Estil validation yo disponib pou kontwòl fòm sa yo ak eleman sa yo:

<input>s ak <textarea>s avèk.form-control
<select>s ak .form-controloswa.custom-select
.form-checks
.custom-checkboxs ak .custom-radios
.custom-file

Textarea

Tanpri antre yon mesaj nan zòn tèks la.

Tcheke kaz sa a koutim

Egzanp tèks fidbak ki pa valab

Aktive radyo koutim sa a

Oswa aktive lòt radyo koutim sa a

Plis egzanp tèks fidbak ki pa valab

Egzanp envalid seleksyon koutim fidbak

Chwazi fichye...

Egzanp envalid dosye koutim fidbak

Egzanp opinyon gwoup opinyon pa valab

Opsyon

Egzanp opinyon gwoup opinyon pa valab

Chwazi fichye...

Egzanp opinyon gwoup opinyon pa valab

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

Konsèy zouti

Si fòm fòm ou a pèmèt li, ou ka chanje .{valid|invalid}-feedbackklas yo pou .{valid|invalid}-tooltipklas yo pou montre fidbak validation nan yon konsèy sou fason. Asire ou ke ou gen yon paran ak position: relativesou li pou pwezante konsèy. Nan egzanp ki anba a, klas kolòn nou yo gen sa a deja, men pwojè ou a ka mande pou yon konfigirasyon altènatif.

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

Pèrsonalizasyon

Eta Validasyon yo ka Customized atravè Sass ak $form-validation-stateskat la. Sitiye nan _variables.scssdosye nou an, kat Sass sa a se boukle pou jenere eta default valid/ invalidvalidation yo. Gen yon kat jeyografik anbrike pou pèrsonalize koulè ak icon chak eta. Pandan ke pa gen okenn lòt eta yo sipòte pa navigatè, moun ki itilize estil koutim ka fasilman ajoute fidbak fòm pi konplèks.

Tanpri sonje ke nou pa rekòmande personnalisation valè sa yo san tou modifye form-validation-statemixin la.

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

Validasyon gwoup antre

Pou detekte ki eleman ki bezwen kwen awondi andedan yon gwoup opinyon ak validation, yon gwoup opinyon mande pou yon .has-validationklas adisyonèl.

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

Tanpri chwazi yon non itilizatè.

Fòm koutim

Pou plis personnalisation ak konsistans navigatè kwaze, sèvi ak eleman fòm konplètman koutim nou yo pou ranplase default navigatè yo. Yo bati sou tèt maketing semantik ak aksesib, kidonk yo ap ranplasman solid pou nenpòt kontwòl fòm default.

Case ak radyo

Chak kaz ak radyo <input>ak <label>appariement vlope nan yon <div>pou kreye kontwòl koutim nou an. Estriktirèl, sa a se menm apwòch ak default nou an .form-check.

Nou itilize seleksyon frè ak sè ( ~) pou tout eta nou <input>yo—tankou :checked—pou byen style endikatè fòm koutim nou an. Lè yo konbine avèk .custom-control-labelklas la, nou kapab tou style tèks la pou chak atik ki baze sou <input>eta a.

Nou kache default la <input>ak opacityepi itilize .custom-control-labelpou konstwi yon nouvo endikatè fòm koutim nan plas li ak ::beforeak ::after. Malerezman nou pa ka bati yon koutim yon sèl soti nan jis <input>paske CSS a contentpa travay sou eleman sa a.

Nan eta yo tcheke, nou itilize ikon base64 entegre SVG soti nan Open Iconic . Sa a bay nou pi bon kontwòl pou manier ak pwezante atravè navigatè ak aparèy.

Bwat chèk

Tcheke kaz sa a koutim

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

Bwat chèk koutim yo ka itilize :indeterminatepseudo klas la tou lè yo mete manyèlman atravè JavaScript (pa gen okenn atribi HTML ki disponib pou espesifye li).

Tcheke kaz sa a koutim

Si w ap itilize jQuery, yon bagay tankou sa a ta dwe sifi:

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

Radyo

Aktive radyo koutim sa a

Oswa aktive lòt radyo koutim sa a

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

Nan liy

Aktive radyo koutim sa a

Oswa aktive lòt radyo koutim sa a

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

Andikape

Bwat ak radyo koutim yo kapab tou enfim. Ajoute disabledatribi boolean nan <input>ak endikatè a koutim ak deskripsyon etikèt yo pral otomatikman style.

Tcheke kaz sa a koutim

Aktive radyo koutim sa a

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

Chanjman

Yon switch gen maketing yon kaz koutim men li sèvi ak .custom-switchklas la pou rann yon switch baskile. Bouton tou sipòte disabledatribi a.

Aktive eleman switch sa a

Eleman switch andikape

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

<select>Meni koutim bezwen sèlman yon klas koutim, .custom-selectpou deklanche estil koutim yo. Styles koutim yo limite <select>a aparans inisyal la epi yo pa ka modifye <option>yo akòz limit navigatè a.

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

Ou ka chwazi tou nan ti ak gwo seleksyon koutim pou matche ak antre tèks menm gwosè nou yo.

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

Se multipleatribi a sipòte tou:

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

Kòm se sizeatribi a:

<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

<input type="range">Kreye kontwòl koutim ak .custom-range. Tras la (aryè plan) ak gwo pous (valè a) yo tou de style yo parèt menm jan an atravè navigatè yo. Kòm sèlman IE ak Firefox sipòte "ranpli" tras yo soti nan goch la oswa dwa nan gwo pous la kòm yon mwayen pou endike pwogrè vizyèlman, nou pa sipòte li kounye a.

Egzanp seri

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

Antre ranje gen valè implicite pou minak max— 0ak 100, respektivman. Ou ka presize nouvo valè pou moun ki sèvi minak maxatribi yo ak.

Egzanp seri

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

Pa default, ranje antre "menen" nan valè nonb antye relatif. Pou chanje sa a, ou ka presize yon stepvalè. Nan egzanp ki anba a, nou double kantite etap lè nou itilize step="0.5".

Egzanp seri

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

File navigatè

Plugin a rekòmande pou anime opinyon dosye koutim: bs-custom-file-input , se sa n ap itilize kounye a isit la nan dokiman nou yo.

Fichye a antre se pi gnarly nan pakèt la epi li mande JavaScript adisyonèl si ou ta renmen branche yo ak fonksyonèl Chwazi fichye ... ak chwazi tèks non dosye.

Chwazi dosye

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

Nou kache fichye default la <input>atravè opacityepi olye de style la <label>. Se bouton an pwodwi ak pozisyone ak ::after. Anfen, nou deklare yon widthak heightsou la <input>pou espas apwopriye pou kontni ki antoure.

Tradiksyon oswa personnalisation fisèl yo ak SCSS

Yo itilize :lang()pseudo-klas la pou pèmèt tradiksyon tèks "Browse" nan lòt lang. Ranplase oswa ajoute antre nan $custom-file-textvaryab Sass la ak tag langaj ki enpòtan ak kòd lokalize. Fisèl angle yo ka Customized menm jan an. Pou egzanp, men ki jan yon moun ta ka ajoute yon tradiksyon Panyòl (kòd lang Panyòl la se es):

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

Men an lang(es)aksyon sou antre nan dosye koutim pou yon tradiksyon Panyòl:

Chwazi dosye

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

Ou pral bezwen fikse lang dokiman ou a (oswa sous-arbre ladan l) kòrèkteman pou yo ka montre tèks ki kòrèk la. Sa a ka fè lè l sèvi avèk atribi langki sou <html>eleman an oswa Content-Languageheader HTTP , pami lòt metòd.

Tradiksyon oswa personnalisation fisèl yo ak HTML

Bootstrap bay tou yon fason pou tradui tèks "Browse" an HTML ak data-browseatribi ki ka ajoute sou etikèt opinyon koutim lan (egzanp nan Olandè):

Voeg je dokiman zòtèy

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

Fòm

Apèsi sou lekòl la

Kontwòl fòm

Dimansyon

Li sèlman

Tèks senp lekti sèlman

Ranje Antre

Case ak radyo

Default (anpille)

Nan liy

San etikèt

Layout

Fòme gwoup yo

Fòm griyaj

Fòm ranje

Fòm orizontal

Orizontal fòm etikèt gwosè

Dimansyon kolòn

Oto-gwosè

Fòm Inline

Altènatif pou etikèt kache yo

Ede tèks

Asosye tèks èd ak kontwòl fòm

Fòm andikape

Opozisyon ak lankr

Konpatibilite kwa-navigatè

Validasyon

Ki jan li fonksyone

Styles koutim

Defo navigatè a

Bò sèvè

Eleman sipòte

Konsèy zouti

Pèrsonalizasyon

Validasyon gwoup antre

Fòm koutim

Case ak radyo

Bwat chèk

Radyo

Nan liy

Andikape

Chanjman

Chwazi meni an

Range

File navigatè

Tradiksyon oswa personnalisation fisèl yo ak SCSS

Tradiksyon oswa personnalisation fisèl yo ak HTML