Njira
Phunzirani za mfundo zotsogola, njira, ndi njira zomwe zimagwiritsidwa ntchito pomanga ndi kukonza Bootstrap kuti mutha kusintha ndikuwonjezera nokha.
Ngakhale masamba oyambira amapereka ulendo woyambira wa polojekitiyi ndi zomwe ikupereka, chikalatachi chikugogomezera chifukwa chomwe timachitira zomwe timachita mu Bootstrap. Imalongosola nzeru zathu zomanga pa intaneti kuti ena aphunzire kuchokera kwa ife, athandizire nafe, komanso kutithandiza kuchita bwino.
Mukuwona china chake chomwe sichikumveka bwino, kapena mwina chingachitike bwinoko? Tsegulani nkhani - tikufuna kukambirana nanu.
Tilowa mu chilichonse mwa izi, koma pamlingo wapamwamba, izi ndi zomwe zikutitsogolera.
- Zida ziyenera kukhala zomvera komanso zoyambira mafoni
- Zida ziyenera kumangidwa ndi gulu loyambira ndikuwonjezedwa kudzera m'makalasi osintha
- Magawo akuyenera kutsata sikelo yofanana ndi z-index
- Ngati n'kotheka, sankhani kukhazikitsa HTML ndi CSS pa JavaScript
- Ngati n'kotheka, gwiritsani ntchito zida zogwiritsira ntchito pamayendedwe achikhalidwe
- Ngati n'kotheka, pewani kukakamiza HTML zofunika (zosankha ana)
Masitayilo oyankha a Bootstrap amapangidwa kuti azimvera, njira yomwe nthawi zambiri imatchedwa mobile-first . Timagwiritsa ntchito mawuwa m'mabuku athu ndipo timagwirizana nawo, koma nthawi zina amatha kukhala otakata kwambiri. Ngakhale kuti sizinthu zonse zomwe ziyenera kumvera mu Bootstrap, njira yoyankhirayi ili pafupi kuchepetsa CSS kupitilira ndikukankhira kuti muwonjezere masitayelo pomwe mawonedwe amakula.
Kudera lonse la Bootstrap, mudzawona izi momveka bwino pamafunso athu azama media. Nthawi zambiri, timagwiritsa ntchito min-widthmafunso omwe amayamba kugwira ntchito pamalo enaake ndipo amatha kudutsa m'malo okwera kwambiri. Mwachitsanzo, a .d-noneimagwira ntchito kuchokera min-width: 0ku infinity. Kumbali ina, a .d-md-noneimagwira ntchito kuchokera pakatikati pa breakpoint ndi mmwamba.
Nthawi zina tidzagwiritsa ntchito max-widthpamene chigawo china chikufunika. Nthawi zina, zotsalirazi zimakhala zomveka bwino komanso zomveka bwino kuti zitheke komanso kuthandizira kusiyana ndi kulembanso magwiridwe antchito kuchokera kuzinthu zathu. Timayesetsa kuchepetsa njira iyi, koma tidzagwiritsa ntchito nthawi ndi nthawi.
Kupatula pa Reboot yathu, tsamba losinthira osatsegula, masitayilo athu onse amafuna kugwiritsa ntchito makalasi ngati osankha. Izi zikutanthauza kupewa kusankha mitundu (monga, input[type="text"]) ndi makalasi a makolo akunja (mwachitsanzo, .parent .child) omwe amapanga masitayelo achindunji kwambiri kuti asinthe mosavuta.
Chifukwa chake, zida ziyenera kumangidwa ndi kalasi yoyambira yomwe imakhala yofanana, yomwe siyenera kunyamulidwa pamtengo wamtengo wapatali. Mwachitsanzo, .btnndi .btn-primary. Timagwiritsa ntchito .btnmasitayelo onse wamba monga display, padding, ndi border-width. Kenako timagwiritsa ntchito zosintha monga .btn-primarykuwonjezera mtundu, mtundu wakumbuyo, mtundu wamalire, ndi zina.
Makalasi osinthira akuyenera kugwiritsidwa ntchito pokhapokha pali zinthu zingapo kapena makonda oti asinthidwe pamitundu ingapo. Zosintha sizofunikira nthawi zonse, chifukwa chake onetsetsani kuti mukusunga mizere yamakhodi ndikupewa zolembedwa zosafunikira pozipanga. Zitsanzo zabwino za zosintha ndi makalasi athu amitundu yamutu ndi mitundu yosiyanasiyana.
Pali z-indexmasikelo awiri mu Bootstrap-zinthu zomwe zili mkati mwa chigawocho ndi zigawo zokutira.
- Zida zina mu Bootstrap zimamangidwa ndi zinthu zomwe zimadutsana kuti ziteteze malire awiri popanda kusintha
bordermalo. Mwachitsanzo, magulu a mabatani, magulu olowetsa, ndi ma pagination. - Zigawozi zimagawana mulingo wokhazikika
z-indexwa0kupyola3. 0ndizosakhazikika (zoyamba),1ndi:hover,2ndi:active/.active, ndi ,3ndi:focus.- Njirayi ikufanana ndi zomwe timayembekezera kuti zikhale zofunika kwambiri kwa ogwiritsa ntchito. Ngati chinthu chili cholunjika, chimayang'aniridwa ndi wogwiritsa ntchito. Zinthu zogwira ntchito ndi zachiwiri kwapamwamba chifukwa zimawonetsa dziko. Hover ndi yachitatu kwambiri chifukwa ikuwonetsa cholinga cha ogwiritsa ntchito, koma pafupifupi chilichonse chimatha kugwedezeka.
Bootstrap imaphatikizapo zigawo zingapo zomwe zimagwira ntchito ngati zokutira zamtundu wina. Izi zikuphatikiza, mu dongosolo lapamwamba kwambiri z-index, zotsika, zokhazikika komanso zomata, ma modal, zida, ndi ma popover. Zigawozi zili ndi z-indexsikelo yake yomwe imayambira pa 1000. Nambala yoyambirayi ndi yachisawawa ndipo imakhala ngati chotchingira chaching'ono pakati pa masitayelo athu ndi masitayelo a polojekiti yanu.
Chigawo chilichonse chounikira chimawonjezera z-indexmtengo wake pang'ono kuti mfundo zodziwika bwino za UI zimalola kuti zinthu zomwe zimayang'aniridwa ndi ogwiritsa ntchito ziziwoneka nthawi zonse. Mwachitsanzo, modal ndi kutsekereza zikalata (mwachitsanzo, simungathe kuchita china chilichonse kupatula zomwe ma modal achita), ndiye timayika izi pamwamba pa navbar.
Dziwani zambiri za izi z-indexpatsamba lathu la masanjidwe .
Ngati n'kotheka, timakonda kulemba HTML ndi CSS pa JavaScript. Nthawi zambiri, HTML ndi CSS ndizochulukirapo komanso zopezeka kwa anthu ambiri amitundu yosiyanasiyana. Ma HTML ndi CSS amathamanganso pa msakatuli wanu kuposa JavaScript, ndipo msakatuli wanu wamkulu amakupatsirani magwiridwe antchito ambiri.
Mfundo iyi ndi gawo lathu loyamba la JavaScript API ndi datamawonekedwe. Simufunikanso kulemba JavaScript iliyonse kuti mugwiritse ntchito mapulagini athu a JavaScript; m'malo mwake, lembani HTML. Werengani zambiri za izi patsamba lathu lachidule la JavaScript .
Pomaliza, masitayelo athu amamanga pamakhalidwe ofunikira azinthu zodziwika bwino pa intaneti. Ngati n'kotheka, timakonda kugwiritsa ntchito zomwe msakatuli amapereka. Mwachitsanzo, mutha kuyika .btnkalasi pachinthu chilichonse, koma zinthu zambiri sizipereka phindu lililonse kapena magwiridwe antchito asakatuli. Chifukwa chake, timagwiritsa ntchito <button>s ndi <a>s.
Zomwezo zimapitanso pazinthu zovuta kwambiri. Ngakhale titha kulemba pulogalamu yathu yotsimikizira kuti tiwonjezere makalasi kuzinthu za makolo kutengera momwe zalembedwera, kutero kutilola kuti tilembe mawuwo kuti ofiira, timakonda kugwiritsa ntchito :valid/ :invalidpseudo-elements msakatuli aliyense amatipatsa.
Makalasi othandiza - omwe kale anali othandizira ku Bootstrap 3 - ndi othandiza kwambiri polimbana ndi kuphulika kwa CSS komanso kusachita bwino kwamasamba. Gulu lothandizira nthawi zambiri limakhala gulu limodzi, losasinthika la mtengo wamtengo wapatali lomwe limawonetsedwa ngati gulu (mwachitsanzo, .d-blockkuyimira display: block;). Chofunikira chawo chachikulu ndikufulumira kugwiritsa ntchito polemba HTML ndikuchepetsa kuchuluka kwa CSS yomwe muyenera kulemba.
Makamaka pankhani ya CSS, zida zothandizira zitha kuthandizira kukulitsa kukula kwa mafayilo pochepetsa mawiri awiri amtengo wapanyumba kukhala makalasi amodzi. Izi zitha kukhala ndi zotsatira zazikulu pama projekiti anu.
Ngakhale sizotheka nthawi zonse, timayesetsa kupewa kukhala oumirira mopitilira muyeso pazofunikira zathu za HTML pazigawo. Chifukwa chake, timayang'ana kwambiri makalasi amodzi mwa osankhidwa athu a CSS ndikuyesera kupewa osankha ana omwe amasankha ( ~). Izi zimakupatsani kusinthasintha pakukhazikitsa kwanu ndikuthandiza kuti CSS yathu ikhale yosavuta komanso yocheperako.