Dòigh-obrach
Ionnsaich mu na prionnsapalan stiùiridh, ro-innleachdan, agus dòighean-obrach a chleachdar gus Bootstrap a thogail agus a chumail suas gus an urrainn dhut a ghnàthachadh agus a leudachadh nas fhasa thu fhèin.
Fhad ‘s a tha na duilleagan tòiseachaidh a’ toirt seachad turas tòiseachaidh mun phròiseact agus na tha e a’ tabhann, tha an sgrìobhainn seo a’ cuimseachadh air carson a bhios sinn a’ dèanamh na rudan a bhios sinn a’ dèanamh ann am Bootstrap. Tha e a’ mìneachadh ar feallsanachd mu bhith a’ togail air an lìon gus an ionnsaich daoine eile bhuainn, cur còmhla rinn, agus ar cuideachadh le leasachadh.
Faic rudeigin nach eil a’ faireachdainn ceart, no is dòcha a dh’ fhaodadh a bhith air a dhèanamh nas fheàrr? Fosgail cùis - bu mhath leinn bruidhinn riut mu dheidhinn.
Bidh sinn a’ dàibheadh a-steach do gach aon dhiubh sin nas fhaide air adhart, ach aig ìre àrd, seo a tha a’ stiùireadh ar dòigh-obrach.
- Bu chòir co-phàirtean a bhith freagairteach agus gluasadach an toiseach
- Bu chòir co-phàirtean a thogail le clas bunaiteach agus a leudachadh tro chlasaichean mion-atharrachaidh
- Bu chòir do stàitean co-phàirteach cumail ri sgèile clàr-z cumanta
- Far a bheil e comasach, is fheàrr le gnìomhachadh HTML agus CSS thairis air JavaScript
- Far a bheil e comasach, cleachd goireasan thairis air stoidhlichean àbhaisteach
- Far an gabh sin dèanamh, seachain riatanasan teann HTML (luchd-taghaidh chloinne)
Tha stoidhlichean freagairteach Bootstrap air an togail gus a bhith freagairteach, dòigh-obrach ris an canar gu tric gluasadach-an-toiseach . Bidh sinn a’ cleachdadh an teirm seo nar docaichean agus ag aontachadh gu ìre mhòr leis, ach aig amannan faodaidh e a bhith ro fharsaing. Ged nach fheum a h-uile pàirt a bhith gu tur freagairteach ann am Bootstrap, tha an dòigh-obrach fhreagarrach seo mu dheidhinn a bhith a’ lughdachadh cus cusan CSS le bhith gad phutadh gus stoidhlichean a chuir ris mar a bhios an sealladh-seallaidh a’ fàs nas motha.
Thairis air Bootstrap, chì thu seo gu soilleir anns na ceistean meadhanan againn. Anns a’ mhòr-chuid de chùisean, bidh sinn a’ cleachdadh min-widthcheistean a thòisicheas a’ cur a-steach aig puing-briseadh sònraichte agus a’ dol suas tro na puingean brisidh nas àirde. Mar eisimpleir, tha e a .d-none’ buntainn min-width: 0ri infinity. Air an làimh eile, tha tagradh a’ .d-md-nonebuntainn bhon àite brisidh meadhanach agus suas.
Aig amannan cleachdaidh sinn max-widthnuair a dh’ fheumas iom-fhillteachd gnèitheach e. Aig amannan, tha na tar-chuiridhean sin nas soilleire a thaobh gnìomh agus inntinn airson an cur an gnìomh agus taic a thoirt dhaibh na bhith ag ath-sgrìobhadh prìomh ghnìomhachd bho na co-phàirtean againn. Nì sinn ar dìcheall an dòigh-obrach seo a chuingealachadh, ach cleachdaidh sinn e bho àm gu àm.
A bharrachd air an Reboot againn, duilleag stoidhle àbhaisteachadh tar-bhrabhsair, tha na stoidhlichean againn uile ag amas air clasaichean a chleachdadh mar luchd-taghaidh. Tha seo a’ ciallachadh a bhith a’ stiùireadh gu soilleir bho luchd-taghaidh seòrsa (me, input[type="text"]) agus clasaichean phàrantan taobh a-muigh (me, .parent .child) a tha a’ dèanamh stoidhlichean ro shònraichte airson a dhol thairis air gu furasta.
Mar sin, bu chòir co-phàirtean a bhith air an togail le clas bunaiteach anns a bheil paidhrichean cumanta, nach bu chòir a dhol thairis air luach seilbh. Mar eisimpleir, .btnagus .btn-primary. Bidh sinn a’ cleachdadh .btnairson a h-uile stoidhle cumanta leithid display, padding, agus border-width. Bidh sinn an uairsin a’ cleachdadh mion-atharraichean mar .btn-primaryan dath, dath cùl-raoin, dath crìche, msaa a chur ris.
Cha bu chòir clasaichean mion-atharrachaidh a chleachdadh ach nuair a tha grunn fheartan no luachan rin atharrachadh thairis air iomadh caochladair. Chan eil feum air atharraichean an-còmhnaidh, mar sin dèan cinnteach gu bheil thu dha-rìribh a’ sàbhaladh loidhnichean de chòd agus a’ cuir casg air cus cus rudan nuair a bhios tu gan cruthachadh. Is e eisimpleirean math de mhion-atharraichean na clasaichean dath cuspaireil agus na caochlaidhean meud againn.
Tha dà z-indexsgèile ann am Bootstrap - eileamaidean taobh a-staigh co-phàirt agus co-phàirtean ath-chòmhdach.
- Tha cuid de cho-phàirtean ann am Bootstrap air an togail le eileamaidean a tha a’ dol thairis air gus casg a chuir air crìochan dùbailte gun a bhith ag atharrachadh an
bordertogalaich. Mar eisimpleir, buidhnean putan, buidhnean cuir a-steach, agus duilleagachadh. - Tha na co-phàirtean sin a’ co-roinn
z-indexsgèile àbhaisteach0troimhe3. 0tha bunaiteach (tòiseach),1is:hover,2is:active/.active, agus ,3tha:focus.- Tha an dòigh-obrach seo a rèir na bha sinn an dùil a thaobh prìomhachas luchd-cleachdaidh as àirde. Ma tha eileamaid air a chuimseachadh, tha e ri fhaicinn agus aig aire an neach-cleachdaidh. Tha na h-eileamaidean gnìomhach san dàrna h-àite seach gu bheil iad a 'comharrachadh staid. Tha Hover san treas àite leis gu bheil e a’ nochdadh rùn neach-cleachdaidh, ach faodar cha mhòr rud sam bith a thoirt thairis.
Tha grunn phàirtean ann am Bootstrap a bhios ag obair mar ath-chòmhdach de sheòrsa air choreigin. Tha seo a’ toirt a-steach, ann an òrdugh an ìre as àirde z-index, dropdowns, navbars stèidhichte agus steigeach, modalan, molaidhean innealan, agus popovers. z-indexTha an sgèile aca fhèin aig na co-phàirtean sin a thòisicheas aig 1000. Tha an àireamh tòiseachaidh seo air thuaiream agus bidh e na bhufair beag eadar na stoidhlichean againn agus stoidhlichean àbhaisteach a’ phròiseict agad.
Bidh gach pàirt ath-chòmhdach ag àrdachadh a z-indexluach beagan gus am bi prionnsapalan UI cumanta a’ leigeil le eileamaidean le fòcas neach-cleachdaidh no hovered fuireach rim faicinn fad na h-ùine. Mar eisimpleir, tha modal a’ bacadh sgrìobhainnean (me, chan urrainn dhut gnìomh sam bith eile a dhèanamh ach a-mhàin gnìomh a’ mhodail), agus mar sin cuiridh sinn sin os cionn na bàraichean-seòlaidh againn.
Ionnsaich tuilleadh mu dheidhinn seo air an z-indexduilleag cruth againn .
Far a bheil sin comasach, is fheàrr leinn HTML agus CSS a sgrìobhadh thairis air JavaScript. San fharsaingeachd, tha HTML agus CSS nas lìonmhoire agus nas ruigsinneach do bharrachd dhaoine de gach ìre de eòlas. Tha HTML agus CSS cuideachd nas luaithe sa bhrobhsair agad na JavaScript, agus tha do bhrobhsair coitcheann a’ toirt seachad tòrr gnìomh dhut.
Is e am prionnsapal seo an API JavaScript den chiad ìre againn mar databhuadhan. Chan fheum thu cha mhòr JavaScript sam bith a sgrìobhadh gus na plugins JavaScript againn a chleachdadh; an àite sin, sgrìobh HTML. Leugh tuilleadh mu dheidhinn seo air an duilleag tar-shealladh JavaScript againn .
Mu dheireadh, bidh na stoidhlichean againn a’ togail air giùlan bunaiteach eileamaidean lìn cumanta. Far an gabh sin dèanamh, is fheàrr leinn na tha am brabhsair a’ toirt seachad a chleachdadh. Mar eisimpleir, faodaidh tu .btnclas a chuir air cha mhòr eileamaid sam bith, ach chan eil a’ mhòr-chuid de na h-eileamaidean a’ toirt seachad luach semantach no gnìomhachd brabhsair. Mar sin an àite sin, bidh sinn a’ cleachdadh <button>s agus <a>s.
Tha an aon rud a 'dol airson co-phàirtean nas iom-fhillte. Fhad ‘s a b’ urrainn dhuinn am plugan dearbhaidh foirm againn fhèin a sgrìobhadh gus clasaichean a chuir ri eileamaid phàrant stèidhichte air staid cuir a-steach, mar sin a ’leigeil leinn an teacsa a stoidhle ag ràdh dearg, is fheàrr leinn a bhith a’ cleachdadh na :valid/ :invalidpseudo-eileamaidean a bheir gach brobhsair dhuinn.
Tha clasaichean goireis - a bha roimhe na luchd-cuideachaidh ann am Bootstrap 3 - nan caraidean cumhachdach ann a bhith a’ sabaid an aghaidh bloat CSS agus droch choileanadh duilleag. Is e clas goireis mar as trice aon chàraidean luach seilbh neo-sheasmhach air an cur an cèill mar chlas (me, .d-blocka’ riochdachadh display: block;). Is e am prìomh thagradh aca astar cleachdaidh fhad ‘s a tha thu a’ sgrìobhadh HTML agus a ’cuingealachadh na tha de CSS àbhaisteach a dh’ fheumas tu a sgrìobhadh.
Gu sònraichte a thaobh CSS àbhaisteach, faodaidh goireasan cuideachadh le bhith a’ cuir an-aghaidh meud faidhle a mheudachadh le bhith a’ lughdachadh na paidhrichean luach seilbh as cumanta agad gu clasaichean singilte. Faodaidh seo buaidh mhòr a thoirt air sgèile anns na pròiseactan agad.
Ged nach eil e an-còmhnaidh comasach, bidh sinn a’ feuchainn ri bhith a’ seachnadh a bhith ro dogmatic nar riatanasan HTML airson co-phàirtean. Mar sin, bidh sinn a’ cuimseachadh air clasaichean singilte anns an luchd-taghaidh CSS againn agus a’ feuchainn ri luchd-taghaidh cloinne sa bhad a sheachnadh ( ~). Bheir seo barrachd sùbailteachd dhut nad bhuileachadh agus cuidichidh e le bhith a’ cumail ar CSS nas sìmplidh agus nas mionaidiche.