Cur Chuige
Foghlaim faoi na treoirphrionsabail, na straitéisí agus na teicnící a úsáidtear chun Bootstrap a thógáil agus a chothabháil ionas gur féidir leat é a shaincheapadh agus a shíneadh níos éasca duit féin.
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.
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ú.
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-width
fiosrú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-none
baineann a ó min-width: 0
go héigríoch. Ar an láimh eile, .d-md-none
baineann feidhm ón meánbhriseadh agus suas.
Uaireanta úsáidfimid max-width
nuair 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.
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, .btn
agus .btn-primary
. Bainimid úsáid .btn
as 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-primary
leis 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.
Tá dhá z-index
scála i Bootstrap—eilimintí laistigh de chomhpháirt agus comhpháirteanna forleagan.
- Tógtar roinnt comhpháirteanna i Bootstrap le heilimintí forluiteacha chun teorainneacha dúbailte a chosc gan an
border
mhaoin a mhodhnú. Mar shampla, grúpaí cnaipí, grúpaí ionchuir, agus uimhriú. - Comhroinneann na comhpháirteanna seo
z-index
scála caighdeánach0
trí3
. 0
is réamhshocraithe (tosaigh),1
is:hover
,2
is:active
/.active
, agus ,3
is: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.
Á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-index
scála féin ag na comhpháirteanna seo a thosaíonn ag 1000
. Uimhir randamach í seo 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-index
luach beagán sa chaoi is go gceadaíonn prionsabail chomhéadain comónta d'eilimintí atá dírithe ar an úsáideoir nó foilsiú a bheith 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-index
leathanach leagan amach .
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 n-aicme JavaScript API is data
tré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 .btn
rang 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
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-block
seasann 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.
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.