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 type
priodoledd priodol ar bob mewnbwn (ee, email
ar gyfer cyfeiriad e-bost neu number
ar 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.
<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-control
dosbarth. 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-control
am .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-lg
a .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 readonly
priodoledd 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-plaintext
dosbarth 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 disabled
priodoledd 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 id
a for
phriodoleddau 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-inline
at 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-static
at fewnbynnau .form-check
nad oes ganddynt unrhyw destun label. Cofiwch barhau i ddarparu rhyw fath o enw hygyrch 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: block
ac 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-group
dosbarth 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-inline
angen. 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 .row
am .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 .row
dosbarth 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-label
at 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-top
ar ein label mewnbynnau radio pentyrru i alinio'r llinell sylfaen testun yn well.
<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>
Maint label ffurf llorweddol
Byddwch yn siwr i ddefnyddio .col-form-label-sm
neu .col-form-label-lg
at eich <label>
s neu <legend>
au i ddilyn yn gywir maint .form-control-lg
a .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 .col
s o fewn a .row
neu .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 .col
s 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 .col
iddo .col-auto
fel 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-inline
dosbarth 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: auto
i ddiystyru'r rhagosodiad Bootstrapwidth: 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-only
dosbarth. Mae yna ddulliau amgen pellach o ddarparu label ar gyfer technolegau cynorthwyol, megis y aria-label
, aria-labelledby
neu title
briodoledd. Os nad oes un o'r rhain yn bresennol, gall technolegau cynorthwyol droi at ddefnyddio'r placeholder
nodwedd, os yw'n bresennol, ond sylwer placeholder
na 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-block
yn 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-describedby
priodoledd. 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: block
ac yn ychwanegu rhywfaint o ymyl uchaf i'w wahanu'n hawdd o'r mewnbynnau uchod.
<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.
<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 disabled
priodoledd 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 disabled
priodoledd i a <fieldset>
i analluogi'r holl reolaethau o fewn.
<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>
Cafeat ag angorau
Mae 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 elfennau tebyg i fotwm wedi'u teilwra fel <a ... class="btn btn-*">
, dim ond arddull 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. Bydd y rheolaethau sy'n seiliedig ar angor hefyd yn dal i fod. ffocwsadwy a gweithredadwy gan ddefnyddio'r bysellfwrdd. Rhaid i chi addasu'r rheolyddion hyn â llaw trwy ychwanegu tabindex="-1"
i'w hatal rhag derbyn ffocws ac aria-disabled="disabled"
i ddangos eu cyflwr i dechnolegau cynorthwyol.
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 disabled
priodoledd 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.
Sut mae'n gweithio
Dyma sut mae dilysu ffurflenni yn gweithio gyda Bootstrap:
- Cymhwysir dilysiad ffurflen HTML trwy ddau ffug-ddosbarth CSS,
:invalid
a:valid
. Mae'n berthnasol i<input>
,<select>
, ac<textarea>
elfennau. - Mae Bootstrap yn cwmpasu
:invalid
ac:valid
arddulliau 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-validated
dosbarth o'r<form>
eto ar ôl ei chyflwyno. - Fel wrth gefn,
.is-invalid
a.is-valid
gellir defnyddio dosbarthiadau yn lle'r ffug-ddosbarthiadau ar gyfer dilysu ochr y gweinydd . Nid oes angen.was-validated
dosbarth 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
setCustomValidity
yn 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 novalidate
priodoledd 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 :invalid
a'r :valid
arddulliau 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
.
<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>
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-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>
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-invalid
a .is-valid
. Sylwch fod .invalid-feedback
y dosbarthiadau hyn hefyd yn cael eu cefnogi.
Ar gyfer meysydd annilys, sicrhewch fod y neges adborth/gwall annilys yn gysylltiedig â maes y ffurflen berthnasol gan ddefnyddio aria-describedby
. Mae'r nodwedd hon yn caniatáu cyfeirio at fwy nag un id
, rhag ofn bod y maes eisoes yn pwyntio at destun ffurf ychwanegol.
<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>
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
<select>
s gyda.form-control
neu.custom-select
.form-check
s.custom-checkbox
s ac.custom-radio
s.custom-file
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="custom-select" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
Cynghorion offer
Os yw cynllun eich ffurflen yn caniatáu hynny, gallwch gyfnewid y .{valid|invalid}-feedback
dosbarthiadau am .{valid|invalid}-tooltip
ddosbarthiadau i ddangos adborth dilysu mewn cyngor ag arddull. Gwnewch yn siŵr bod gennych riant position: relative
arno 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.
<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>
Addasu
Gellir addasu cyflyrau dilysu trwy Sass gyda'r $form-validation-states
map. Wedi'i leoli yn ein _variables.scss
ffeil, mae'r map Sass hwn wedi'i ddolennu drosodd i gynhyrchu'r cyflyrau rhagosodedig valid
/ invalid
dilysu. 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-state
mixin.
// 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));
}
Dilysiad grŵp mewnbwn
Er mwyn canfod pa elfennau sydd angen corneli crwn y tu mewn i grŵp mewnbwn gyda dilysiad, mae angen .has-validation
dosbarth ychwanegol ar grŵp mewnbwn.
<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>
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 :checked
arddullio ein dangosydd ffurf arfer yn gywir. O'i gyfuno â'r .custom-control-label
dosbarth, gallwn hefyd arddullio'r testun ar gyfer pob eitem yn seiliedig ar y <input>
cyflwr.
Rydym yn cuddio'r rhagosodiad <input>
gyda'r opacity
ac yn defnyddio'r .custom-control-label
i adeiladu dangosydd ffurflen arferol newydd yn ei le gyda ::before
a ::after
. Yn anffodus ni allwn adeiladu un wedi'i deilwra o'r un yn unig <input>
oherwydd nid yw CSS's content
yn 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 :indeterminate
dosbarth 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="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>
Anabl
Gall blychau ticio personol a radios fod yn anabl hefyd. Ychwanegwch y disabled
priodoledd 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-switch
dosbarth i wneud switsh togl. Mae switshis hefyd yn cefnogi'r disabled
priodoledd.
<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-select
sbarduno'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 multiple
nodwedd 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 size
nodwedd:
<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 — min
a , yn y drefn honno. Gallwch nodi gwerthoedd newydd ar gyfer y rhai sy'n defnyddio'r a phriodoleddau.max
0
100
min
max
<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 step
gwerth. 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
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>
Rydyn ni'n cuddio'r ffeil rhagosodedig <input>
trwy opacity
ac yn lle hynny'n steilio'r <label>
. Mae'r botwm yn cael ei gynhyrchu a'i leoli gyda ::after
. Yn olaf, rydym yn datgan width
ac height
ar 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"
);
Dyma ar lang(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 yr elfenlang
<html>
neu'r Content-Language
pennawd 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-browse
priodoledd 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>