Indlela

Nakuba amakhasi okuqalisa ehlinzeka ngohambo olusethulo lwephrojekthi kanye nalokho ekunikezayo, lo mbhalo ugxile ekutheni kungani senza izinto esizenzayo ku-Bootstrap. Ichaza ifilosofi yethu yokwakha kuwebhu ukuze abanye bafunde kithi, banikele nathi, futhi usisize sithuthuke.

Uyabona into engezwakali kahle, noma mhlawumbe engenziwa kangcono? Vula udaba— singathanda ukuxoxa nawe ngalo.

Isifinyezo

Sizocwila kulokhu ngakunye kulo lonke, kodwa ezingeni eliphezulu, nakhu okuqondisa indlela yethu yokwenza.

• Izingxenye kufanele ziphendule futhi zihambe kuqala
• Izingxenye kufanele zakhiwe ngesisekelo sekilasi futhi zinwetshwe ngamakilasi okulungisa
• Izifunda zengxenye kufanele zithobele isikali senkomba engu-z evamile
• Noma nini lapho kunokwenzeka, khetha ukusetshenziswa kwe-HTML ne-CSS kune-JavaScript
• Uma kunokwenzeka, sebenzisa izinsiza phezu kwezitayela zangokwezifiso
• Noma nini lapho kungenzeka, gwema ukuphoqelela izimfuneko eziqinile ze-HTML (abakhethi bezingane)

Iyasabela

Izitayela zokuphendula ze-Bootstrap zakhelwe ukuthi ziphendule, indlela evame ukubizwa ngokuthi yi -mobile-first . Sisebenzisa leli gama kumadokhumenti ethu futhi sivumelana kakhulu nalo, kodwa ngezinye izikhathi lingaba banzi kakhulu. Yize kungezona zonke izingxenye okufanele ziphendule ngokuphelele ku-Bootstrap, le ndlela yokusabela imayelana nokunciphisa ukukhipha kwe-CSS ngokukuphusha ukuthi ungeze izitayela njengoba imbobo yokubuka iba nkulu.

Ku-Bootstrap yonkana, uzobona lokhu ngokucacile emibuzweni yethu yemidiya. Ezimweni eziningi, sisebenzisa min-widthimibuzo eqala ukusebenza endaweni ethile yokuphumula futhi idlulele ezindaweni eziphakeme kakhulu. Isibonelo, i-a .d-noneisebenza ukusuka min-width: 0kuye kokungapheli. Ngakolunye uhlangothi, u-a .d-md-noneuyasebenza ukusuka endaweni yokuphumula emaphakathi naphezulu.

Ngezinye izikhathi sizosebenzisa max-widthlapho inkimbinkimbi yengxenye yemvelo ikudinga. Ngezinye izikhathi, lokhu kukhipha kucace ngokusebenza nangokomqondo ukuze kusetshenziswe futhi kusekelwe kunokubhala kabusha ukusebenza okubalulekile okuvela kuzingxenye zethu. Silwela ukunciphisa le ndlela, kodwa sizoyisebenzisa ngezikhathi ezithile.

Amakilasi

Ngaphandle kokuthi Ukuqalisa Kabusha kwethu, ishidi lesitayela lokujwayelekile lesiphequluli esiphambanayo, zonke izitayela zethu zihlose ukusebenzisa amakilasi njengabakhethi. Lokhu kusho ukwehlukana nabakhethi bohlobo (isb, input[type="text"]) kanye namakilasi omzali angaphandle (isb, .parent .child) enza izitayela zicace kakhulu ukuthi zingabhalwa ngaphezulu kalula.

Ngakho-ke, izingxenye kufanele zakhiwe ngesigaba sesisekelo esihlala amapheya avamile, okungafanele akhishwe. Ngokwesibonelo, .btnfuthi .btn-primary. Sisebenzisa .btnkuzo zonke izitayela ezijwayelekile ezifana display, padding, kanye border-width. Sibe sesisebenzisa izilungisi ezifana .btn-primarynokwengeza umbala, umbala wangemuva, umbala womngcele, njll.

Amakilasi okulungisa kufanele asetshenziswe kuphela uma kunezinto eziningi noma amanani azoshintshwa kuzo zonke izinhlobo eziningi. Izilungisi azidingeki ngaso sonke isikhathi, ngakho-ke qiniseka ukuthi empeleni ulondoloza imigqa yekhodi futhi uvimbele ukukhishwa okungadingekile uma uzidala. Izibonelo ezinhle zezilungisi amakilasi ethu ombala wetimu nokuhlukahluka kosayizi.

z-inkomba izikali

Kunezikali ezimbili z-indexku-Bootstrap—izakhi ezingaphakathi kwengxenye nezingxenye zembondela.

Izakhi zengxenye

• Ezinye izingxenye ku-Bootstrap zakhiwe ngezinto ezigqagqene ukuvimbela imingcele ephindwe kabili ngaphandle kokulungisa borderisakhiwo. Isibonelo, amaqembu ezinkinobho, amaqembu okokufaka, nokuhlukanisa amagama.
• Lezi zingxenye zabelana z-indexngesilinganiso esijwayelekile 0sokudlula 3.
• 0kuyinto ezenzakalelayo (eyokuqala), 1ingu- :hover, 2ngu :active/ .active, futhi 3iyi- :focus.
• Le ndlela ihambisana nalokho esikulindele kokubaluleke kakhulu komsebenzisi. Uma i-elementi igxilile, ibonwa futhi ekunakeni komsebenzisi. Ama-elementi asebenzayo asendaweni yesibili ngenxa yokuthi akhombisa isimo. I-Hover ingeyesithathu ngobukhulu ngoba ikhombisa inhloso yomsebenzisi, kodwa cishe noma yini ingahanjiswa phezulu.

Izingxenye zembondela

I-Bootstrap ihlanganisa izingxenye ezimbalwa ezisebenza njengembondela yohlobo oluthile. Lokhu kufaka phakathi, ngokulandelana okuphezulu kakhulu z-index, okwehliswayo, ama-navbar angashintshi futhi anamathelayo, ama-modal, amathiphu wamathuluzi, nama-popover. Lezi zingxenye zinesilinganiso sazo z-indexesiqala ku- 1000. Le nombolo yokuqala ikhethwe ngokungafanele futhi isebenza njengesivimbeli esincane phakathi kwezitayela zethu nezitayela zangokwezifiso zephrojekthi yakho.

Ingxenye ngayinye eyimbondela inyusa inani layo z-indexkancane ngendlela yokuthi izimiso ze-UI ezivamile zivumele izici ezigxilile zomsebenzisi noma ezihambisa phezulu ukuze zihlale zibonakala ngaso sonke isikhathi. Isibonelo, i-modal iwukuvinjwa kwedokhumenti (isb, awukwazi ukuthatha noma yisiphi esinye isenzo ulondoloze isenzo se-modal), ngakho sibeka lokho ngaphezu kwama-navbar ethu.

Funda kabanzi ngalokhu z-indexekhasini lethu lesakhiwo .

I-HTML ne-CSS ngaphezu kwe-JS

Noma nini lapho kunokwenzeka, sikhetha ukubhala i-HTML ne-CSS phezu kwe-JavaScript. Ngokuvamile, i-HTML ne-CSS yanda kakhulu futhi ifinyeleleka kubantu abaningi bawo wonke amazinga okuhlangenwe nakho ahlukene. I-HTML ne-CSS nazo ziyashesha esipheqululini sakho kune-JavaScript, futhi isiphequluli sakho ngokuvamile sikunikeza umsebenzi omningi.

Lo mgomo uyisigaba sethu sokuqala se-JavaScript API esebenzisa dataizibaluli. Awudingi ukubhala cishe noma iyiphi i-JavaScript ukuze usebenzise ama-plugin ethu e-JavaScript; esikhundleni salokho, bhala i-HTML. Funda kabanzi ngalokhu ekhasini lethu lokubuka konke le-JavaScript .

Okokugcina, izitayela zethu zakhela phezu kokuziphatha okuyisisekelo kwezinto ezivamile zewebhu. Noma nini lapho kunokwenzeka, sikhetha ukusebenzisa lokho okunikezwa isiphequluli. Isibonelo, ungabeka .btnikilasi cishe kunoma iyiphi i-elementi, kodwa ama-elementi amaningi awanikezi noma yiliphi inani le-semantic noma ukusebenza kwesiphequluli. Ngakho esikhundleni salokho, sisebenzisa u <button>-s no- <a>s.

Okufanayo kuya ezingxenyeni eziyinkimbinkimbi. Nakuba singase sibhale i-plugin yethu yokuqinisekisa ifomu ukuze sengeze amakilasi entweni yomzali ngokusekelwe esimweni sokungenayo, ngaleyo ndlela kusivumela ukuba senze isitayela sombhalo sithi bomvu, sikhetha ukusebenzisa :valid/ :invalidizakhi-mbumbulu zonke isiphequluli esisinikeza zona.

Izinsiza

Amakilasi ezinsiza—ababengabasizi ku-Bootstrap 3—bangabambisene abanamandla ekulweni nokuqunjelwa kwe-CSS nokusebenza kabi kwekhasi. Isigaba sosizo ngokuvamile siwukumataniswa kwenani lesakhiwo okukodwa, okungaguquleki okuvezwe njengesigaba (isb., .d-blocksimelela display: block;). Isikhalazo sabo esiyinhloko ijubane lokusetshenziswa ngenkathi ubhala i-HTML futhi ukhawulela inani le-CSS yangokwezifiso okufanele uyibhale.

Ngokukhethekile mayelana ne-CSS yangokwezifiso, izinsiza zingasiza ukulwa nokukhulisa usayizi wefayela ngokunciphisa amapheya akho enani lezakhiwo avame ukuphindaphindwa abe amakilasi awodwa. Lokhu kungaba nomthelela omkhulu esikalini kumaphrojekthi akho.

I-HTML eguquguqukayo

Nakuba kungenzeki ngaso sonke isikhathi, silwela ukugwema ukuba negoma ngokweqile ezimfuneko zethu ze-HTML zezingxenye. Ngakho-ke, sigxila emakilasini angawodwa kuzikhethi zethu ze-CSS futhi sizame ukugwema abakhethi bezingane ngokushesha ( >). Lokhu kukunikeza ukuguquguquka okwengeziwe ekusebenziseni kwakho futhi kusiza ukugcina i-CSS yethu ilula futhi ingacacisi kangako.

Izimiso zekhodi

Umhlahlandlela Wekhodi (kusuka kumdali we-Bootstrap, @mdo) ubhala ukuthi siyibhala kanjani i-HTML yethu ne-CSS kuyo yonke i-Bootstrap. Icacisa imihlahlandlela yokufometha okuvamile, okuzenzakalelayo komqondo ojwayelekile, izakhiwo nezibaluli oda, nokuningi.

Sisebenzisa i -Stylint ukuze siphoqelele lawa mazinga nokunye okwengeziwe ku-Sass/CSS yethu. Ukulungiselelwa kwethu kwe-Stylelint ngokwezifiso kuwumthombo ovulekile futhi kuyatholakala ukuze abanye bawusebenzise futhi banwebe.

Sisebenzisa i -vnu-jar ukuze siphoqelele i-HTML evamile nesemantic, kanye nokuthola amaphutha avamile.