Approċċ
Tgħallem dwar il-prinċipji ta' gwida, l-istrateġiji u t-tekniki użati biex tibni u żżomm Bootstrap sabiex tkun tista' tippersonalizzaha u testendiha lilek innifsek aktar faċilment.
Filwaqt li l-paġni tal-bidu jipprovdu dawra introduttorja tal-proġett u dak li joffri, dan id-dokument jiffoka fuq għaliex nagħmlu l-affarijiet li nagħmlu f'Bootstrap. Jispjega l-filosofija tagħna biex nibnu fuq il-web sabiex oħrajn ikunu jistgħu jitgħallmu minna, jikkontribwixxu magħna, u jgħinuna ntejbu.
Ara xi ħaġa li ma tidhirx sew, jew forsi tista’ ssir aħjar? Iftaħ kwistjoni— nixtiequ niddiskutuha miegħek.
Aħna ser ngħaddu f'kull wieħed minn dawn aktar tul, iżda f'livell għoli, hawn hu dak li jiggwida l-approċċ tagħna.
- Il-komponenti għandhom ikunu responsivi u l-ewwel mobbli
- Il-komponenti għandhom jinbnew bi klassi bażi u estiżi permezz ta' klassijiet ta' modifikatur
- L-istati tal-komponenti għandhom jobdu skala ta' indiċi z komuni
- Kull meta jkun possibbli, tippreferi implimentazzjoni HTML u CSS fuq JavaScript
- Kull meta jkun possibbli, uża utilitajiet fuq stili tad-dwana
- Kull meta jkun possibbli, evita li tinforza rekwiżiti HTML stretti (seletturi tat-tfal)
L-istili responsivi ta' Bootstrap huma mibnija biex ikunu responsivi, approċċ li ħafna drabi jissejjaħ mobile-first . Aħna nużaw dan it-terminu fid-doks tagħna u fil-biċċa l-kbira naqblu miegħu, iżda xi drabi jista 'jkun wiesa' wisq. Filwaqt li mhux kull komponent irid ikun kompletament responsiv f'Bootstrap, dan l-approċċ responsiv huwa dwar it-tnaqqis tal-overrides tas-CSS billi jimbottek biex iżżid stili hekk kif il-vetrina ssir akbar.
Madwar Bootstrap, se tara dan bl-aktar mod ċar fil-mistoqsijiet tal-midja tagħna. Fil-biċċa l-kbira tal-każijiet, nużaw min-widthmistoqsijiet li jibdew japplikaw f'punt ta' waqfien speċifiku u jġorru l-punti ta' waqfien ogħla. Pereżempju, a .d-nonetapplika minn min-width: 0sa infinità. Min-naħa l-oħra, a .d-md-nonetapplika mill-breakpoint medju u 'l fuq.
Xi drabi aħna ser nużaw max-widthmeta l-kumplessità inerenti ta 'komponent teħtieġ dan. Xi drabi, dawn l-overrides huma funzjonalment u mentalment aktar ċari biex jimplimentaw u jappoġġaw milli kitba mill-ġdid il-funzjonalità ewlenija mill-komponenti tagħna. Aħna nistinkaw biex nillimitaw dan l-approċċ, iżda se nużawh minn żmien għal żmien.
Minbarra l-Reboot tagħna, stil ta' normalizzazzjoni bejn il-browser, l-istili kollha tagħna għandhom l-għan li jużaw il-klassijiet bħala seletturi. Dan ifisser li wieħed imexxi 'l bogħod mis-seletturi tat-tip (eż. input[type="text"]) u klassijiet parentali estranji (eż. .parent .child) li jagħmlu stili wisq speċifiċi biex jingħelbu faċilment.
Bħala tali, il-komponenti għandhom jinbnew bi klassi bażi li tilqa' pari ta' valur ta' proprjetà komuni, li m'għandhomx jiġu ssuperati. Per eżempju, .btnu .btn-primary. Aħna nużaw .btngħall-istili komuni kollha bħal display, padding, u border-width. Imbagħad nużaw modifikaturi .btn-primarybiex inżidu l-kulur, il-kulur tal-isfond, il-kulur tal-fruntiera, eċċ.
Klassijiet modifikaturi għandhom jintużaw biss meta jkun hemm diversi proprjetajiet jew valuri li jridu jinbidlu f'diversi varjanti. Il-modifikaturi mhux dejjem huma meħtieġa, għalhekk kun żgur li fil-fatt qed issalva linji ta 'kodiċi u tipprevjeni overrides mhux meħtieġa meta toħloqhom. Eżempji tajbin ta’ modifikaturi huma l-klassijiet tal-kulur tat-tema u l-varjanti tad-daqs tagħna.
Hemm żewġ z-indexskali f'Bootstrap—elementi fi ħdan komponent u komponenti overlay.
- Xi komponenti f'Bootstrap huma mibnija b'elementi li jikkoinċidu biex jipprevjenu fruntieri doppji mingħajr ma jimmodifikaw il-
borderproprjetà. Per eżempju, gruppi ta 'buttuni, gruppi ta' input, u paġnar. - Dawn il-komponenti jaqsmu
z-indexskala standard ta'0permezz3. 0huwa default (inizjali),1huwa:hover,2huwa:active/.active, u ,3huwa:focus.- Dan l-approċċ jaqbel mal-aspettattivi tagħna tal-ogħla prijorità tal-utent. Jekk element ikun iffukat, huwa fil-ħsieb u fl-attenzjoni tal-utent. Elementi attivi huma t-tieni l-ogħla għaliex jindikaw stat. Hover huwa t-tielet l-ogħla minħabba li jindika l-intenzjoni tal-utent, iżda kważi kollox jista 'jiġi hovered.
Bootstrap jinkludi diversi komponenti li jiffunzjonaw bħala overlay ta 'xi tip. Dan jinkludi, fl-ordni tal-ogħla z-index, dropdowns, navbars fissi u li jwaħħlu, modals, tooltips, u popovers. Dawn il-komponenti għandhom l- z-indexiskala tagħhom stess li tibda minn 1000. Dan in-numru tal-bidu huwa każwali u jservi bħala buffer żgħir bejn l-istili tagħna u l-istili tad-dwana tal-proġett tiegħek.
Kull komponent ta 'overlay iżid z-indexftit il-valur tiegħu b'tali mod li l-prinċipji komuni tal-UI jippermettu li elementi ffukati fuq l-utent jew imxaqilba jibqgħu fil-vista f'kull ħin. Pereżempju, modali hija l-imblukkar tad-dokumenti (eż., ma tistax tieħu l-ebda azzjoni oħra ħlief għall-azzjoni tal-modal), għalhekk aħna npoġġu dak fuq in-navbars tagħna.
Tgħallem aktar dwar dan fil- z-indexpaġna tat-tqassim tagħna .
Kull meta jkun possibbli, nippreferu niktbu HTML u CSS fuq JavaScript. B'mod ġenerali, HTML u CSS huma aktar prolifiċi u aċċessibbli għal aktar nies tal-livelli ta 'esperjenza differenti kollha. HTML u CSS huma wkoll aktar mgħaġġla fil-browser tiegħek milli JavaScript, u l-browser tiegħek ġeneralment jipprovdi ħafna funzjonalità għalik.
Dan il-prinċipju huwa l-ewwel klassi tagħna JavaScript API huwa dataattributi. M'għandekx bżonn tikteb kważi l-ebda JavaScript biex tuża l-plugins JavaScript tagħna; minflok, ikteb HTML. Aqra aktar dwar dan fil -paġna tagħna ta' ħarsa ġenerali JavaScript .
Fl-aħħar nett, l-istili tagħna jibnu fuq l-imgieba fundamentali ta 'elementi komuni tal-web. Kull meta jkun possibbli, nippreferu nużaw dak li jipprovdi l-browser. Pereżempju, tista' tpoġġi .btnklassi fuq kważi kull element, iżda ħafna mill-elementi ma jipprovdu l-ebda valur semantiku jew funzjonalità tal-browser. Allura minflok, nużaw <button>s u <a>s.
L-istess jgħodd għal komponenti aktar kumplessi. Filwaqt li nistgħu niktbu l-plugin ta 'validazzjoni tal-formola tagħna stess biex inżidu klassijiet ma' element ġenitur ibbażat fuq stat ta 'input, u b'hekk inkunu nistgħu nistiljaw it-test jiġifieri aħmar, nippreferu nużaw il- :valid/ :invalidpsewdo-elementi li kull browser jipprovdilna.
Klassijiet ta 'utilità—li qabel kienu helpers f'Bootstrap 3—huma alleat qawwi fil-ġlieda kontra n-nefħa tas-CSS u l-prestazzjoni fqira tal-paġna. Klassi ta' utilità hija tipikament abbinata waħda u immutabbli ta' valur ta' proprjetà espressa bħala klassi (eż., .d-blocktirrappreżenta display: block;). L-appell primarju tagħhom huwa l-veloċità tal-użu waqt il-kitba tal-HTML u l-limitazzjoni tal-ammont ta 'CSS tad-dwana li għandek tikteb.
Speċifikament fir-rigward tas-CSS tad-dwana, l-utilitajiet jistgħu jgħinu fil-ġlieda kontra ż-żieda fid-daqs tal-fajl billi jnaqqsu l-pari tal-valur tal-proprjetà ripetuti l-aktar komuni tiegħek fi klassijiet singoli. Dan jista' jkollu effett drammatiku fuq skala fil-proġetti tiegħek.
Filwaqt li mhux dejjem possibbli, aħna nistinkaw biex nevitaw li nkunu dommatiki żżejjed fir-rekwiżiti HTML tagħna għall-komponenti. Għalhekk, aħna niffukaw fuq klassijiet singoli fis-seletturi tas-CSS tagħna u nippruvaw nevitaw is-seletturi tat-tfal immedjati ( >). Dan jagħtik aktar flessibilità fl-implimentazzjoni tiegħek u jgħin biex iżomm is-CSS tagħna aktar sempliċi u inqas speċifiku.