Cur Chuige

Cé go dtugann na leathanaigh um thosnú ar an tionscadal turas tosaigh ar an tionscadal agus cad a thairgeann sé, díríonn an doiciméad seo ar na fáthanna a dhéanaimid na rudaí a dhéanaimid in Bootstrap. Míníonn sé ár bhfealsúnacht maidir le tógáil ar an ngréasán ionas gur féidir le daoine eile foghlaim uainn, rannchuidiú linn, agus cabhrú linn feabhsú.

Féach ar rud éigin nach bhfuil fuaime ceart, nó b'fhéidir a d'fhéadfaí a dhéanamh níos fearr? Oscail ceist - ba bhreá linn é a phlé leat.

Achoimre

Léimfimid isteach i ngach ceann díobh seo níos mó ar fad, ach ag leibhéal ard, seo an rud a threoraíonn ár gcur chuige.

• Ba cheart go mbeadh comhpháirteanna sofhreagrach agus soghluaiste den chéad uair
• Ba chóir comhpháirteanna a thógáil le rang bonn agus iad a leathnú trí ranganna mionathraithe
• Ba cheart go gcloífeadh stáit chomhpháirteacha le scála innéacs z coiteann
• Nuair is féidir, b'fhearr le cur i bhfeidhm HTML agus CSS thar JavaScript
• Nuair is féidir, bain úsáid as fóntais thar stíleanna saincheaptha
• Nuair is féidir, seachain dianriachtanais HTML (roghnóirí leanaí) a fhorfheidhmiú.

Sofhreagrach

Tá stíleanna sofhreagracha Bootstrap tógtha le bheith freagrúil, cur chuige a dtugtar go minic soghluaiste-an-tosaithe air . Bainimid úsáid as an téarma seo inár ndoiciméid agus aontaímid den chuid is mó leis, ach uaireanta féadfaidh sé a bheith ró-leathan. Cé nach gcaithfidh gach comhpháirt a bheith iomlán sofhreagrach i Bootstrap, baineann an cur chuige sofhreagrach seo le sáruithe CSS a laghdú trí bhrú ort stíleanna a chur leis de réir mar a éiríonn an radharc níos mó.

Ar fud Bootstrap, feicfidh tú é seo go soiléir inár bhfiosruithe ó na meáin. I bhformhór na gcásanna, bainimid úsáid as min-widthfiosrúcháin a thosaíonn ag cur i bhfeidhm ag brisphointe ar leith agus a théann suas trí na brisphointí níos airde. Mar shampla, .d-nonebaineann a ó min-width: 0go héigríoch. Ar an láimh eile, .d-md-nonebaineann feidhm ón meánbhriseadh agus suas.

Uaireanta úsáidfimid max-widthnuair a éilíonn castacht bhunúsach comhpháirt é. Uaireanta, bíonn na sáruithe sin níos soiléire ó thaobh feidhme agus meabhrach le cur i bhfeidhm agus le tacú leo ná feidhmiúlacht lárnach a athscríobh ónár gcomhpháirteanna. Déanaimid ár ndícheall an cur chuige seo a theorannú, ach úsáidfimid é ó am go chéile.

Ranganna

Seachas ár Atosaigh, stílbhileog um normalú trasbhrabhsálaí, tá sé mar aidhm ag ár stíleanna go léir ranganna a úsáid mar roghnóirí. Is éard atá i gceist leis seo ná roghnúóirí cineáil a stiúradh go soiléir (m.sh., input[type="text"]) agus ranganna seachtracha tuismitheora (m.sh., .parent .child) a fhágann go bhfuil stíleanna ró-shonrach le sárú go héasca.

Mar sin, ba cheart comhpháirteanna a thógáil le bunaicme ina mbeadh péirí coitianta, nach sáraítear luach réadmhaoine. Mar shampla, .btnagus .btn-primary. Bainimid úsáid .btnas na stíleanna coitianta go léir cosúil le display, padding, agus border-width. Bainimid úsáid ansin as modhnóirí cosúil .btn-primaryleis an dath, dath an chúlra, dath teorann, etc.

Níor cheart aicmí modhnóirí a úsáid ach amháin nuair atá ilairíonna nó luachanna iolracha le hathrú trasna iolraí éagsúla. Ní bhíonn gá le modhnóirí i gcónaí, mar sin bí cinnte go bhfuil tú ag sábháil línte cód agus ag seachaint sáruithe neamhriachtanacha agus iad á gcruthú. Samplaí maithe de mhodhnóirí is ea ár ranganna datha téama agus na leaganacha méideanna.

scálaí innéacs z

Tá dhá z-indexscála i Bootstrap—eilimintí laistigh de chomhpháirt agus comhpháirteanna forleagan.

Eilimintí comhpháirte

• Tógtar roinnt comhpháirteanna i Bootstrap le heilimintí forluiteacha chun teorainneacha dúbailte a chosc gan an bordermhaoin a mhodhnú. Mar shampla, grúpaí cnaipí, grúpaí ionchuir, agus uimhriú.
• Comhroinneann na comhpháirteanna seo z-indexscála caighdeánach 0trí 3.
• 0is réamhshocraithe (tosaigh), 1is :hover, 2is :active/ .active, agus 3tá :focus.
• Tagann an cur chuige seo lenár n-ionchais maidir leis an tosaíocht is airde d’úsáideoirí. Má dhírítear ar eilimint, tá sé le feiceáil agus ar aird an úsáideora. Tá gnéithe gníomhacha sa dara háit mar go léiríonn siad staid. Tá ainlíon sa tríú háit mar go léiríonn sé rún an úsáideora, ach is féidir beagnach aon rud a bhogadh.

Comhpháirteanna forleagan

Áirítear ar Bootstrap roinnt comhpháirteanna a fheidhmíonn mar fhorleagan de chineál éigin. Áirítear leis seo, in ord is airde z-index, anuas, barraí nascleanúna seasta agus greamaitheacha, módúil, leideanna uirlisí agus popovers. Tá a z-indexscála féin ag na comhpháirteanna seo a thosaíonn ag 1000. Roghnaíodh an uimhir tosaigh seo go treallach agus feidhmíonn sé mar mhaolán beag idir ár stíleanna agus stíleanna saincheaptha do thionscadail.

Méadaíonn gach comhpháirt forleagan a z-indexluach beagán sa chaoi is go gceadaíonn prionsabail choitianta Chomhéadain na heilimintí atá dírithe ar an úsáideoir nó a bhfuil ainliú orthu fanacht in amharc i gcónaí. Mar shampla, is éard atá i módúil ná blocáil doiciméad (m.sh., ní féidir leat aon bheart eile a dhéanamh ach amháin i gcás gníomh an mhodha), mar sin cuirimid é sin os cionn ár mbarraí nascleanúna.

Foghlaim tuilleadh faoi seo ar ár z-indexleathanach leagan amach .

HTML agus CSS thar JS

Nuair is féidir, is fearr linn HTML agus CSS a scríobh thar JavaScript. Go ginearálta, tá HTML agus CSS níos bisiúla agus inrochtana do níos mó daoine de gach leibhéal taithí éagsúil. Tá HTML agus CSS níos tapúla i do bhrabhsálaí ná JavaScript, agus go ginearálta soláthraíonn do bhrabhsálaí go leor feidhmiúlacht duit.

Is é an prionsabal seo ár API JavaScript den chéad scoth a úsáideann datatréithe. Ní gá duit beagnach aon JavaScript a scríobh chun ár breiseán JavaScript a úsáid; ina ionad sin, scríobh HTML. Léigh tuilleadh faoi seo inár leathanach forbhreathnú JavaScript .

Ar deireadh, tógann ár stíleanna ar iompraíochtaí bunúsacha na n-eilimintí gréasáin coitianta. Nuair is féidir, is fearr linn an méid a sholáthraíonn an brabhsálaí a úsáid. Mar shampla, is féidir leat .btnrang a chur ar beagnach aon eilimint, ach ní sholáthraíonn formhór na n-eilimintí aon luach shéimeantach nó feidhmiúlacht bhrabhsálaí. Mar sin ina ionad sin, úsáidimid <button>s agus <a>s.

An rud céanna i gcás comhpháirteanna níos casta. Cé go bhféadfaimis ár mbreiseán bailíochtaithe foirmeacha féin a scríobh chun ranganna a chur le heilimint tuismitheora bunaithe ar staid an ionchuir, rud a ligeann dúinn an téacs a rá dearg a stíl, is fearr linn na heilimintí :valid/ bréagacha a sholáthraíonn gach brabhsálaí dúinn a úsáid.:invalid

Fóntais

Is comhghuaillithe cumhachtach iad ranganna fóntais - cúntóirí Bootstrap 3 roimhe seo chun dul i ngleic le bloat CSS agus drochfheidhmíocht leathanaigh. Is éard is aicme áirgiúlachta ann go hiondúil péireáil aonair, luach maoine do-inmheánach a chuirtear in iúl mar aicme (m.sh., .d-blockseasann display: block;). Is é an príomh-achomharc atá acu ná luas úsáide agus HTML á scríobh agus teorainn a chur leis an méid CSS saincheaptha a chaithfidh tú a scríobh.

Go sonrach maidir le CSS saincheaptha, is féidir le fóntais cabhrú le dul i ngleic le méadú ar mhéid comhaid trí na péirí luach maoine is coitianta a dhéantar arís agus arís eile a laghdú i ranganna aonair. Is féidir leis seo tionchar suntasach ar scála a bheith aige ar do thionscadail.

HTML solúbtha

Cé nach féidir i gcónaí, déanaimid ár ndícheall a sheachaint a bheith ró-dhungmatach inár riachtanais HTML le haghaidh comhpháirteanna. Dá bhrí sin, dírímid ar ranganna aonair inár roghnóirí CSS agus déanaimid iarracht roghnóirí leanaí láithreacha a sheachaint ( >). Tugann sé seo níos mó solúbthachta duit i do chur i bhfeidhm agus cabhraíonn sé lenár CSS a choinneáil níos simplí agus nach bhfuil chomh sonrach.

Gnásanna cód

Déanann Treoir Chód (ó chomhchruthaitheoir Bootstrap, @mdo) doiciméadú ar an gcaoi a scríobhaimid ár HTML agus CSS ar fud Bootstrap. Sonraíonn sé treoirlínte maidir le formáidiú ginearálta, mainneachtainí ciallmhara, orduithe maoine agus aitreabúide, agus tuilleadh.

Bainimid úsáid as Stylelint chun na caighdeáin seo agus níos mó a fhorfheidhmiú inár Sass/CSS. Tá ár config Stylelint saincheaptha foinse oscailte agus ar fáil do dhaoine eile a úsáid agus a leathnú.

Bainimid úsáid as vnu-jar chun HTML caighdeánach agus séimeantach a fhorfheidhmiú, chomh maith le hearráidí coitianta a bhrath.