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ú typetréith chuí ar gach ionchur (m.sh., emaille haghaidh seoladh ríomhphoist nó numberle 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.
Rialuithe foirm
Stílítear rialuithe foirme téacs—cosúil le <input>s, <select>s, agus <textarea>s leis an .form-controlrang. San áireamh tá stíleanna le haghaidh cuma ginearálta, staid fócais, méid, agus níos mó.
Le haghaidh ionchuir comhad, babhtáil an .form-controlle haghaidh .form-control-file.
Sizing
Socraigh airde ag baint úsáide as ranganna mar .form-control-lgagus .form-control-sm.
Léamh amháin
Cuir an readonlyaitreabú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.
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-plaintextrang chun stíliú réimse na foirme réamhshocraithe a bhaint agus coinnigh an corrlach agus an stuáil cheart.
Ionchuir Raon
Socraigh ionchuir raon inscrollaithe cothrománach ag baint úsáide as .form-control-range.
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 disabledtré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 gnéithe deartháireacha <input>agus deirfiúracha iad ár gcuid agus ár gcuid <label>féin seachas eilimintí <input>laistigh de <label>. Tá sé seo beagán níos briathar mar ní mór duit a shonrú idagus fortré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.
I líne
Grúpáil ticbhoscaí nó raidiónna ar an tsraith chothrománach chéanna trí chur .form-check-inlinele haon cheann .form-check.
Gan lipéid
Cuir .position-staticleis na hionchuir laistigh .form-checknach 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).
Leagan Amach
Ós rud é go bhfuil feidhm ag Bootstrap display: blockagus width: 100%le beagnach gach rialtán foirme againn, 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-inlinede réir mar is gá. Úsáid é le <fieldset>s, <div>s, nó beagnach aon eilimint eile.
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.
Foirm as a chéile
Is féidir leat babhtáil freisin .rowle 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.
Is féidir leagan amach níos casta a chruthú leis an gcóras greille freisin.
Foirm chothrománach
Cruthaigh foirmeacha cothrománacha leis an eangach tríd an .rowrang 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-labeltú 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-toplipéad ar ár lipéad ionchuir raidió cruachta chun bunlíne an téacs a ailíniú níos fearr.
Méid lipéad foirme cothrománach
Bí cinnte a úsáid .col-form-label-smnó .col-form-label-lgar do chuid <label>nó <legend>s a leanúint i gceart an méid de .form-control-lgagus .form-control-sm.
Méid an cholúin
Mar a léiríodh sna samplaí roimhe seo, ligeann ár gcóras eangaí duit aon líon .cols a chur laistigh de .rownó .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 .cols eile a roinnt go cothrom leis an gcuid eile, le haicmí colúin ar leith mar .col-7.
Uathmhéadú
Úsáideann an sampla thíos áirgiúlacht flexbox chun an t-ábhar a lárú go hingearach agus athraíonn .colsé .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.
Is féidir leat é sin a athmhúnlú arís le ranganna colúin a bhaineann go sonrach le méid.
Úsáid an .form-inlinerang 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: autochun an réamhshocrú Bootstrap a shárú width: 100%.
Ní bhíonn rialtáin le feiceáil ach inlíne i gcalafoirt 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.
Tacaítear freisin le rialuithe foirm saincheaptha agus le roghnúcháin.
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-onlyrang. Tá modhanna malartacha eile ann chun lipéad a sholáthar do theicneolaíochtaí cúnta, amhail an aria-label, aria-labelledbynó an titleaitreabúid. Mura bhfuil aon cheann díobh seo i láthair, féadfaidh teicneolaíochtaí cúnta dul i muinín an placeholdertréith a úsáid, más ann dóibh, ach tabhair faoi deara placeholdernach moltar é a úsáid in ionad modhanna eile lipéadaithe.
Téacs cabhrach
Is féidir téacs cabhrach bloc-leibhéal i bhfoirmeacha a chruthú trí úsáid a bhaint as .form-text(ar a dtugtaí .help-blockin 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-describedbytré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: blockagus cuireann sé roinnt corrlach barr leis le haghaidh spásáil éasca ó na hionchuir thuas.
Caithfidh do phasfhocal a bheith 8-20 carachtar ar fad, litreacha agus uimhreacha a bheith ann, agus gan spásanna, carachtair speisialta nó emoji a bheith ann.
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á rang fóntais.
Foirmeacha faoi mhíchumas
Cuir an disabledtréith Boole ar ionchur chun idirghníomhaíochtaí úsáideoirí a chosc agus chun go mbeidh cuma níos éadroime air.
Cuir an disabledtréith le a <fieldset>chun na rialuithe go léir laistigh a dhíchumasú.
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 disabledtré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.
Is eol dúinn nach bhfuil na stíleanna bailíochtaithe saincheaptha ar thaobh an chliaint agus na leideanna uirlisí inrochtana faoi láthair, ós rud é nach bhfuil siad nochta do theicneolaíochtaí cúnta. Cé go n-oibrímid ar réiteach, molaimid an rogha ar thaobh an fhreastalaí nó an modh bailíochtaithe brabhsálaí réamhshocraithe a úsáid.
Bailíochtú grúpa ionchuir
Bíonn deacrachtaí ag grúpaí ionchuir le stíleanna bailíochtaithe, ar an drochuair. Is é an moladh atá againn ná teachtaireachtaí aiseolais a chur mar ghnéithe de na deartháireacha agus de na .input-groupdeartháireacha .is-{valid|invalid}. Má chuirtear teachtaireachtaí aiseolais laistigh de ghrúpaí ionchuir, briseann sé an border-radius. Féach ar an seisiún oibre seo .
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, :invalidagus :valid. Baineann sé le <input>, <select>, agus <textarea>eilimintí.
Déanann Bootstrap na stíleanna :invalidagus na stíleanna chuig an rang :validtuismitheora 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-validatedrang den rang <form>arís tar éis í a chur isteach.
Mar chúltaca, .is-invalidis .is-validféidir ranganna a úsáid in ionad na bréige-ranganna le haghaidh bailíochtú taobh an fhreastalaí . Níl .was-validatedrang 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 setCustomValidityi 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 novalidateaitreabú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 :invalidagus na :validstí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 do <select>s ar fáil ach le .custom-select, agus ní .form-control.
Réamhshocruithe brabhsálaí
Nach bhfuil suim agat i dteachtaireachtaí aiseolais bailíochtaithe saincheaptha nó i scríobh JavaScript chun iompraíochtaí foirme 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.
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-invalidagus .is-valid. Tabhair faoi deara go .invalid-feedbackdtacaí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 idgur 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.
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-controlor.custom-select
.form-checks
.custom-checkboxs agus .custom-radios
.custom-file
Leideanna uirlisí
Má cheadaíonn leagan amach d’fhoirme é, is féidir leat na ranganna a mhalartú le .{valid|invalid}-feedbackhaghaidh .{valid|invalid}-tooltipranganna chun aiseolas bailíochtaithe a thaispeáint i leid uirlisí stílithe. Bí cinnte go bhfuil tuismitheoir in éineacht leis chun leideanna position: relativeuirlisí 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.
Saincheapadh
Is féidir stáit bhailíochtaithe a shaincheapadh trí Sass leis an $form-validation-statesléarscáil. Lonnaithe inár _variables.scssgcomhad, lúbtar an léarscáil Sass seo chun na stáit réamhshocraithe valid/ invalidbailí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-statemixin a mhodhnú freisin.
Clár oibre bailíochtaithe grúpa ionchuir
Ní féidir linn briste border-radiusna ngrúpaí ionchuir a réiteach le bailíochtú de bharr teorainneacha roghnóireachta, mar sin tá sáruithe láimhe ag teastáil. Nuair atá grúpa ionchuir caighdeánach in úsáid agat agus ná cuir na luachanna ga teorann réamhshocraithe in oiriúint, cuir .rounded-rightleis na heilimintí leis an border-radius.
@
Roghnaigh ainm úsáideora le do thoil.
Agus grúpa ionchuir beag nó mór á úsáid agat nó nuair a bhíonn na border-radiusluachanna réamhshocraithe á n-úsáid agat, cuir CSS saincheaptha leis an eilimint leis an border-radius.
@
Roghnaigh ainm úsáideora le do thoil.
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-labelrang, 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 opacityagus úsáidimid an .custom-control-labelchun táscaire foirme saincheaptha nua a thógáil ina áit le ::beforeagus ::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ála, úsáidimid deilbhíní SVG leabaithe base64 ó Open Iconic . Soláthraíonn sé seo an rialú is fearr dúinn maidir le stíliú agus suíomh trasna brabhsálaithe agus gléasanna.
Boscaí seiceála
Is féidir le ticbhoscaí saincheaptha an rang bréige a úsáid freisin :indeterminatenuair 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:
Raidiónna
I líne
Faoi mhíchumas
Is féidir ticbhoscaí agus raidiónna saincheaptha a dhíchumasú freisin. Cuir an disabledaitreabú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.
Lasca
Tá marcáil ticbhosca saincheaptha ag lasc ach úsáideann sé an .custom-switchrang chun lasc scoránaigh a dhéanamh. Tacaíonn lasca leis an disabledtréith freisin.
Roghnaigh roghchlár
Níl ag teastáil ó bhiachláir saincheaptha <select>ach rang saincheaptha, .custom-selectchun 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í.
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.
Tacaítear leis an multipletréith freisin:
Mar atá an sizetréith:
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.
Tá luachanna intuigthe ag ionchuir raoin maidir le — minagus , faoi seach. Is féidir leat luachanna nua a shonrú dóibh siúd a úsáideann an agus na tréithe.max0100minmax
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".
Brabhsálaí comhaid
An breiseán molta chun ionchur comhaid saincheaptha a bheochan: bs-custom-file-input , sin an rud atá á úsáid againn faoi láthair anseo inár ndoiciméid.
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.
Cuirimid an comhad réamhshocraithe i bhfolach <input>tríd opacityan <label>. Gintear an cnaipe agus suitear é le ::after. Ar deireadh, dearbhaímid go bhfuil widthspásáil cheart heightann <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-textathró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):
Seo lang(es)i bhfeidhm ar an ionchur comhaid saincheaptha le haghaidh aistriúchán Spáinnis:
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 langtréith ar an <html>eilimint nó an Content-Languageceanntá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-browsetréith is féidir a chur leis an lipéad ionchuir saincheaptha (mar shampla san Ollainnis):