Hoʻokokoke
E aʻo e pili ana i nā kumu alakaʻi, nā hoʻolālā, a me nā ʻenehana i hoʻohana ʻia no ke kūkulu ʻana a mālama ʻana i ka Bootstrap i hiki iā ʻoe ke hana maʻalahi a hoʻonui iā ʻoe iho.
ʻOiai ʻo nā ʻaoʻao hoʻomaka e hāʻawi i kahi mākaʻikaʻi hoʻomaka o ka papahana a me kāna mea e hāʻawi ai, ua kālele kēia palapala i ke kumu e hana ai mākou i nā mea a mākou e hana ai ma Bootstrap. E wehewehe ana i ko mākou manaʻo no ke kūkulu ʻana ma ka pūnaewele i hiki i nā poʻe ke aʻo mai iā mākou, hāʻawi pū me mākou, a kōkua iā mākou e hoʻomaikaʻi.
E ʻike i kahi mea kani maikaʻi ʻole, a i ʻole hiki ke hana maikaʻi ʻia? E wehe i kahi pilikia —makemake mākou e kūkākūkā pū me ʻoe.
E luʻu mākou i kēlā me kēia o kēia mau mea a puni, akā ma kahi kiʻekiʻe, eia ka mea e alakaʻi ai i kā mākou ala.
- Pono nā ʻāpana e pane a me ka mobile-mua
- Pono e kūkulu ʻia nā ʻāpana me kahi papa kumu a hoʻonui ʻia ma o nā papa hoʻololi
- Pono nā ʻāina ʻāpana e hoʻolohe i ka pālākiō z-index maʻamau
- Inā hiki, makemake i ka hoʻokō HTML a me CSS ma luna o JavaScript
- I ka manawa hiki, e hoʻohana i nā pono hana ma luna o nā ʻano maʻamau
- Inā hiki, e pale i ka hoʻokō ʻana i nā koi HTML koʻikoʻi (nā keiki koho)
Hoʻokumu ʻia nā ʻano pane pane o Bootstrap e pane, kahi ala i kapa ʻia ʻo mobile-first . Hoʻohana mākou i kēia huaʻōlelo i kā mākou docs a ʻae like me ia, akā i kekahi manawa hiki ke ākea loa. ʻOiai ʻaʻole pono nā mea a pau e pane piha i Bootstrap, ʻo kēia ala pane e pili ana i ka hōʻemi ʻana i ka CSS overrides ma ke koi ʻana iā ʻoe e hoʻohui i nā ʻano i ka nui o ka viewport.
Ma kēlā ʻaoʻao o Bootstrap, e ʻike maopopo ʻoe i kēia ma kā mākou mau nīnau media. I ka hapanui o nā hihia, hoʻohana mākou i nā min-widthnīnau e hoʻomaka ana e hoʻopili ma kahi haʻihaʻi kikoʻī a hāpai i nā wahi haʻi kiʻekiʻe. No ka laʻana, .d-nonepili ka a mai min-width: 0ka palena ʻole. Ma ka ʻaoʻao ʻē aʻe, .d-md-nonepili ka a mai ka haʻihaʻi waena a piʻi.
I kekahi manawa e hoʻohana mākou i ka max-widthwā e pono ai ka paʻakikī paʻakikī o kahi mea. I kekahi manawa, ʻoi aku ka maʻalahi o kēia mau overrides e hoʻokō a kākoʻo ma mua o ke kākau hou ʻana i nā hana kumu mai kā mākou mau ʻāpana. Hoʻoikaika mākou e kaupalena i kēia ala, akā e hoʻohana ia i kēlā me kēia manawa.
Ma waho aʻe o kā mākou Reboot, kahi papa hana maʻamau maʻamau o ka polokalamu kele pūnaewele, manaʻo kā mākou mau ʻano āpau e hoʻohana i nā papa ma ke ʻano he koho. ʻO ia ke ʻano o ka hoʻokele ʻana i nā mea koho ʻano (e laʻa, input[type="text"]) a me nā papa makua ʻē aʻe (e laʻa, .parent .child) e hana i nā ʻano kikoʻī i hiki ke hoʻololi maʻalahi.
No laila, pono e kūkulu ʻia nā ʻāpana me kahi papa kumu e hoʻopaʻa ai i nā hui waiwai maʻamau, ʻaʻole e hoʻopau ʻia. No ka laʻana, .btna .btn-primary. Hoʻohana mākou .btnno nā ʻano maʻamau āpau e like me display, padding, a me border-width. A laila, hoʻohana mākou i nā mea hoʻololi e like me .btn-primaryka hoʻohui ʻana i ke kala, ka waihoʻoluʻu ʻaoʻao, ka waihoʻoluʻu palena, etc.
Pono e hoʻohana ʻia nā papa hoʻololi inā nui nā waiwai a i ʻole nā waiwai e hoʻololi ʻia ma nā ʻano like ʻole. ʻAʻole pono nā mea hoʻololi i nā manawa a pau, no laila e mālama pono ʻoe i nā laina o ke code a pale i nā hoʻololi pono ʻole i ka wā e hana ai. ʻO nā hiʻohiʻona maikaʻi o nā mea hoʻololi ko mākou mau papa kala a me nā ʻano nui.
ʻElua mau z-indexunahi ma Bootstrap—nā ʻeleʻele i loko o kahi ʻāpana a uhi ʻia nā ʻāpana.
- Hoʻokumu ʻia kekahi mau ʻāpana i Bootstrap me nā ʻāpana overlapping e pale i nā palena ʻelua me ka hoʻololi ʻole i ka
borderwaiwai. No ka laʻana, nā pūʻulu pihi, pūʻulu hoʻokomo, a me ka pagination. - Hoʻokaʻawale kēia mau ʻāpana i kahi unahi
z-indexmaʻamau o0ka3. 0he paʻamau (hoʻomaka),1ʻo ia:hover,2ʻo:active/.active, a ʻo ,3ʻo ia:focus.- Kūlike kēia ala i kā mākou mau manaʻolana o ka mea hoʻohana kiʻekiʻe loa. Inā nānā ʻia kahi mea, aia ia i ka nānā a ma ka nānā ʻana o ka mea hoʻohana. ʻO nā mea ʻeleu ka lua kiʻekiʻe loa no ka mea hōʻike lākou i ke kūlana. ʻO ka hover ke kolu o ka mea kiʻekiʻe loa no ka mea e hōʻike ana i ka manaʻo o ka mea hoʻohana, akā aneane hiki ke kau ʻia nā mea āpau.
Loaʻa i ka Bootstrap kekahi mau ʻāpana e hana ma ke ʻano he uhi o kekahi ʻano. Hoʻopili kēia, ma ke ʻano o nā mea kiʻekiʻe loa z-index, nā hāʻule iho, nā navbars paʻa a paʻa, nā modals, tooltips, a me nā popovers. Loaʻa i kēia mau ʻāpana ko lākou unahi ponoʻī z-indexe hoʻomaka ana ma 1000. He mea maʻamau kēia helu hoʻomaka a lilo ia i mea pale liʻiliʻi ma waena o kā mākou mau kaila a me nā ʻano maʻamau o kāu papahana.
Hoʻonui iki kēlā me kēia ʻāpana overlay i kona z-indexwaiwai ma ke ʻano e hiki ai i nā loina UI maʻamau ke ʻae i ka mea hoʻohana i ka nānā ʻana a i ʻole nā mea hovered e noho mau i ka ʻike i nā manawa āpau. No ka laʻana, ʻo ka modal ka pale palapala (e laʻa, ʻaʻole hiki iā ʻoe ke hana i kekahi hana ʻē aʻe koe wale no ka hana a ka modal), no laila ke kau nei mākou ma luna o kā mākou navbars.
E aʻo hou e pili ana i kēia ma kā mākou z-indexʻaoʻao hoʻolālā .
Inā hiki, makemake mākou e kākau i ka HTML a me CSS ma luna o JavaScript. Ma keʻano laulā, ʻoi aku ka maikaʻi o ka HTML a me CSS i nā poʻe ʻē aʻe o nā pae ʻike like ʻole. ʻOi aku ka wikiwiki o HTML a me CSS i kāu polokalamu kele pūnaewele ma mua o JavaScript, a ua hāʻawi nui kāu polokalamu kele pūnaewele i nā hana nui no ʻoe.
ʻO kēia kumukānāwai ko mākou JavaScript API papa mua he mau datahiʻohiʻona. ʻAʻole pono ʻoe e kākau kokoke i kekahi JavaScript e hoʻohana i kā mākou JavaScript plugins; akā, kākau HTML. E heluhelu hou aʻe e pili ana i kēia ma kā mākou ʻaoʻao hōʻike JavaScript .
ʻO ka hope, kūkulu kā mākou mau ʻano i nā ʻano kumu o nā mea maʻamau o ka pūnaewele. Inā hiki, makemake mākou e hoʻohana i ka mea a ka polokalamu kele pūnaewele. No ka laʻana, hiki iā ʻoe ke kau i kahi .btnpapa ma kahi o nā mea āpau, akā ʻaʻole hāʻawi ka hapa nui o nā mea waiwai i kahi waiwai semantic a i ʻole nā hana polokalamu kele pūnaewele. No laila, hoʻohana mākou i <button>ka s a me <a>ka s.
Pela no na mea paakiki. ʻOiai hiki iā mākou ke kākau i kā mākou plugin validation form e hoʻohui i nā papa i kahi mea makua e pili ana i ke kūlana o kahi mea hoʻokomo, no laila e ʻae iā mākou e hana i ka ʻōlelo ʻulaʻula, makemake mākou e hoʻohana i nā :valid/ :invalidpseudo-elements e hāʻawi mai kēlā me kēia polokalamu iā mākou.
ʻO nā papa hoʻohana—he mau mea kōkua ma Bootstrap 3—he hoa ikaika i ka hakakā ʻana i ka CSS bloat a me ka maikaʻi ʻole o ka hana ʻaoʻao. ʻO ka papa hoʻohana maʻamau he hoʻokahi, ʻaʻole hiki ke hoʻololi i ka waiwai-waiwai i hōʻike ʻia ma ke ʻano he papa (e laʻa, .d-blockhōʻike display: block;). ʻO kā lākou hoʻopiʻi nui ka wikiwiki o ka hoʻohana ʻana i ke kākau ʻana i ka HTML a me ka kaupalena ʻana i ka nui o ka CSS maʻamau āu e kākau ai.
E pili ana i ka CSS maʻamau, hiki i nā pono hana ke kōkua i ke kaua ʻana i ka hoʻonui ʻana i ka nui o ka faila ma o ka hōʻemi ʻana i kāu mau paʻa waiwai-waiwai maʻamau i nā papa hoʻokahi. Hiki i kēia ke loaʻa ka hopena koʻikoʻi ma kāu mau papahana.
ʻOiai ʻaʻole hiki i nā manawa a pau, ke hoʻāʻo nei mākou e pale aku i ka dogmatic i kā mākou mau koi HTML no nā ʻāpana. No laila, ke nānā aku nei mākou i nā papa hoʻokahi i kā mākou mea koho CSS a hoʻāʻo e pale i nā keiki koho koke ( ~). Hāʻawi kēia iā ʻoe i ka maʻalahi i kāu hoʻokō ʻana a kōkua i ka mālama ʻana i kā mākou CSS i maʻalahi a emi ʻole.