Source

Ffurflenni

Enghreifftiau a chanllawiau defnyddio ar gyfer arddulliau rheoli ffurflenni, opsiynau cynllun, a chydrannau arfer ar gyfer creu amrywiaeth eang o ffurfiau.

Trosolwg

Mae rheolyddion ffurflenni Bootstrap yn ehangu ar ein harddulliau ffurflen wedi'u hailgychwyn gyda dosbarthiadau. Defnyddiwch y dosbarthiadau hyn i optio i mewn i'w harddangosfeydd wedi'u teilwra i gael rendro mwy cyson ar draws porwyr a dyfeisiau.

Gwnewch yn siŵr eich bod yn defnyddio typepriodoledd priodol ar bob mewnbwn (ee, emailar gyfer cyfeiriad e-bost neu numberar gyfer gwybodaeth rifiadol) i fanteisio ar reolaethau mewnbwn mwy newydd fel dilysu e-bost, dewis rhif, a mwy.

Dyma enghraifft gyflym i ddangos arddulliau ffurf Bootstrap. Parhewch i ddarllen am ddogfennaeth ar ddosbarthiadau gofynnol, cynllun y ffurflen, a mwy.

Ni fyddwn byth yn rhannu eich e-bost ag unrhyw un arall. 
<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>

Rheolaethau ffurf

Mae rheolyddion ffurf destunol - fel <input>s, <select>s, ac <textarea>s - wedi'u steilio gyda'r .form-controldosbarth. Yn gynwysedig mae arddulliau ar gyfer ymddangosiad cyffredinol, cyflwr ffocws, maint, a mwy.

Byddwch yn siwr i archwilio ein ffurflenni arferiad i ymhellach arddull <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>

Ar gyfer mewnbynnau ffeil, cyfnewidiwch .form-controlam .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>

Maintioli

Gosodwch uchder gan ddefnyddio dosbarthiadau fel .form-control-lga .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>

Darllen yn unig

Ychwanegwch y readonlypriodoledd boolean ar fewnbwn i atal newid gwerth y mewnbwn. Mae mewnbynnau darllen yn unig yn ymddangos yn ysgafnach (yn union fel mewnbynnau anabl), ond yn cadw'r cyrchwr safonol.

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

Testun plaen darllen yn unig

Os ydych chi am gael <input readonly>elfennau yn eich ffurflen wedi'u steilio fel testun plaen, defnyddiwch y .form-control-plaintextdosbarth i dynnu'r arddull maes ffurf ddiofyn a chadw'r ymyl a'r padin cywir.

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

Ystod Mewnbynnau

Gosod mewnbynnau amrediad y gellir eu sgrolio'n llorweddol gan ddefnyddio .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>

Blychau siec a radios

Mae blychau ticio a radios rhagosodedig yn cael eu gwella gyda chymorth .form-check, dosbarth unigol ar gyfer y ddau fath mewnbwn sy'n gwella gosodiad ac ymddygiad eu helfennau HTML . Mae blychau ticio ar gyfer dewis un neu sawl opsiwn mewn rhestr, tra bod setiau radio ar gyfer dewis un opsiwn o blith llawer.

Cefnogir blychau ticio a radios anabl. Bydd y disabledpriodoledd yn defnyddio lliw ysgafnach i helpu i nodi cyflwr y mewnbwn.

Mae blychau ticio a botymau radio yn cefnogi dilysu ffurflenni HTML ac yn darparu labeli cryno, hygyrch. Fel y cyfryw, mae ein <input>s ac <label>s yn elfennau brodyr a chwiorydd yn hytrach nag o <input>fewn <label>. Mae hyn ychydig yn fwy ar lafar gan fod yn rhaid i chi nodi ida forphriodoleddau i gysylltu'r <input>a <label>.

Rhagosodedig (wedi'i bentyrru)

Yn ddiofyn, bydd unrhyw nifer o flychau ticio a radios sy'n frawd neu chwaer uniongyrchol yn cael eu pentyrru'n fertigol a'u gosod mewn gofod priodol gyda .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Mewn llinell

Grwpiwch flychau ticio neu radios ar yr un rhes lorweddol trwy ychwanegu .form-check-inlineat unrhyw .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Heb labeli

Ychwanegu .position-staticat fewnbynnau .form-checknad oes ganddynt unrhyw destun label. Cofiwch barhau i ddarparu rhyw fath o label ar gyfer technolegau cynorthwyol (er enghraifft, defnyddio 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>

Gosodiad

Gan fod Bootstrap yn berthnasol display: blockac width: 100%i bron bob un o'n rheolyddion ffurflenni, bydd ffurflenni yn pentyrru'n fertigol yn ddiofyn. Gellir defnyddio dosbarthiadau ychwanegol i amrywio'r gosodiad hwn ar sail per-fformiad.

Ffurfiwch grwpiau

Y .form-groupdosbarth yw'r ffordd hawsaf o ychwanegu rhywfaint o strwythur at ffurflenni. Mae'n darparu dosbarth hyblyg sy'n annog grwpio cywir o labeli, rheolyddion, testun cymorth dewisol, a negeseuon dilysu ffurf. Yn ddiofyn dim ond yn berthnasol margin-bottom, ond mae'n codi arddulliau ychwanegol yn ôl yr .form-inlineangen. Defnyddiwch ef gydag <fieldset>s, <div>s, neu bron unrhyw elfen arall.

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

Ffurf grid

Gellir adeiladu ffurflenni mwy cymhleth gan ddefnyddio ein dosbarthiadau grid. Defnyddiwch y rhain ar gyfer cynlluniau ffurf sy'n gofyn am sawl colofn, lled amrywiol, ac opsiynau alinio ychwanegol.

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

Ffurf rhes

Gallwch hefyd gyfnewid .rowam .form-row, amrywiad o'n rhes grid safonol sy'n diystyru'r cwteri colofn rhagosodedig am gynlluniau tynnach a mwy cryno.

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

Gellir creu cynlluniau mwy cymhleth hefyd gyda'r system grid.

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

Ffurf llorweddol

Creu ffurfiau llorweddol gyda'r grid trwy ychwanegu'r .rowdosbarth i ffurfio grwpiau a defnyddio'r .col-*-*dosbarthiadau i nodi lled eich labeli a'ch rheolyddion. Gwnewch yn siŵr eich bod yn ychwanegu .col-form-labelat eich <label>s hefyd fel eu bod wedi'u canoli'n fertigol gyda'u rheolyddion ffurf cysylltiedig.

Ar adegau, efallai y bydd angen i chi ddefnyddio cyfleustodau ymyl neu padin i greu'r aliniad perffaith hwnnw sydd ei angen arnoch chi. Er enghraifft, rydym wedi dileu'r padding-topar ein label mewnbynnau radio pentyrru i alinio'r llinell sylfaen testun yn well.

Radios
Blwch ticio 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Maint label ffurf llorweddol

Byddwch yn siwr i ddefnyddio .col-form-label-smneu .col-form-label-lgat eich <label>s neu <legend>au i ddilyn yn gywir maint .form-control-lga .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>

Maint colofn

Fel y dangoswyd yn yr enghreifftiau blaenorol, mae ein system grid yn caniatáu ichi osod unrhyw nifer o .cols o fewn a .rowneu .form-row. Byddant yn rhannu'r lled sydd ar gael yn gyfartal rhyngddynt. Gallwch hefyd ddewis is-set o'ch colofnau i gymryd mwy neu lai o le, tra bod y .cols sy'n weddill yn rhannu'r gweddill yn gyfartal, gyda dosbarthiadau colofn penodol fel .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Auto-sizing

Mae'r enghraifft isod yn defnyddio cyfleustodau flexbox i ganoli'r cynnwys yn fertigol a newidiadau .coliddo .col-autofel bod eich colofnau ond yn cymryd cymaint o le ag sydd ei angen. Mewn ffordd arall, mae maint y golofn ei hun yn seiliedig ar y cynnwys.

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

Yna gallwch chi ailgymysgu hynny unwaith eto gyda dosbarthiadau colofn maint-benodol.

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

Ac wrth gwrs , cefnogir rheolaethau ffurflen arferol .

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

Ffurflenni mewnol

Defnyddiwch y .form-inlinedosbarth i arddangos cyfres o labeli, rheolyddion ffurf, a botymau ar un rhes lorweddol. Mae rheolaethau ffurf o fewn ffurflenni mewnol yn amrywio ychydig o'u cyflyrau rhagosodedig.

  • Rheolyddion yw display: flex, dymchwel unrhyw ofod gwyn HTML a'ch galluogi i ddarparu rheolaeth aliniad gyda bylchau a chyfleustodau flexbox .
  • Mae rheolyddion a grwpiau mewnbwn yn derbyn width: autoi ddiystyru'r rhagosodiad Bootstrap width: 100%.
  • Dim ond mewn pyrth gwylio sydd o leiaf 576px o led y mae rheolyddion yn ymddangos mewn llinell i gyfrif am olygfannau cul ar ddyfeisiau symudol.

Mae'n bosibl y bydd angen i chi fynd i'r afael â lled ac aliniad rheolyddion ffurflenni unigol â chyfleustodau bylchu (fel y dangosir isod). Yn olaf, gwnewch yn siŵr eich bod bob amser yn cynnwys rheolydd <label>gyda phob ffurflen, hyd yn oed os oes angen i chi ei guddio rhag ymwelwyr nad ydynt yn darllen sgrin gyda .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>

Mae rheolaethau a dewisiadau ffurf personol hefyd yn cael eu cefnogi.

<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>
Dewisiadau eraill yn lle labeli cudd

Bydd technolegau cynorthwyol megis darllenwyr sgrin yn cael trafferth gyda'ch ffurflenni os na fyddwch yn cynnwys label ar gyfer pob mewnbwn. Ar gyfer y ffurflenni mewnol hyn, gallwch guddio'r labeli gan ddefnyddio'r .sr-onlydosbarth. Mae yna ddulliau amgen pellach o ddarparu label ar gyfer technolegau cynorthwyol, megis y aria-label, aria-labelledbyneu titlebriodoledd. Os nad oes un o'r rhain yn bresennol, gall technolegau cynorthwyol droi at ddefnyddio'r placeholdernodwedd, os yw'n bresennol, ond sylwer placeholderna chynghorir defnyddio yn lle dulliau labelu eraill.

Testun cymorth

Gellir creu testun cymorth lefel bloc mewn ffurflenni gan ddefnyddio .form-text(a elwid gynt .help-blockyn v3). Gellir gweithredu testun cymorth mewnol yn hyblyg gan ddefnyddio unrhyw elfen HTML mewnol a dosbarthiadau cyfleustodau fel .text-muted.

Cysylltu testun cymorth â rheolyddion ffurflen

Dylai testun cymorth gael ei gysylltu'n benodol â'r rheolaeth ffurf y mae'n ymwneud â defnyddio'r aria-describedbypriodoledd. Bydd hyn yn sicrhau bod technolegau cynorthwyol - megis darllenwyr sgrin - yn cyhoeddi'r testun cymorth hwn pan fydd y defnyddiwr yn canolbwyntio neu'n mynd i mewn i'r rheolydd.

Gellir steilio testun cymorth o dan y mewnbynnau gyda .form-text. Mae'r dosbarth hwn yn cynnwys display: blockac yn ychwanegu rhywfaint o ymyl uchaf i'w wahanu'n hawdd o'r mewnbynnau uchod.

Rhaid i'ch cyfrinair fod yn 8-20 nod o hyd, yn cynnwys llythrennau a rhifau, ac ni ddylai gynnwys bylchau, nodau arbennig nac 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>

Gall testun mewnol ddefnyddio unrhyw elfen HTML mewnlin nodweddiadol (boed yn <small>, <span>, neu rywbeth arall) heb ddim mwy na dosbarth cyfleustodau.

Rhaid iddo fod yn 8-20 nod. 
<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>

Ffurflenni anabl

Ychwanegwch y disabledpriodoledd boolean ar fewnbwn i atal rhyngweithiadau defnyddwyr a gwneud iddo ymddangos yn ysgafnach.

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

Ychwanegwch y disabledpriodoledd i a <fieldset>i analluogi'r holl reolaethau o fewn.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Cafeat ag angorau

Yn ddiofyn, bydd porwyr yn trin pob rheolydd ffurf frodorol ( <input>, <select>ac <button>elfennau ) y tu mewn i a <fieldset disabled>yn anabl, gan atal rhyngweithiadau bysellfwrdd a llygoden arnynt. Fodd bynnag, os yw eich ffurflen hefyd yn cynnwys <a ... class="btn btn-*">elfennau, dim ond arddull o pointer-events: none. Fel y nodwyd yn yr adran am gyflwr anabl ar gyfer botymau (ac yn benodol yn yr is-adran ar gyfer elfennau angori), nid yw'r eiddo CSS hwn wedi'i safoni eto ac nid yw'n cael ei gefnogi'n llawn yn Internet Explorer 10, ac ni fydd yn atal defnyddwyr bysellfwrdd rhag bod gallu ffocysu neu actifadu'r dolenni hyn. Felly i fod yn ddiogel, defnyddiwch JavaScript wedi'i deilwra i analluogi dolenni o'r fath.

Cydweddoldeb traws-borwr

Er y bydd Bootstrap yn cymhwyso'r arddulliau hyn ym mhob porwr, nid yw Internet Explorer 11 ac isod yn cefnogi'r disabledpriodoledd ar <fieldset>. Defnyddiwch JavaScript wedi'i deilwra i analluogi'r set maes yn y porwyr hyn.

Dilysu

Rhowch adborth gwerthfawr y gellir ei weithredu i'ch defnyddwyr gyda dilysiad ffurflen HTML5 - ar gael yn ein holl borwyr a gefnogir . Dewiswch o adborth dilysu rhagosodedig y porwr, neu gweithredwch negeseuon wedi'u teilwra gyda'n dosbarthiadau adeiledig a JavaScript cychwynnol.

Ar hyn o bryd rydym yn argymell defnyddio arddulliau dilysu wedi'u teilwra, gan nad yw negeseuon dilysu rhagosodedig porwr brodorol yn cael eu hamlygu'n gyson i dechnolegau cynorthwyol ym mhob porwr (yn fwyaf nodedig, Chrome ar bwrdd gwaith a symudol).

Sut mae'n gweithio

Dyma sut mae dilysu ffurflenni yn gweithio gyda Bootstrap:

  • Cymhwysir dilysiad ffurflen HTML trwy ddau ffug-ddosbarth CSS, :invalida :valid. Mae'n berthnasol i <input>, <select>, ac <textarea>elfennau.
  • Mae Bootstrap yn cwmpasu :invalidac :validarddulliau i ddosbarth rhiant .was-validated, fel arfer yn berthnasol i'r <form>. Fel arall, mae unrhyw faes gofynnol heb werth yn ymddangos fel un annilys ar lwyth tudalen. Fel hyn, gallwch ddewis pryd i'w actifadu (yn nodweddiadol ar ôl ceisio cyflwyno ffurflen).
  • I ailosod ymddangosiad y ffurflen (er enghraifft, yn achos cyflwyniadau ffurflen deinamig gan ddefnyddio AJAX), tynnwch y .was-validateddosbarth o'r <form>eto ar ôl ei chyflwyno.
  • Fel wrth gefn, .is-invalida .is-validgellir defnyddio dosbarthiadau yn lle'r ffug-ddosbarthiadau ar gyfer dilysu ochr y gweinydd . Nid oes angen .was-validateddosbarth rhiant arnynt.
  • Oherwydd cyfyngiadau ar sut mae CSS yn gweithio, ni allwn (ar hyn o bryd) gymhwyso arddulliau i a <label>sy'n dod cyn rheolaeth ffurflen yn y DOM heb gymorth JavaScript arferol.
  • Mae pob porwr modern yn cefnogi'r API dilysu cyfyngiad , cyfres o ddulliau JavaScript ar gyfer dilysu rheolaethau ffurflen.
  • Gall negeseuon adborth ddefnyddio rhagosodiadau'r porwr (gwahanol ar gyfer pob porwr, ac anstyl trwy CSS) neu ein harddulliau adborth personol gyda HTML a CSS ychwanegol.
  • Gallwch ddarparu negeseuon dilysrwydd personol gyda setCustomValidityyn JavaScript.

Gyda hynny mewn golwg, ystyriwch y demos canlynol ar gyfer ein harddulliau dilysu ffurflenni arferol, dosbarthiadau ochr gweinydd dewisol, a rhagosodiadau porwr.

Arddulliau personol

Ar gyfer negeseuon dilysu ffurflen Bootstrap wedi'u teilwra, bydd angen i chi ychwanegu'r novalidatepriodoledd boolean at eich <form>. Mae hyn yn analluogi awgrymiadau cymorth adborth rhagosodedig y porwr, ond mae'n dal i ddarparu mynediad i'r APIs dilysu ffurflenni yn JavaScript. Ceisiwch gyflwyno'r ffurflen isod; bydd ein JavaScript yn rhyng-gipio'r botwm cyflwyno ac yn trosglwyddo adborth i chi. Wrth geisio cyflwyno, byddwch yn gweld yr arddulliau :invalida'r :validarddulliau a ddefnyddir i reolaethau eich ffurflen.

Mae arddulliau adborth personol yn cymhwyso lliwiau, ffiniau, arddulliau ffocws ac eiconau cefndir i gyfathrebu adborth yn well. Mae eiconau cefndir ar gyfer <select>s ond ar gael gyda .custom-select, ac nid .form-control.

Edrych yn dda!
Edrych yn dda!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Rhagosodiadau porwr

Dim diddordeb mewn negeseuon adborth dilysu personol neu ysgrifennu JavaScript i newid ymddygiadau ffurf? Da iawn, gallwch ddefnyddio rhagosodiadau'r porwr. Ceisiwch gyflwyno'r ffurflen isod. Yn dibynnu ar eich porwr ac OS, fe welwch arddull adborth ychydig yn wahanol.

Er na ellir steilio'r arddulliau adborth hyn gyda CSS, gallwch barhau i addasu'r testun adborth trwy JavaScript.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Ochr y gweinydd

Rydym yn argymell defnyddio dilysiad ochr y cleient, ond rhag ofn y bydd angen dilysu ochr y gweinydd arnoch, gallwch nodi meysydd ffurflen annilys a dilys gydag .is-invalida .is-valid. Sylwch fod .invalid-feedbacky dosbarthiadau hyn hefyd yn cael eu cefnogi.

Edrych yn dda!
Edrych yn dda!
@
Dewiswch enw defnyddiwr.
Rhowch ddinas ddilys.
Dewiswch gyflwr dilys.
Rhowch sip dilys.
Rhaid i chi gytuno cyn cyflwyno. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Elfennau a gefnogir

Mae arddulliau dilysu ar gael ar gyfer y rheolyddion ffurflen a'r cydrannau canlynol:

  • <input>s ac <textarea>s gyda .form-control(gan gynnwys hyd at un .form-controlmewn grwpiau mewnbwn)
  • <select>s gyda .form-controlneu.custom-select
  • .form-checks
  • .custom-checkboxs ac .custom-radios
  • .custom-file
Rhowch neges yn yr ardal testun.
Enghraifft o destun adborth annilys
Mwy o enghraifft o destun adborth annilys
Enghraifft adborth dethol annilys
Enghraifft o adborth ffeil personol annilys 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Cynghorion offer

Os yw cynllun eich ffurflen yn caniatáu hynny, gallwch gyfnewid y .{valid|invalid}-feedbackdosbarthiadau am .{valid|invalid}-tooltipddosbarthiadau i ddangos adborth dilysu mewn cyngor ag arddull. Gwnewch yn siŵr bod gennych riant position: relativearno ar gyfer lleoli awgrymiadau cymorth. Yn yr enghraifft isod, mae gan ein dosbarthiadau colofn hwn eisoes, ond efallai y bydd angen gosodiad arall ar eich prosiect.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Addasu

Gellir addasu cyflyrau dilysu trwy Sass gyda'r $form-validation-statesmap. Wedi'i leoli yn ein _variables.scssffeil, mae'r map Sass hwn wedi'i ddolennu drosodd i gynhyrchu'r cyflyrau rhagosodedig valid/ invaliddilysu. Yn gynwysedig mae map nythu ar gyfer addasu lliw ac eicon pob talaith. Er nad oes unrhyw wladwriaethau eraill yn cael eu cefnogi gan borwyr, gall y rhai sy'n defnyddio arddulliau arferol ychwanegu adborth ffurf mwy cymhleth yn hawdd.

Sylwch nad ydym yn argymell addasu'r gwerthoedd hyn heb hefyd addasu'r form-validation-statemixin.

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

Ffurflenni personol

I gael hyd yn oed mwy o gysondeb o ran addasu a thrawsborwyr, defnyddiwch ein helfennau ffurflen gwbl arferol i ddisodli rhagosodiadau'r porwr. Maent wedi'u hadeiladu ar ben marcio semantig a hygyrch, felly maent yn amnewidiadau cadarn ar gyfer unrhyw reolaeth ddiofyn ar ffurf.

Blychau siec a radios

Mae pob blwch ticio a radio <input>a <label>pharu wedi'u lapio mewn a <div>i greu ein rheolaeth arferol. Yn strwythurol, dyma'r un dull â'n dull rhagosodedig .form-check.

Rydyn ni'n defnyddio'r dewisydd brodyr a chwiorydd ( ~) ar gyfer ein holl <input>daleithiau - fel - i :checkedarddullio ein dangosydd ffurf arfer yn gywir. O'i gyfuno â'r .custom-control-labeldosbarth, gallwn hefyd arddullio'r testun ar gyfer pob eitem yn seiliedig ar y <input>cyflwr.

Rydym yn cuddio'r rhagosodiad <input>gyda'r opacityac yn defnyddio'r .custom-control-labeli adeiladu dangosydd ffurflen arferol newydd yn ei le gyda ::beforea ::after. Yn anffodus ni allwn adeiladu un wedi'i deilwra o'r un yn unig <input>oherwydd nid yw CSS's contentyn gweithio ar yr elfen honno.

Yn y taleithiau wedi'u gwirio, rydym yn defnyddio eiconau SVG wedi'u mewnosod base64 o Open Iconic . Mae hyn yn rhoi'r rheolaeth orau i ni ar gyfer steilio a lleoli ar draws porwyr a dyfeisiau.

Blychau ticio

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

Gall blychau ticio personol hefyd ddefnyddio'r :indeterminatedosbarth ffug pan gânt eu gosod â llaw trwy JavaScript (nid oes priodoledd HTML ar gael i'w nodi).

Os ydych chi'n defnyddio jQuery, dylai rhywbeth fel hyn fod yn ddigon:

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

Radios

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

Mewn llinell

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Anabl

Gall blychau ticio personol a radios fod yn anabl hefyd. Ychwanegwch y disabledpriodoledd boolean i'r <input>a bydd y dangosydd arferiad a disgrifiad label yn cael eu steilio'n awtomatig.

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

Switsys

Mae gan switsh farcio blwch ticio personol ond mae'n defnyddio'r .custom-switchdosbarth i wneud switsh togl. Mae switshis hefyd yn cefnogi'r disabledpriodoledd.

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

Dewiswch ddewislen

<select>Dim ond dosbarth wedi'i deilwra sydd ei angen ar fwydlenni personol, i .custom-selectsbarduno'r arddulliau arferol. Mae arddulliau personol wedi'u cyfyngu i <select>ymddangosiad cychwynnol yr s ac ni allant addasu'r <option>s oherwydd cyfyngiadau porwr.

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

Gallwch hefyd ddewis o ddetholiadau bach a mawr wedi'u teilwra i gyd-fynd â'n mewnbynnau testun o faint tebyg.

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

Cefnogir y multiplenodwedd hefyd:

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

Fel y mae'r sizenodwedd:

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

Amrediad

Creu rheolyddion personol <input type="range">gyda .custom-range. Mae'r trac (y cefndir) a'r bawd (y gwerth) ill dau wedi'u steilio i ymddangos yr un fath ar draws porwyr. Gan mai dim ond IE a Firefox sy'n cefnogi “llenwi” eu trac o'r chwith neu'r dde o'r bawd fel modd i ddangos cynnydd yn weledol, nid ydym yn ei gefnogi ar hyn o bryd.

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

Mae gan fewnbynnau amrediad werthoedd ymhlyg ar gyfer — mina , yn y drefn honno. Gallwch nodi gwerthoedd newydd ar gyfer y rhai sy'n defnyddio'r a phriodoleddau.max0100minmax

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

Yn ddiofyn, mae amrediad yn mewnbynnu “snap” i werthoedd cyfanrif. I newid hyn, gallwch chi nodi stepgwerth. Yn yr enghraifft isod, rydym yn dyblu nifer y camau trwy ddefnyddio step="0.5".

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

Porwr ffeil

Yr ategyn a argymhellir i animeiddio mewnbwn ffeil wedi'i deilwra: bs-custom-file-input , dyna rydyn ni'n ei ddefnyddio ar hyn o bryd yma yn ein dogfennau.

Y mewnbwn ffeil yw'r mwyaf gnarly o'r criw ac mae angen JavaScript ychwanegol os hoffech chi eu cysylltu â swyddogaeth Dewiswch ffeil ... a thestun enw ffeil dethol.

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

Rydym yn cuddio'r ffeil rhagosodedig <input>trwy opacityac yn lle hynny yn arddull y<label> . Mae'r botwm yn cael ei gynhyrchu a'i leoli gyda ::after. Yn olaf, rydym yn datgan widthac heightar y <input>gofod priodol ar gyfer cynnwys amgylchynol.

Cyfieithu neu addasu'r llinynnau gyda SCSS

Defnyddir y :lang()ffug-ddosbarth i ganiatáu cyfieithu’r testun “Pori” i ieithoedd eraill. Diystyru neu ychwanegu cofnodion at y$custom-file-text newidyn Sass gyda'r tag iaith perthnasol a llinynnau lleol. Gellir addasu'r llinynnau Saesneg yr un ffordd. Er enghraifft, dyma sut y gallai rhywun ychwanegu cyfieithiad Sbaeneg (cod iaith Sbaeneg yw es):

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

Dymalang(es) waith ar y mewnbwn ffeil wedi'i deilwra ar gyfer cyfieithiad Sbaeneg:

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

Bydd angen i chi osod iaith eich dogfen (neu is-goeden ohoni) yn gywir er mwyn i'r testun cywir gael ei ddangos. Gellir gwneud hyn gan ddefnyddio'r priodoledd ar ylang<html> neu'r Content-Languagepennawd HTTP , ymhlith dulliau eraill.

Cyfieithu neu addasu'r llinynnau gyda HTML

Mae Bootstrap hefyd yn darparu ffordd i gyfieithu'r testun “Pori” yn HTML gyda'r data-browsepriodoledd y gellir ei ychwanegu at y label mewnbwn personol (enghraifft yn Iseldireg):

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