Foirmeacha
Samplaí agus treoirlínte úsáide le haghaidh stíleanna rialaithe foirmeacha, roghanna leagan amach, agus comhpháirteanna saincheaptha chun raon leathan foirmeacha a chruthú.
Forbhreathnú
Leathnaíonn rialuithe foirmeacha Bootstrap ar ár stíleanna foirmeacha Atosaithe le ranganna. Bain úsáid as na ranganna seo chun tarraingt isteach ina dtaispeántais shaincheaptha le haghaidh rindreála níos comhsheasmhaí thar brabhsálaithe agus gléasanna.
Bí cinnte go n-úsáideann tú type
tréith chuí ar gach ionchur (m.sh., email
le haghaidh seoladh ríomhphoist nó number
le haghaidh faisnéise uimhriúla) chun leas a bhaint as rialuithe ionchuir níos nuaí amhail fíorú ríomhphoist, roghnú uimhreacha, agus go leor eile.
Seo sampla tapa chun stíleanna foirmeacha Bootstrap a léiriú. Lean ort ag léamh le haghaidh doiciméadú ar na ranganna riachtanacha, leagan amach na bhfoirmeacha, agus go leor eile.
<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>
Rialuithe foirm
Stílítear rialuithe foirme téacs—cosúil le <input>
s, <select>
s, agus <textarea>
s leis an .form-control
rang. San áireamh tá stíleanna le haghaidh cuma ginearálta, staid fócais, méid, agus níos mó.
Bí cinnte iniúchadh a dhéanamh ar ár bhfoirmeacha saincheaptha chun tuilleadh stíl <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>
Le haghaidh ionchuir comhad, babhtáil an .form-control
le haghaidh .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>
Sizing
Socraigh airde ag baint úsáide as ranganna mar .form-control-lg
agus .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>
Léamh amháin
Cuir an readonly
aitreabúid Boole ar ionchur chun mionathrú ar luach an ionchuir a chosc. Tá cuma níos éadroime ar ionchuir inléite amháin (cosúil le hionchuir faoi mhíchumas), ach coinníonn siad an cúrsóir caighdeánach.
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Téacs simplí inléite amháin
Más mian leat <input readonly>
eilimintí i d’fhoirm a bheith stílithe mar ghnáth-théacs, bain úsáid as an .form-control-plaintext
rang chun stíliú réimse na foirme réamhshocraithe a bhaint agus coinnigh an corrlach agus an stuáil cheart.
<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>
Ionchuir Raon
Socraigh ionchuir raon inscrollaithe cothrománach ag baint úsáide as .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>
Seiceálacha agus raidiónna
Feabhsaítear ticbhoscaí réamhshocraithe agus raidiónna le cabhair ó .form-check
, rang amháin don dá chineál ionchuir a fheabhsaíonn leagan amach agus iompar a n-eilimintí HTML . Tá ticbhoscaí ann chun rogha amháin nó roinnt roghanna a roghnú i liosta, agus tá raidiónna chun rogha amháin a roghnú as go leor.
Tacaítear le ticbhoscaí agus raidiónna do dhaoine faoi mhíchumas. Cuirfidh an disabled
tréith dath níos éadroime i bhfeidhm chun cabhrú le staid an ionchuir a léiriú.
Tacaíonn ticbhoscaí agus cnaipí raidió le bailíochtú foirmeacha HTML-bhunaithe agus soláthraíonn siad lipéid achomair inrochtana. Mar sin, is eilimintí deartháireacha iad ár gcuid <input>
agus ár gcuid <label>
deartháireacha seachas eilimintí <input>
laistigh de <label>
. Tá sé seo beagán níos briathar mar ní mór duit a shonrú id
agus for
tréithe a bhaineann leis an <input>
agus <label>
.
Réamhshocrú (cruachta)
De réir réamhshocraithe, déanfar aon líon ticbhoscaí agus raidiónna atá díreach ina ndeartháireacha a chruachadh go hingearach agus spásáil chuí a bheith acu le .form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
I líne
Grúpáil ticbhoscaí nó raidiónna ar an tsraith chothrománach chéanna trí chur .form-check-inline
le haon .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>
Gan lipéid
Cuir .position-static
leis na hionchuir laistigh .form-check
nach bhfuil aon téacs lipéad orthu. Ná déan dearmad ainm inrochtana de chineál éigin a sholáthar do theicneolaíochtaí cúnta (mar shampla, ag baint úsáide as 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>
Leagan Amach
Ós rud é go bhfuil feidhm ag Bootstrap display: block
agus maidir width: 100%
lenár rialuithe foirme go léir nach mór, cruachálfar foirmeacha go hingearach de réir réamhshocraithe. Is féidir ranganna breise a úsáid chun an leagan amach seo a athrú de réir foirme.
Foirm grúpaí
Is .form-group
é an rang an bealach is éasca chun struchtúr éigin a chur le foirmeacha. Soláthraíonn sé rang solúbtha a spreagann grúpáil cheart ar lipéid, rialuithe, téacs cabhrach roghnach, agus teachtaireachtaí bailíochtaithe foirmeacha. De réir réamhshocraithe ní bhaineann sé ach margin-bottom
, ach piocann sé stíleanna breise isteach .form-inline
de réir mar is gá. Úsáid é le <fieldset>
s, <div>
s, nó beagnach aon eilimint eile.
<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>
Foirm greille
Is féidir foirmeacha níos casta a thógáil ag baint úsáide as ár ranganna greille. Úsáid iad seo le haghaidh leagan amach foirmeacha a éilíonn colúin iolracha, leithid éagsúil, agus roghanna ailínithe breise.
<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>
Foirm as a chéile
Is féidir leat babhtáil freisin .row
le haghaidh .form-row
, athrú ar ár líne greille caighdeánach a sháraíonn gáitéir na gcolún réamhshocraithe le haghaidh leagan amach níos déine agus níos dlúithe.
<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>
Is féidir leagan amach níos casta a chruthú leis an gcóras greille freisin.
<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>
Foirm chothrománach
Cruthaigh foirmeacha cothrománacha leis an eangach tríd an .row
rang a chur le grúpaí foirme agus na .col-*-*
ranganna a úsáid chun leithead do lipéid agus do rialtáin a shonrú. Bí cinnte go gcuirfidh .col-form-label
tú le do <label>
chuid s freisin ionas go mbeidh siad dírithe go hingearach leis na rialuithe foirme a bhaineann leo.
Uaireanta, b'fhéidir go mbeadh ort úsáid a bhaint as fóntais corrlaigh nó stuála chun an ailíniú foirfe sin a theastaíonn uait a chruthú. Mar shampla, bhaineamar an padding-top
lipéad ar ár lipéad ionchuir raidió cruachta chun bunlíne an téacs a ailíniú níos fearr.
<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>
Méid lipéad foirme cothrománach
Bí cinnte a úsáid .col-form-label-sm
nó .col-form-label-lg
ar do chuid <label>
nó <legend>
s a leanúint i gceart méid .form-control-lg
agus .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>
Méid an cholúin
Mar a léiríodh sna samplaí roimhe seo, ligeann ár gcóras eangaí duit aon líon .col
s a chur laistigh de .row
nó .form-row
. Roinnfidh siad an leithead atá ar fáil go cothrom eatarthu. Is féidir leat fo-thacar de do cholúin a phiocadh freisin chun níos mó spáis nó níos lú a ghlacadh, agus na .col
s eile a roinnt go cothrom leis an gcuid eile, le haicmí colúin ar leith mar .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>
Uathmhéadú
Úsáideann an sampla thíos áirgiúlacht flexbox chun an t-ábhar a lárú go hingearach agus athraíonn .col
sé .col-auto
é ionas nach nglacfaidh do cholúin ach an oiread spáis agus is gá. Cuir ar bhealach eile, na méideanna colún féin bunaithe ar an ábhar.
<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>
Is féidir leat é sin a athmhúnlú arís le ranganna colúin a bhaineann go sonrach le méid.
<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>
Agus ar ndóigh tacaítear le rialuithe foirm saincheaptha .
<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>
Foirmeacha inlíne
Úsáid an .form-inline
rang chun sraith lipéad, rialuithe foirme, agus cnaipí a thaispeáint ar shraith chothrománach amháin. Athraíonn rialuithe foirm laistigh de fhoirmeacha inlíne beagán óna stáit réamhshocraithe.
- Tá rialuithe
display: flex
, ag titim aon spás bán HTML agus ag ligean duit a chur ar fáil rialú ailínithe le spásáil agus fóntais flexbox . - Faigheann rialtáin agus grúpaí ionchuir
width: auto
chun an réamhshocrú Bootstrap a shárúwidth: 100%
. - Ní bhíonn rialtáin le feiceáil ach inlíne i bpoirt amhairc atá ar leithead 576px ar a laghad chun cuntais chúngacha ar ghléasanna soghluaiste a áireamh.
Seans go mbeidh ort aghaidh a thabhairt de láimh ar leithead agus ar ailíniú na rialuithe foirme aonair le fóntais spásála (mar a thaispeántar thíos). Ar deireadh, bí cinnte go n-áiríonn tú <label>
rialú le gach foirm i gcónaí, fiú más gá duit é a cheilt ó chuairteoirí nach léitheoir scáileáin iad le .sr-only
.
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
Tacaítear freisin le rialuithe foirm saincheaptha agus le roghnúcháin.
<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>
Roghanna eile seachas lipéid fholaithe
Beidh deacrachtaí ag teicneolaíochtaí cúnta ar nós léitheoirí scáileáin le d’fhoirmeacha mura n-áiríonn tú lipéad le haghaidh gach ionchuir. Maidir leis na foirmeacha inlíne seo, is féidir leat na lipéid a cheilt ag baint úsáide as an .sr-only
rang. Tá tuilleadh modhanna malartacha ann chun lipéad a sholáthar do theicneolaíochtaí cúnta, amhail an aria-label
, aria-labelledby
nó an title
aitreabúid. Mura bhfuil aon cheann díobh seo i láthair, féadfaidh teicneolaíochtaí cúnta dul i muinín an placeholder
tréith a úsáid, más ann dóibh, ach tabhair faoi deara placeholder
nach moltar é a úsáid in ionad modhanna eile lipéadaithe.
Téacs cabhrach
Is féidir téacs cabhrach blocleibhéil i bhfoirmeacha a chruthú trí úsáid a bhaint as .form-text
(ar a dtugtaí .help-block
in v3 roimhe seo). Is féidir téacs cabhrach inlíne a chur i bhfeidhm go solúbtha ag baint úsáide as aon eilimint HTML inlíne agus ranganna fóntais mar .text-muted
.
Téacs cabhrach a nascadh le rialuithe foirmeacha
Ba cheart go mbeadh baint shoiléir ag téacs cabhrach leis an rialú foirme a bhaineann leis an aria-describedby
tréith a úsáid. Cinnteoidh sé seo go bhfógróidh teicneolaíochtaí cúnta - mar léitheoirí scáileáin - an téacs cabhrach seo nuair a dhíríonn an t-úsáideoir nó nuair a théann an t-úsáideoir isteach sa rialú.
Is féidir téacs cabhrach faoi bhun ionchuir a stíliú le .form-text
. Áiríonn an rang seo display: block
agus cuireann sé roinnt corrlach barr leis le haghaidh spásáil éasca ó na hionchuir thuas.
<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>
Is féidir le téacs inlíne aon eilimint HTML tipiciúil inlíne a úsáid (bíodh sé ina <small>
, , <span>
, nó rud éigin eile) gan rud ar bith níos mó ná aicme fóntais.
<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>
Foirmeacha faoi mhíchumas
Cuir an disabled
aitreabúid Boole ar ionchur chun idirghníomhaíochtaí úsáideoirí a chosc agus chun cuma níos éadroime a dhéanamh air.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Cuir an disabled
tréith le a <fieldset>
chun na rialuithe go léir laistigh a dhíchumasú.
<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>
Uaimh le hancairí
Déileálann brabhsálaithe le gach rialtán foirm dhúchasach ( <input>
, <select>
, , agus <button>
eilimintí) taobh istigh de <fieldset disabled>
mar dhaoine faoi mhíchumas, rud a choscann idirghníomhartha méarchláir agus lucha orthu.
Mar sin féin, má tá eilimintí saincheaptha cosúil le cnaipe mar <a ... class="btn btn-*">
, san áireamh ar d’fhoirm freisin, ní thabharfar ach stíl pointer-events: none
. Mar a luadh sa rannán faoi staid mhíchumais le haghaidh cnaipí (agus go háirithe san fho-roinn le haghaidh eilimintí ancaire), níl an t-airí CSS seo caighdeánaithe go fóill agus ní thugtar tacaíocht iomlán dó in Internet Explorer 10. Beidh na rialuithe ancaire-bhunaithe fós ann freisin. fócasaithe agus inoibrithe ag baint úsáide as an méarchlár. Ní mór duit na rialuithe seo a mhodhnú de láimh trí chur tabindex="-1"
leo chun iad a chosc ó fhócas a fháil agus aria-disabled="disabled"
a staid a chur in iúl do theicneolaíochtaí cúnta.
Comhoiriúnacht tras-bhrabhsálaí
Cé go gcuirfidh Bootstrap na stíleanna seo i bhfeidhm i ngach brabhsálaí, ní thacaíonn Internet Explorer 11 agus thíos go hiomlán leis an disabled
tréith ar <fieldset>
. Úsáid JavaScript saincheaptha chun an réimse réimse sna brabhsálaithe seo a dhíchumasú.
Bailíochtú
Cuir aiseolas luachmhar inghníomhaithe ar fáil do d’úsáideoirí le bailíochtú foirm HTML5 – ar fáil inár mbrabhsálaithe go léir a dtacaítear leo . Roghnaigh ó aiseolas bailíochtaithe réamhshocraithe an bhrabhsálaí, nó cuir teachtaireachtaí saincheaptha i bhfeidhm lenár ranganna ionsuite agus JavaScript tosaithe.
Conas a oibríonn sé
Seo mar a oibríonn bailíochtú foirmeacha le Bootstrap:
- Cuirtear bailíochtú foirm HTML i bhfeidhm trí dhá rang bhréige CSS,
:invalid
agus:valid
. Baineann sé le<input>
,<select>
, agus<textarea>
eilimintí. - Déanann Bootstrap na stíleanna
:invalid
agus na stíleanna chuig an rang:valid
tuismitheora a scóip, a chuirtear i bhfeidhm go hiondúil ar an . Seachas sin, taispeánann aon réimse riachtanach gan luach go bhfuil sé neamhbhailí ar ualach an leathanaigh. Ar an mbealach seo, is féidir leat a roghnú cathain a ghníomhachtú iad (go hiondúil tar éis iarracht a dhéanamh an fhoirm a chur isteach)..was-validated
<form>
- Chun cuma na foirme a athshocrú (mar shampla, i gcás aighneachtaí foirme dinimiciúla ag baint úsáide as AJAX), bain an
.was-validated
rang den rang<form>
arís tar éis í a chur isteach. - Mar chúltaca,
.is-invalid
is.is-valid
féidir ranganna a úsáid in ionad na bréige-ranganna le haghaidh bailíochtú taobh an fhreastalaí . Níl.was-validated
rang tuismitheora ag teastáil uathu. - Mar gheall ar shrianta ar an gcaoi a n-oibríonn CSS, ní féidir linn (faoi láthair) stíleanna a chur i bhfeidhm ar
<label>
fhoirm a thagann roimh rialú foirme sa DOM gan cabhair ó JavaScript saincheaptha. - Tacaíonn gach brabhsálaí nua-aimseartha leis an API bailíochtaithe srianta , sraith de mhodhanna JavaScript chun rialuithe foirmeacha a bhailíochtú.
- Féadfaidh teachtaireachtaí aiseolais úsáid a bhaint as réamhshocruithe an bhrabhsálaí (difriúil do gach brabhsálaí, agus neamhshonraithe trí CSS) nó ár stíleanna aiseolais saincheaptha le HTML agus CSS breise.
- Is féidir leat teachtaireachtaí saincheaptha bailíochta a sholáthar
setCustomValidity
i JavaScript.
Agus é sin san áireamh, smaoinigh ar na demos seo a leanas le haghaidh ár stíleanna bailíochtaithe foirmeacha saincheaptha, ranganna taobh freastalaí roghnacha, agus mainneachtainí brabhsálaí.
Stíleanna saincheaptha
Le haghaidh teachtaireachtaí bailíochtaithe foirme Bootstrap saincheaptha, beidh ort an novalidate
aitreabúid Boole a chur le do <form>
. Díchumasaíonn sé seo leideanna uirlisí aiseolais réamhshocraithe an bhrabhsálaí, ach soláthraíonn sé rochtain fós ar na APIanna bailíochtaithe foirmeacha i JavaScript. Déan iarracht an fhoirm thíos a chur isteach; Idircheapfaidh ár JavaScript an cnaipe cuir isteach agus seolfaidh sé aiseolas chugat. Agus tú ag iarraidh cur isteach, feicfidh tú na stíleanna :invalid
agus na :valid
stíleanna a chuirtear i bhfeidhm ar rialuithe d'fhoirme.
Cuireann stíleanna aiseolais saincheaptha dathanna saincheaptha, teorainneacha, stíleanna fócais agus deilbhíní cúlra i bhfeidhm chun aiseolas a chur in iúl níos fearr. Níl deilbhíní cúlra le haghaidh <select>
s ar fáil ach le .custom-select
, agus ní .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>
Réamhshocruithe brabhsálaí
Nach bhfuil suim agat i dteachtaireachtaí aiseolais bailíochtaithe saincheaptha nó i scríobh JavaScript chun iompraíochtaí foirm a athrú? Gach go maith, is féidir leat úsáid a bhaint as an bhrabhsálaí réamhshocraithe. Déan iarracht an fhoirm thíos a chur isteach. Ag brath ar do bhrabhsálaí agus OS, feicfidh tú stíl aiseolais atá beagán difriúil.
Cé nach féidir na stíleanna aiseolais seo a stíliú le CSS, is féidir leat an téacs aiseolais a shaincheapadh fós trí 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>
Taobh an fhreastalaí
Molaimid bailíochtú taobh an chliaint a úsáid, ach ar eagla go dteastaíonn bailíochtú ar thaobh an fhreastalaí uait, is féidir leat réimsí foirme neamhbhailí agus bailí a chur in iúl le .is-invalid
agus .is-valid
. Tabhair faoi deara go .invalid-feedback
dtacaítear leis na ranganna seo freisin.
Le haghaidh réimsí neamhbhailí, cinntigh go bhfuil baint ag an aischothú/teachtaireacht earráide neamhbhailí leis an réimse foirme ábhartha ag baint úsáide as aria-describedby
. Ligeann an tréith seo id
gur féidir tagairt a dhéanamh do níos mó ná ceann amháin, ar eagla go díríonn an réimse ar théacs foirme breise cheana féin.
<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>
Eilimintí tacaithe
Tá stíleanna bailíochtaithe ar fáil do na rialuithe foirme agus na gcomhpháirteanna seo a leanas:
<input>
s agus<textarea>
s le.form-control
<select>
s le.form-control
or.custom-select
.form-check
s.custom-checkbox
s agus.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>
Leideanna uirlisí
Má cheadaíonn leagan amach d’fhoirme é, is féidir leat na ranganna a mhalartú le .{valid|invalid}-feedback
haghaidh .{valid|invalid}-tooltip
ranganna chun aiseolas bailíochtaithe a thaispeáint i leid uirlisí stílithe. Bí cinnte go bhfuil tuismitheoir in éineacht leis chun leideanna position: relative
uirlisí a aimsiú. Sa sampla thíos, tá sé seo ag ár ranganna colún cheana féin, ach d'fhéadfadh go mbeadh socrú eile ag teastáil ó do thionscadal.
<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>
Saincheapadh
Is féidir stáit bhailíochtaithe a shaincheapadh trí Sass leis an $form-validation-states
léarscáil. Lonnaithe inár _variables.scss
gcomhad, lúbtar an léarscáil Sass seo chun na stáit réamhshocraithe valid
/ invalid
bailíochtaithe a ghiniúint. San áireamh tá léarscáil neadaithe chun dath agus íocón gach stáit a shaincheapadh. Cé nach dtacaíonn brabhsálaithe le stát ar bith eile, is féidir leo siúd a úsáideann stíleanna saincheaptha aiseolas foirmeacha níos casta a chur leo go héasca.
Tabhair faoi deara le do thoil nach molaimid na luachanna seo a shaincheapadh gan an form-validation-state
mixin a mhodhnú freisin.
// 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));
}
Bailíochtú grúpa ionchuir
Chun a fháil amach cad iad na heilimintí a dteastaíonn coirnéil chothromaithe taobh istigh de ghrúpa ionchuir le bailíochtú, tá .has-validation
rang breise ag teastáil ó ghrúpa ionchuir.
<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>
Foirmeacha saincheaptha
Le haghaidh níos mó saincheaptha fós agus comhsheasmhacht trasbhrabhsálaí, bain úsáid as ár n-eilimintí foirm atá go hiomlán saincheaptha chun réamhshocruithe an bhrabhsálaí a athsholáthar. Tá siad bunaithe ar mharcáil shéimeantach agus inrochtana, mar sin is athsholáthar soladach iad d'aon rialú réamhshocraithe foirme.
Seiceálacha agus raidiónna
Tá gach ticbhosca agus raidió <input>
agus <label>
péireáil fillte i a <div>
chun ár rialú saincheaptha a chruthú. Go struchtúrach , is é seo an cur chuige céanna lenár réamhshocrú .form-check
.
Bainimid úsáid as an roghnóir siblíní ( ~
) dár <input>
stáit go léir - cosúil le :checked
- chun ár dtáscaire foirme saincheaptha a stíliú i gceart. Nuair a chuirtear i gcomhar leis an .custom-control-label
rang, is féidir linn freisin an téacs do gach mír a stíl bunaithe ar an <input>
staid.
<input>
Cuirimid an réamhshocrú i bhfolach opacity
agus úsáidimid an .custom-control-label
chun táscaire foirme saincheaptha nua a thógáil ina áit le ::before
agus ::after
. Ar an drochuair, ní féidir linn ceann saincheaptha a thógáil ó díreach toisc nach n- oibríonn <input>
CSS ar an eilimint sin.content
Sna stáit seiceáilte, úsáidimid deilbhíní SVG leabaithe base64 ó Open Iconic . Soláthraíonn sé seo an smacht is fearr dúinn maidir le stíliú agus suíomh trasna brabhsálaithe agus gléasanna.
Boscaí seiceála
<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>
Is féidir le ticbhoscaí saincheaptha an rang bréige a úsáid freisin :indeterminate
nuair a shocraítear iad de láimh trí JavaScript (níl aon tréith HTML ar fáil chun é a shonrú).
Má tá jQuery á úsáid agat, ba cheart go mbeadh a leithéid de rud leordhóthanach:
$('.your-checkbox').prop('indeterminate', true)
Raidiónna
<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>
I líne
<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>
Faoi mhíchumas
Is féidir ticbhoscaí agus raidiónna saincheaptha a dhíchumasú freisin. Cuir an disabled
aitreabúid Boole leis an <input>
agus déanfar an cur síos ar an táscaire saincheaptha agus ar an lipéad a stíliú go huathoibríoch.
<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>
Lasca
Tá marcáil ticbhosca saincheaptha ag lasc ach úsáideann sé an .custom-switch
rang chun lasc scoránaigh a dhéanamh. Tacaíonn lasca leis an disabled
tréith freisin.
<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>
Roghnaigh roghchlár
Níl ag teastáil ó bhiachláir saincheaptha <select>
ach rang saincheaptha, .custom-select
chun na stíleanna saincheaptha a spreagadh. Tá stíleanna saincheaptha teoranta don <select>
chuma tosaigh agus ní féidir na s a mhodhnú <option>
mar gheall ar theorainneacha an bhrabhsálaí.
<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>
Is féidir leat roghanna saincheaptha idir bheag agus mhór a roghnú freisin chun ár n-ionchur téacs den mhéid céanna a mheaitseáil.
<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>
Tacaítear leis an multiple
tréith freisin:
<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>
Mar atá an size
tréith:
<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>
Raon
<input type="range">
Cruthaigh rialuithe saincheaptha le .custom-range
. Tá an rian (an cúlra) agus an ordóg (an luach) le feiceáil mar an gcéanna thar brabhsálaithe. Toisc nach dtugann ach IE agus Firefox tacaíocht do “líonadh” a rian ón taobh clé nó ar dheis den ordóg mar mhodh chun dul chun cinn a léiriú go radhairc, ní thacaímid leis faoi láthair.
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
Tá luachanna intuigthe ag ionchuir raoin maidir le — min
agus , faoi seach. Is féidir leat luachanna nua a shonrú dóibh siúd a úsáideann an agus na tréithe.max
0
100
min
max
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
De réir réamhshocraithe, cuireann raon “snap” isteach chuig luachanna an tslánuimhir. Chun é seo a athrú, is féidir leat luach a shonrú step
. Sa sampla thíos, déanaimid líon na gcéimeanna a dhúbailt trí úsáid a bhaint as step="0.5"
.
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
Brabhsálaí comhaid
Is é an t-ionchur comhaid an ceann is gnarly den tsraith agus teastaíonn JavaScript breise más mian leat iad a nascadh le Roghnaigh comhad feidhmiúil… agus téacs ainm comhaid roghnaithe.
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Cuirimid an comhad réamhshocraithe i bhfolach <input>
tríd opacity
an <label>
. Gintear an cnaipe agus suitear é le ::after
. Ar deireadh, dearbhaímid go bhfuil width
spásáil cheart height
ann <input>
don ábhar mórthimpeall.
Na teaghráin a aistriú nó a shaincheapadh le SCSS
Úsáidtear an :lang()
rang bréige chun an téacs “Brabhsáil” a aistriú go teangacha eile a cheadú. Sáraigh nó cuir iontrálacha leis an $custom-file-text
athróg Sass leis an gclib teanga ábhartha agus teaghráin logánta. Is féidir na teaghráin Bhéarla a shaincheapadh ar an mbealach céanna. Mar shampla, seo mar a d’fhéadfadh duine aistriúchán Spáinnise a chur leis (is é cód teanga na Spáinne es
):
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
Seo lang(es)
i bhfeidhm ar an ionchur comhaid saincheaptha le haghaidh aistriúchán Spáinnis:
<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>
Beidh ort teanga do dhoiciméid (nó fo-chrann de) a shocrú i gceart chun an téacs ceart a thaispeáint. Is féidir é seo a dhéanamh ag baint úsáide as an lang
tréith ar an <html>
eilimint nó an Content-Language
ceanntásc HTTP , i measc modhanna eile.
Na teaghráin a aistriú nó a shaincheapadh le HTML
Soláthraíonn Bootstrap bealach freisin chun an téacs “Brabhsáil” a aistriú go HTML leis an data-browse
tréith is féidir a chur leis an lipéad ionchuir saincheaptha (mar shampla san Ollainnis):
<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>