Indlela

Funda mayelana nemigomo eyisiqondiso, amasu, namasu asetshenziswa ukwakha nokunakekela i-Bootstrap ukuze ukwazi ukwenza ngendlela oyifisayo kalula futhi uyinwebe ngokwakho.

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.
• 0iyinto ezenzakalelayo (eyokuqala), 1ithi :hover, 2ngu :active/ .active, futhi , 3ingu :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 ayihleliwe futhi isebenza njengebhafa encane phakathi kwezitayela zethu nezitayela zangokwezifiso zephrojekthi yakho.

Ingxenye ngayinye eyimbondela inyusa z-indexinani layo kancane ngendlela yokuthi izimiso ze-UI ezivamile zivumele izici ezigxilile zomsebenzisi noma ezihambisa phezulu ukuthi 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.

Lesi simiso siyi-JavaScript API yethu yekilasi lokuqala 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.