Indlela

Ngelixa amaphepha okuqalisa abonelela ngotyelelo lwentshayelelo yeprojekthi kunye nento ebonelela ngayo, olu xwebhu lujolise ekubeni kutheni sisenza izinto esizenzayo kwiBootstrap. Icacisa ifilosofi yethu ekwakheni kwiwebhu ukuze abanye bafunde kuthi, babe negalelo nathi, kwaye basincede siphucule.

Uyabona into engavakali kakuhle, okanye mhlawumbi inokwenziwa ngcono? Vula umba othile— singathanda ukuwuxubusha nawe.

Isishwankathelo

Siza kuntywila kwinto nganye kwezi ngakumbi kulo lonke, kodwa kwinqanaba eliphezulu, nantsi into ekhokela indlela yethu.

• Amacandelo kufuneka aphendule kwaye ahamba-phambili
• Amacandelo kufuneka akhiwe ngodidi olusisiseko kwaye andise ngeeklasi zesilungisi
• Amacandelo kufuneka athobele isikali esiqhelekileyo sika-z-index
• Nanini na kunokwenzeka, khetha ukuphunyezwa kweHTML kunye neCSS ngaphezu kweJavaScript
• Nanini na kunokwenzeka, sebenzisa izinto eziluncedo ngaphezu kwezitayile eziqhelekileyo
• Nanini na kunokwenzeka, kuphephe ukunyanzelisa iimfuno ezingqongqo zeHTML (abakhethi babantwana)

Ukusabela

Izitayile zokuphendula zeBootstrap zakhelwe ukusabela, indlela edla ngokubizwa ngokuba yi -mobile-first . Sisebenzisa eli gama kumaxwebhu ethu kwaye sivumelana kakhulu nalo, kodwa ngamanye amaxesha linokuba banzi kakhulu. Ngelixa ingelilo lonke icandelo ekufuneka liphendule ngokupheleleyo kwiBootstrap, le ndlela yokuphendula imalunga nokunciphisa i-CSS ngaphezulu ngokukutyhala ukuba wongeze izitayile njengoko indawo yokujonga isiya iba nkulu.

Kuyo yonke iBootstrap, uyakubona oku ngokucacileyo kwimibuzo yethu yemithombo yeendaba. Kwiimeko ezininzi, sisebenzisa min-widthimibuzo eqala ukusebenza kwindawo ethile yekhefu kwaye iqhubele phambili kwiindawo eziphezulu. Umzekelo, i-a .d-noneisebenza ukusuka min-width: 0kwi-infinity. Kwelinye icala, i-a .d-md-noneisebenza ukusuka kwindawo yokuphumla ephakathi ukuya phezulu.

Ngamanye amaxesha siya kusebenzisa max-widthxa ukuntsokotha kwendalo kwecandelo kulifuna. Ngamanye amaxesha, ezi zinto zigqithisiweyo zisebenza kwaye zicacile ngokwasengqondweni ukuphumeza kunye nenkxaso kunokubhala kwakhona umsebenzi ongundoqo kumacandelo ethu. Sizama ukunciphisa le ndlela, kodwa siya kuyisebenzisa amaxesha ngamaxesha.

Iiklasi

Ngaphandle kweReboot yethu, iphepha lesitayile esinqumlezayo, zonke izitayile zethu zijolise ekusebenziseni iiklasi njengabakhethi. Oku kuthetha ukukhokela ngokucacileyo kubakhethi bodidi (umzekelo, input[type="text"]) kunye neeklasi zabazali ezingaphandle (umzekelo, .parent .child) ezenza izimbo zicace kakhulu ukuba zingabhalwa ngaphezulu ngokulula.

Ngokunjalo, amacandelo kufuneka akhiwe ngodidi olusisiseko olunezindlu eziqhelekileyo, ezingamele zigqitywe ngababini bexabiso lepropathi. Ngokomzekelo, .btnkwaye .btn-primary. Sisebenzisa .btnkuzo zonke izimbo eziqhelekileyo ezifana display, paddingkunye border-width. Emva koko sisebenzisa izilungisi ezithanda .btn-primaryukongeza umbala, umbala ongasemva, umbala womda, njl.

Iiklasi zesilungisi kufuneka zisetyenziswe kuphela xa kukho iipropati ezininzi okanye amaxabiso aza kutshintshwa kuzo zonke iintlobo ezahlukeneyo. Izilungisi azisoloko ziyimfuneko, ke qiniseka ukuba ngokwenene ugcina imigca yekhowudi kwaye unqanda ukugqwesa okungeyomfuneko xa uyidala. Imizekelo emihle yezilungisi ziiklasi zethu zemibala yomxholo kunye nokwahluka kobukhulu.

z-izikali zesalathisi

Kukho z-indexizikali ezibini kwi-Bootstrap-izinto ngaphakathi kwecandelo kunye nezinto ezingaphezulu.

Izinto zecandelo

• Amanye amacandelo kwiBootstrap akhiwe ngezinto ezidlulanayo ukukhusela imida ephindwe kabini ngaphandle kokuguqula borderipropati. Umzekelo, amaqela amaqhosha, amaqela egalelo, kunye nokwakhiwa kwamaphepha.
• z-indexLa macandelo abelana ngomlinganiselo oqhelekileyo we- 0through 3.
• 0ayigqibekanga (eyokuqala), 1yi :hover, 2ngu :active/ .active, kwaye 3yi :focus.
• Le ndlela ihambelana nolindelo lwethu oluphezulu lwabasebenzisi. Ukuba into igxininisiwe, ibonwa kwaye ijongwe ngumsebenzisi. Izinto ezisebenzayo zezesibini phezulu kuba zibonisa imeko. IHover yeyesithathu ephezulu kuba ibonisa injongo yomsebenzisi, kodwa phantse nantoni na inokushukunyiswa.

Amacandelo angaphezulu

I-Bootstrap ibandakanya amacandelo amaninzi asebenza njengesigqubuthelo sohlobo oluthile. Oku kuquka, ngokolandelelwano z-indexlwezona ziphezulu , ukwehla, ii-navbar ezizinzileyo nezincangathi, iimodyuli, izixhobo zokusebenza, kunye neepopovers. La malungu anomlinganiselo wawo z-indexoqala ku 1000. Eli nani lokuqala likhethwe ngaphandle kwesizathu kwaye lisebenza njengesithinteli esincinci phakathi kwezitayile zethu kunye nezimbo zeprojekthi yakho.

Icandelo ngalinye z-indexelingaphezulu lilonyusa ixabiso lalo kancinane ngendlela yokuba imigaqo ye-UI eqhelekileyo ivumela izinto ezigxilwe kumsebenzisi okanye ezihovered ukuba zihlale zibonwa ngamaxesha onke. Umzekelo, imodal luthintelo loxwebhu (umzekelo, awukwazi ukuthatha naliphi na elinye inyathelo gcina isenzo semodali), ngoko sibeka ngaphezulu kwe navbar zethu.

Funda ngakumbi malunga noku kwiphepha lethu z-indexloyilo .

I-HTML kunye neCSS ngaphezulu kweJS

Nanini na kunokwenzeka, sikhetha ukubhala iHTML kunye neCSS ngaphezulu kweJavaScript. Ngokubanzi, i-HTML kunye ne-CSS zixhaphakile kwaye zifikeleleka kubantu abaninzi kuwo onke amanqanaba amava ahlukeneyo. I-HTML kunye neCSS zikwakhawuleza kwibrawuza yakho kuneJavaScript, kwaye isikhangeli sakho sibonelela ngomsebenzi omkhulu kuwe.

Lo mgaqo yiJavaScript API yethu yodidi lokuqala usebenzisa dataiimpawu. Awudingi ukubhala phantse nayiphi na iJavaScript ukusebenzisa iiplagi zethu zeJavaScript; endaweni yoko, bhala iHTML. Funda ngakumbi malunga noku kwiphepha lethu lokujonga iJavaScript .

Okokugqibela, izitayile zethu zakhela kwiindlela zokuziphatha zezinto eziqhelekileyo zewebhu. Nanini na xa kunokwenzeka, sikhetha ukusebenzisa into ebonelelwa ngumkhangeli zincwadi. Umzekelo, ungabeka .btniklasi phantse kuyo nayiphi na into, kodwa uninzi lweziqalelo aluboneleli ngexabiso lesemantic okanye ukusebenza kwesikhangeli. Ngoko endaweni yoko, sisebenzisa u <button>-s kunye no- <a>s.

Okufanayo kuya kumacandelo anzima ngakumbi. Ngelixa sinokubhala eyethu iplagi yokuqinisekisa ifom ukongeza iiklasi kwinto yomzali esekwe kwimeko yegalelo, ngaloo ndlela kusivumela ukuba sibhale isitayile sokubhaliweyo sithi bomvu, sikhetha ukusebenzisa i :valid/ :invalidpseudo-elements sonke isikhangeli esisibonelela ngaso.

Izinto eziluncedo

Iiklasi eziluncedo-ababefudula bengabancedi kwi-Bootstrap 3-bangumhlobo onamandla ekulweni i-CSS bloat kunye nokusebenza kakubi kwephepha. Udidi olusebenzisekayo lukholisa ukuba yinto enye, engenakuguquleka yexabiso lepropathi edityaniswe njengodidi (umzekelo, .d-blockimele display: block;). Isibheno sabo esiphambili sisantya sokusetyenziswa ngelixa ubhala i-HTML kunye nokunciphisa inani le-CSS yesiko ekufuneka uyibhale.

Ngokukodwa malunga ne-CSS yesiko, izinto eziluncedo zinokunceda ukulwa nokwandisa ubungakanani befayile ngokunciphisa izibini zexabiso lepropathi eliqhele ukuphindwa kwiiklasi enye. Oku kunokuba nefuthe elimangalisayo kwisikali kwiiprojekthi zakho.

I-HTML eguquguqukayo

Nangona kungasoloko kusenzeka, sizama ukunqanda ukuba ngqongqo ngokugqithisileyo kwiimfuno zethu zeHTML kumacandelo. Ngaloo ndlela, sigxininisa kwiiklasi ezingatshatanga kubakhethi bethu beCSS kwaye sizame ukuphepha abakhethi babantwana ngokukhawuleza ( >). Oku kukunika ukuguquguquka ngakumbi ekuphumezeni kwakho kwaye kunceda ukugcina i-CSS yethu ilula kwaye ingacaciswanga kangako.

Imigaqo yekhowudi

IsiKhokelo seKhowudi (esisuka kumdali weBootstrap, @mdo) sibhala indlela esibhala ngayo iHTML kunye neCSS kwiBootstrap. Ixela izikhokelo zokufomatha jikelele, ukungagqibeki kwengqiqo, ipropati kunye nemiyalelo yophawu, kunye nokunye.

Sisebenzisa iStylelint ukunyanzelisa le migangatho nangaphezulu kwiSass/CSS yethu. Ulungelelwaniso lwethu lwesiko lweStylelint ngumthombo ovulekileyo kwaye uyafumaneka ukuba abanye bawusebenzise kwaye bandise.

Sisebenzisa i -vnu-jar ukunyanzelisa i-HTML esemgangathweni kunye nesemantic, kunye nokufumanisa iimpazamo eziqhelekileyo.