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 dapat ganap na tumutugon ang bawat bahagi 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, ang mga bahagi ay dapat na buuin gamit ang isang batayang klase na naglalaman ng mga karaniwang, hindi-to-ma-override na mga pares ng halaga ng ari-arian. Halimbawa, .btnat .btn-primary. Ginagamit namin .btnpara sa lahat ng karaniwang istilo tulad ng display, padding, at border-width. 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 sangkap na 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 isang 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

While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.

Code conventions

Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifies guidelines for general formatting, common sense defaults, property and attribute orders, and more.

We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.

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