Hoʻokokoke

ʻ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, pili 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ā mea ʻē aʻ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.

Hōʻuluʻulu manaʻo

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)

Pane

Hoʻokumu ʻia nā ʻano pane pane o Bootstrap e pane, kahi ala i kapa pinepine ʻ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.

Nā papa

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-waiwai maʻamau. 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 wale ʻ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 ʻ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.

nā unahi huahelu-z

ʻElua mau z-indexunahi ma Bootstrap—nā ʻeleʻele i loko o kahi ʻāpana a uhi ʻia nā ʻāpana.

Nā mea ʻā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 o 0ka 3.
• 0he paʻamau (hoʻomaka), 1ʻo :hover, 2ʻo :active/ .active, a 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.

ʻO nā ʻāpana uhi

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ā navbar paʻa a paʻa, nā modals, nā mea hana a me nā popovers. Loaʻa i kēia mau ʻāpana ko lākou unahi ponoʻī z-indexe hoʻomaka ana ma 1000. Ua koho wale ʻia kēia helu hoʻomaka a lilo i mea pale liʻiliʻi ma waena o kā mākou 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 nā mea hoʻohana i ka nānā ʻana a i ʻole nā ​​​​hovered element e mau i ka ʻike i nā manawa āpau. No ka laʻana, ʻo ke 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ā .

HTML a me CSS ma luna o JS

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 ʻo kāu polokalamu kele pūnaewele e hāʻawi nui i nā hana no ʻoe.

ʻO kēia kumu kumu kā mākou JavaScript API papa mua me ka hoʻohana ʻana i nā ʻano data. ʻ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 nā mea a ka polokalamu kele pūnaewele. No ka laʻana, hiki iā ʻoe ke kau i kahi .btnpapa ma kahi kokoke i nā mea āpau, akā ʻaʻole hāʻawi ka hapa nui o nā mea 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.

Nā pono hana

ʻ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.

HTML hikiwawe

ʻ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.

Nā kuʻikahi code

Nā palapala alakaʻi Code (mai Bootstrap co-creator, @mdo) pehea mākou e kākau ai i kā mākou HTML a me CSS ma o Bootstrap. Hōʻike ia i nā alakaʻi no ka hoʻopololei maʻamau, nā kuhi hewa, nā kauoha waiwai a me nā hiʻohiʻona, a me nā mea hou aku.

Hoʻohana mākou i Stylelint no ka hoʻokō ʻana i kēia mau kūlana a me nā mea hou aʻe i kā mākou Sass/CSS. ʻO kā mākou stylelint config he kumu wehe a loaʻa i nā poʻe ʻē aʻe e hoʻohana a hoʻonui.

Hoʻohana mākou i ka vnu-jar e hoʻokō i ka HTML maʻamau a me ka semantic, a me ka ʻike ʻana i nā hewa maʻamau.