Lapitan

Habang nagbibigay ang mga pahina ng pagsisimula ng panimulang paglilibot sa proyekto at kung ano ang inaalok nito, ang dokumentong ito ay nakatuon sa kung bakit namin ginagawa ang mga bagay na ginagawa namin sa Bootstrap. Ipinapaliwanag nito ang aming pilosopiya sa pagbuo sa web upang ang iba ay matuto mula sa amin, mag-ambag sa amin, at matulungan kaming umunlad.

Tingnan ang isang bagay na mukhang hindi tama, o marahil ay maaaring gawin nang mas mahusay? Magbukas ng isyu —gusto naming talakayin ito sa iyo.

Buod

Susuriin namin ang bawat isa sa mga ito nang higit pa sa kabuuan, ngunit sa isang mataas na antas, narito kung ano ang gumagabay sa aming diskarte.

• Ang mga bahagi ay dapat na tumutugon at pang-mobile
• Ang mga bahagi ay dapat na binuo gamit ang isang batayang klase at pinalawig sa pamamagitan ng mga klase ng modifier
• Dapat sundin ng mga bahaging estado ang isang karaniwang sukat ng z-index
• Hangga't maaari, mas gusto ang pagpapatupad ng HTML at CSS kaysa sa JavaScript
• Hangga't maaari, gumamit ng mga utility sa mga custom na istilo
• Hangga't maaari, iwasan ang pagpapatupad ng mga mahigpit na kinakailangan sa HTML (mga pampili ng bata)

Tumutugon

Ang mga istilong tumutugon ng Bootstrap ay binuo upang maging tumutugon, isang diskarte na madalas na tinutukoy bilang mobile-first . Ginagamit namin ang terminong ito sa aming mga doc at higit na sumasang-ayon dito, ngunit kung minsan maaari itong masyadong malawak. Bagama't hindi lahat ng bahagi ay dapat na ganap na tumutugon sa Bootstrap, ang tumutugon na diskarte na ito ay tungkol sa pagbabawas ng mga override ng CSS sa pamamagitan ng pagtulak sa iyong magdagdag ng mga istilo habang lumalaki ang viewport.

Sa buong Bootstrap, makikita mo ito nang malinaw sa aming mga query sa media. Sa karamihan ng mga kaso, gumagamit kami min-widthng mga query na nagsisimulang mag-apply sa isang partikular na breakpoint at dinadala sa mas matataas na breakpoint. Halimbawa, .d-nonenalalapat ang isang mula min-width: 0hanggang sa infinity. Sa kabilang banda, .d-md-nonenalalapat ang isang mula sa katamtamang breakpoint at pataas.

Sa mga oras na gagamitin namin max-widthkapag kailangan ito ng likas na pagiging kumplikado ng isang bahagi. Kung minsan, ang mga override na ito ay mas malinaw sa pagganap at mental na ipatupad at suportahan kaysa sa muling pagsulat ng pangunahing functionality mula sa aming mga bahagi. Sinisikap naming limitahan ang diskarteng ito, ngunit gagamitin namin ito paminsan-minsan.

Mga klase

Bukod sa aming Reboot, isang cross-browser normalization stylesheet, lahat ng aming mga istilo ay naglalayong gumamit ng mga klase bilang mga tagapili. Nangangahulugan ito na umiwas sa mga pumipili ng uri (hal, input[type="text"]) at mga extraneous na klase ng magulang (hal, .parent .child) na ginagawang masyadong partikular ang mga istilo upang madaling ma-override.

Dahil dito, dapat na buuin ang mga bahagi gamit ang isang batayang klase na naglalaman ng mga pares ng halaga ng ari-arian na hindi dapat na-override. Halimbawa, .btnat .btn-primary. Ginagamit namin .btnpara sa lahat ng karaniwang istilo tulad ng display, padding, at border-width. Pagkatapos ay gumagamit kami ng mga modifier tulad .btn-primaryng pagdaragdag ng kulay, kulay ng background, kulay ng hangganan, atbp.

Dapat lang gamitin ang mga klase ng modifier kapag maraming property o value na babaguhin sa maraming variant. Hindi palaging kinakailangan ang mga modifier, kaya siguraduhing talagang nagse-save ka ng mga linya ng code at pinipigilan ang mga hindi kinakailangang override kapag ginagawa ang mga ito. Ang magagandang halimbawa ng mga modifier ay ang aming mga klase ng kulay ng tema at mga variant ng laki.

z-index na kaliskis

Mayroong dalawang z-indexsukat sa Bootstrap—mga elemento sa loob ng isang bahagi at mga bahagi ng overlay.

Mga elemento ng sangkap

• Ang ilang bahagi sa Bootstrap ay binuo na may magkakapatong na mga elemento upang maiwasan ang mga double border nang hindi binabago ang borderproperty. Halimbawa, mga pangkat ng button, pangkat ng pag-input, at pagination.
• Ang mga bahaging ito ay nagbabahagi ng karaniwang z-indexsukat ng 0through 3.
• 0ay default (inisyal), 1ay :hover, 2ay :active/ .active, at 3ay :focus.
• Ang diskarte na ito ay tumutugma sa aming mga inaasahan ng pinakamataas na priyoridad ng user. Kung ang isang elemento ay nakatuon, ito ay nakikita at nasa atensyon ng gumagamit. Ang mga aktibong elemento ay pangalawa sa pinakamataas dahil ang mga ito ay nagpapahiwatig ng estado. Ang hover ay pangatlo sa pinakamataas dahil ito ay nagpapahiwatig ng layunin ng user, ngunit halos anumang bagay ay maaaring i-hover.

Mga bahagi ng overlay

Kasama sa Bootstrap ang ilang bahagi na gumagana bilang isang overlay ng ilang uri. Kabilang dito, sa pagkakasunud-sunod ng pinakamataas na z-index, dropdown, fixed at sticky navbars, modals, tooltips, at popover. Ang mga bahaging ito ay may sariling z-indexsukat na nagsisimula sa 1000. Ang panimulang numero na ito ay pinili nang basta-basta at nagsisilbing isang maliit na buffer sa pagitan ng aming mga istilo at mga custom na istilo ng iyong proyekto.

Ang bawat bahagi ng overlay z-indexay bahagyang tumataas ang halaga nito sa paraang nagbibigay-daan ang mga karaniwang prinsipyo ng UI na nakatutok sa user o naka-hover na mga elemento na manatiling nakikita sa lahat ng oras. Halimbawa, ang modal ay pagharang ng dokumento (hal., hindi ka makakagawa ng anumang iba pang pagkilos maliban sa pagkilos ng modal), kaya inilalagay namin iyon sa itaas ng aming mga navbar.

Matuto nang higit pa tungkol dito sa aming z-indexpahina ng layout .

HTML at CSS sa JS

Hangga't maaari, mas gusto naming magsulat ng HTML at CSS kaysa sa JavaScript. Sa pangkalahatan, mas marami ang HTML at CSS at naa-access ng mas maraming tao sa lahat ng iba't ibang antas ng karanasan. Ang HTML at CSS ay mas mabilis din sa iyong browser kaysa sa JavaScript, at ang iyong browser sa pangkalahatan ay nagbibigay ng maraming functionality para sa iyo.

Ang prinsipyong ito ay ang aming first-class na JavaScript API gamit ang datamga katangian. Hindi mo kailangang magsulat ng halos anumang JavaScript upang magamit ang aming mga plugin ng JavaScript; sa halip, sumulat ng HTML. Magbasa nang higit pa tungkol dito sa aming pahina ng pangkalahatang-ideya ng JavaScript .

Panghuli, ang aming mga istilo ay bumubuo sa mga pangunahing gawi ng mga karaniwang elemento ng web. Hangga't maaari, mas gusto naming gamitin ang ibinibigay ng browser. Halimbawa, maaari kang maglagay ng .btnklase sa halos anumang elemento, ngunit karamihan sa mga elemento ay hindi nagbibigay ng anumang semantic value o functionality ng browser. Kaya sa halip, ginagamit namin ang <button>s at <a>s.

Ang parehong napupunta para sa mas kumplikadong mga bahagi. Bagama't maaari kaming sumulat ng sarili naming plugin sa pagpapatunay ng form upang magdagdag ng mga klase sa isang elemento ng magulang batay sa estado ng isang input, sa gayon ay nagbibigay-daan sa amin na i-istilo ang teksto na nagsasabing pula, mas gusto naming gamitin ang :valid/ :invalidpseudo-element na ibinibigay sa amin ng bawat browser.

Mga utility

Ang mga utility class—dating mga katulong sa Bootstrap 3—ay isang makapangyarihang kaalyado sa paglaban sa CSS bloat at mahinang performance ng page. Ang isang klase ng utility ay karaniwang isang solong, hindi nababagong pagpapares ng halaga ng ari-arian na ipinahayag bilang isang klase (hal., .d-blockkumakatawan sa display: block;). Ang kanilang pangunahing apela ay ang bilis ng paggamit habang nagsusulat ng HTML at nililimitahan ang dami ng custom na CSS na kailangan mong isulat.

Partikular tungkol sa custom na CSS, makakatulong ang mga utility na labanan ang pagtaas ng laki ng file sa pamamagitan ng pagbawas sa iyong pinakakaraniwang paulit-ulit na mga pares ng halaga ng ari-arian sa mga solong klase. Maaari itong magkaroon ng malaking epekto sa iyong mga proyekto.

Flexible na HTML

Bagama't hindi laging posible, sinisikap naming maiwasan ang pagiging masyadong dogmatiko sa aming mga kinakailangan sa HTML para sa mga bahagi. Kaya, tumutuon kami sa mga solong klase sa aming mga tagapili ng CSS at sinisikap na iwasan ang mga kagyat na tagapili ng mga bata ( >). Nagbibigay ito sa iyo ng higit na kakayahang umangkop sa iyong pagpapatupad at nakakatulong na panatilihing mas simple at hindi gaanong partikular ang aming CSS.

Mga code convention

Ang Code Guide (mula sa Bootstrap co-creator, @mdo) ay nagdodokumento kung paano namin isinusulat ang aming HTML at CSS sa Bootstrap. Tinutukoy nito ang mga alituntunin para sa pangkalahatang pag-format, mga default ng sentido komun, mga order ng property at attribute, at higit pa.

Ginagamit namin ang Stylelint para ipatupad ang mga pamantayang ito at higit pa sa aming Sass/CSS. Ang aming custom na Stylelint config ay open source at available para magamit at palawigin ng iba.

Gumagamit kami ng vnu-jar upang ipatupad ang standard at semantic na HTML, pati na rin ang pag-detect ng mga karaniwang error.