Dòigh-obrach

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.

Geàrr-chunntas

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)

Freagarrach

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.

Clasaichean

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.

z-clàran-amais

Tha dà z-indexsgèile ann am Bootstrap - eileamaidean taobh a-staigh co-phàirt agus co-phàirtean ath-chòmhdach.

Feartan co-phàirteach

• 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 àbhaisteach 0troimhe 3.
• 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.

Co-phàirtean overlay

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. Chaidh an àireamh tòiseachaidh seo a thaghadh gu neo-riaghailteach agus tha e na bufair 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 ann an dòigh a leigeas le prionnsapalan UI cumanta a bhith a’ cumail eileamaidean le fòcas neach-cleachdaidh no hovered 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 .

HTML agus CSS thairis air JS

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 mar as trice bidh do bhrobhsair a’ toirt seachad tòrr gnìomh dhut.

Is e am prionnsapal seo an API JavaScript den chiad ìre againn a’ cleachdadh databuadhan. 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.

Goireasan

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.

HTML sùbailte

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.

Gnàthasan còd

Bidh Leabhar- iùil Còd (bho cho-chruthaiche Bootstrap, @mdo) a’ clàradh mar a sgrìobhas sinn ar HTML agus CSS thairis air Bootstrap. Tha e a’ sònrachadh stiùiridhean airson cruth coitcheann, easbhaidhean ciall cumanta, òrdughan seilbh is buadhan, agus barrachd.

Bidh sinn a’ cleachdadh Stylelint gus na h-inbhean sin agus barrachd a chuir an gnìomh nar Sass/CSS. Tha an rèiteachadh àbhaisteach Stylelint againn stòr fosgailte agus ri fhaighinn airson daoine eile a chleachdadh agus a leudachadh.

Bidh sinn a’ cleachdadh vnu-jar gus HTML àbhaisteach agus semantach a chuir an gnìomh, a bharrachd air a bhith a’ lorg mhearachdan cumanta.