Njira

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.

Chidule

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)

Womvera

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.

Maphunziro

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.

z-index mamba

Pali z-indexmasikelo awiri mu Bootstrap-zinthu zomwe zili mkati mwa chigawocho ndi zigawo zokutira.

chigawo zinthu

• 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-indexwa 0kupyola 3.
• 0ndizosakhazikika (zoyamba), 1ndi :hover, 2ndi :active/ .active, ndipo 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.

Zigawo zokutira

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 yoyambira iyi idasankhidwa mosasamala ndipo imakhala ngati chitetezo 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 zoyang'ana kwambiri kapena zosunthika 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 .

HTML ndi CSS pa JS

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 amakupatsirani magwiridwe antchito ambiri.

Mfundo iyi ndi JavaScript API yathu yoyamba yogwiritsira ntchito datamakhalidwe. 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.

Zothandizira

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.

HTML yosinthika

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.

Misonkhano yamakodi

Code Guide (kuchokera kwa Bootstrap co-creator, @mdo) imalemba momwe timalembera HTML yathu ndi CSS kudutsa Bootstrap. Imatchulanso zitsogozo zamasanjidwe wamba, kusasintha kwanzeru, kuyitanitsa katundu ndi mawonekedwe, ndi zina zambiri.

Timagwiritsa ntchito Stylelint kulimbikitsa izi ndi zina mu Sass/CSS yathu. Kusintha kwathu kwa Stylelint ndikotsegula ndipo kulipo kuti ena agwiritse ntchito ndikukulitsa.

Timagwiritsa ntchito vnu-jar kuti tigwiritse ntchito HTML yokhazikika komanso yodziwika bwino, komanso kuzindikira zolakwika zomwe wamba.