Qasje
Mësoni rreth parimeve udhëzuese, strategjive dhe teknikave të përdorura për të ndërtuar dhe mirëmbajtur Bootstrap në mënyrë që të mund ta personalizoni dhe zgjeroni më lehtë vetë.
Ndërsa faqet e fillimit ofrojnë një turne prezantues të projektit dhe çfarë ofron ai, ky dokument fokusohet në arsyen pse ne bëjmë gjërat që bëjmë në Bootstrap. Ai shpjegon filozofinë tonë për të ndërtuar në ueb në mënyrë që të tjerët të mund të mësojnë nga ne, të kontribuojnë me ne dhe të na ndihmojnë të përmirësohemi.
Shihni diçka që nuk tingëllon mirë, apo ndoshta mund të bëhet më mirë? Hapni një çështje - do të donim ta diskutonim me ju.
Ne do të zhytemi në secilën prej këtyre më shumë gjatë gjithë kohës, por në një nivel të lartë, ja çfarë e drejton qasjen tonë.
- Komponentët duhet të jenë të përgjegjshëm dhe të lëvizshëm
- Komponentët duhet të ndërtohen me një klasë bazë dhe të zgjerohen nëpërmjet klasave të modifikuesve
- Gjendjet përbërëse duhet t'i binden një shkalle të përbashkët të indeksit z
- Kur është e mundur, preferoni një zbatim HTML dhe CSS mbi JavaScript
- Kurdoherë që është e mundur, përdorni shërbime mbi stilet e personalizuara
- Kurdoherë që është e mundur, shmangni zbatimin e kërkesave strikte HTML (përzgjedhës për fëmijë)
Stilet e përgjegjshme të Bootstrap janë ndërtuar për të qenë të përgjegjshme, një qasje që shpesh referohet si mobile-first . Ne e përdorim këtë term në dokumentet tona dhe kryesisht pajtohemi me të, por ndonjëherë mund të jetë shumë i gjerë. Ndërsa jo çdo komponent duhet të jetë plotësisht i përgjegjshëm në Bootstrap, kjo qasje e përgjegjshme ka të bëjë me zvogëlimin e tejkalimeve të CSS duke ju shtyrë të shtoni stile ndërsa porta e shikimit bëhet më e madhe.
Nëpër Bootstrap, këtë do ta shihni më qartë në pyetjet tona të medias. Në shumicën e rasteve, ne përdorim min-widthpyetje që fillojnë të aplikohen në një pikë të caktuar ndërprerjeje dhe kalojnë nëpër pikat më të larta të ndërprerjes. Për shembull, a .d-nonezbatohet nga min-width: 0pafundësia. Nga ana tjetër, a .d-md-nonezbatohet nga pika e ndërprerjes mesatare e lart.
Nganjëherë do ta përdorim max-widthkur e kërkon kompleksiteti i natyrshëm i një komponenti. Ndonjëherë, këto tejkalime janë funksionalisht dhe mendërisht më të qarta për t'u zbatuar dhe mbështetur sesa rishkrimi i funksionalitetit bazë nga komponentët tanë. Ne përpiqemi ta kufizojmë këtë qasje, por do ta përdorim herë pas here.
Përveç Reboot-it tonë, një fletë stili e normalizimit të ndër-shfletuesve, të gjitha stilet tona synojnë të përdorin klasa si përzgjedhës. Kjo do të thotë largimi nga përzgjedhësit e tipit (p.sh., input[type="text"]) dhe klasat e jashtme të prindërve (p.sh., .parent .child) që i bëjnë stilet shumë specifike për t'u anashkaluar lehtësisht.
Si të tillë, komponentët duhet të ndërtohen me një klasë bazë që strehon çifte të zakonshme, që nuk duhet të anashkalohen me vlerë pronë-vlere. Për shembull, .btndhe .btn-primary. Ne përdorim .btnpër të gjitha stilet e zakonshme si display, padding, dhe border-width. Ne përdorim më pas modifikues si .btn-primarypër të shtuar ngjyrën, ngjyrën e sfondit, ngjyrën e kufirit, etj.
Klasat e modifikuesve duhet të përdoren vetëm kur ka disa veti ose vlera për t'u ndryshuar në variante të shumta. Modifikuesit nuk janë gjithmonë të nevojshëm, prandaj sigurohuni që po ruani linjat e kodit dhe po parandaloni ndryshimet e panevojshme gjatë krijimit të tyre. Shembuj të mirë të modifikuesve janë klasat tona të ngjyrave të temës dhe variantet e madhësisë.
Ekzistojnë dy z-indexshkallë në Bootstrap - elementë brenda një komponenti dhe komponentë mbivendosje.
- Disa komponentë në Bootstrap janë ndërtuar me elementë të mbivendosur për të parandaluar kufijtë e dyfishtë pa modifikuar
borderpronën. Për shembull, grupet e butonave, grupet e hyrjes dhe faqet. - Këta komponentë ndajnë një
z-indexshkallë standarde0prej3. 0është e paracaktuar (fillestare),1është:hover,2është:active/.active, dhe ,3është:focus.- Kjo qasje përputhet me pritshmëritë tona për përparësinë më të lartë të përdoruesit. Nëse një element është i fokusuar, ai është në pamje dhe në vëmendjen e përdoruesit. Elementët aktivë janë të dytët më të lartë sepse tregojnë gjendjen. Hover është i treti më i lartë sepse tregon qëllimin e përdoruesit, por pothuajse çdo gjë mund të pezullohet.
Bootstrap përfshin disa komponentë që funksionojnë si një mbivendosje e një lloji. Kjo përfshin, sipas rendit më të lartë z-index, listën rënëse, shiritat e navigimit fiks dhe ngjitës, modalet, këshillat e veglave dhe popovers. Këta komponentë kanë z-indexshkallën e tyre që fillon në 1000. Ky numër fillestar është i rastësishëm dhe shërben si një zbutës i vogël midis stileve tona dhe stileve të personalizuara të projektit tuaj.
Secili komponent i mbivendosjes rrit z-indexpaksa vlerën e tij në mënyrë të tillë që parimet e përbashkëta të ndërfaqes së përdoruesit të lejojnë elementët e fokusuar ose të pezulluar nga përdoruesi të mbeten në pamje gjatë gjithë kohës. Për shembull, një modal është duke bllokuar dokumentet (p.sh., ju nuk mund të bëni asnjë veprim tjetër përveç veprimit të modalit), kështu që ne e vendosim atë mbi shiritat tanë të navigimit.
Mësoni më shumë rreth kësaj në faqen tonë të z-indexparaqitjes .
Kurdoherë që është e mundur, ne preferojmë të shkruajmë HTML dhe CSS mbi JavaScript. Në përgjithësi, HTML dhe CSS janë më pjellore dhe më të arritshme për më shumë njerëz të të gjitha niveleve të ndryshme të përvojës. HTML dhe CSS janë gjithashtu më të shpejtë në shfletuesin tuaj sesa JavaScript, dhe në përgjithësi shfletuesi juaj ofron një pjesë të madhe të funksionalitetit për ju.
Ky parim është dataatributet tona të klasit të parë JavaScript API. Ju nuk keni nevojë të shkruani pothuajse asnjë JavaScript për të përdorur shtojcat tona JavaScript; në vend të kësaj, shkruani HTML. Lexoni më shumë rreth kësaj në faqen tonë të përmbledhjes së JavaScript .
Së fundi, stilet tona bazohen në sjelljet themelore të elementëve të zakonshëm të uebit. Kur është e mundur, ne preferojmë të përdorim atë që ofron shfletuesi. Për shembull, mund të vendosni një .btnklasë në pothuajse çdo element, por shumica e elementeve nuk ofrojnë ndonjë vlerë semantike ose funksionalitet të shfletuesit. Pra, në vend të kësaj, ne përdorim <button>s dhe <a>s.
E njëjta gjë vlen edhe për komponentët më kompleksë. Ndërsa ne mund të shkruajmë shtojcën tonë të vërtetimit të formës për të shtuar klasa në një element prind bazuar në gjendjen e një hyrjeje, duke na lejuar kështu të stilojmë tekstin të themi të kuq, ne preferojmë të përdorim :valid/ :invalidpseudo-elementet që na ofron çdo shfletues.
Klasat e shërbimeve - dikur ndihmëse në Bootstrap 3 - janë një aleat i fuqishëm në luftimin e fryrjes së CSS dhe performancës së dobët të faqes. Një klasë e dobishme është zakonisht një çift i vetëm, i pandryshueshëm pronë-vlerë i shprehur si një klasë (p.sh., .d-blockpërfaqëson display: block;). Apeli i tyre kryesor është shpejtësia e përdorimit gjatë shkrimit të HTML dhe kufizimi i sasisë së CSS të personalizuar që duhet të shkruani.
Në mënyrë të veçantë në lidhje me CSS-në e personalizuar, shërbimet mund të ndihmojnë në luftimin e rritjes së madhësisë së skedarit duke reduktuar çiftet më të shpeshta të vlerës së pronës tuaj në klasa të vetme. Kjo mund të ketë një efekt dramatik në shkallë në projektet tuaja.
Ndonëse nuk është gjithmonë e mundur, ne përpiqemi të shmangim të qenit tepër dogmatik në kërkesat tona të HTML për komponentët. Kështu, ne fokusohemi në klasat e vetme në përzgjedhësit tanë CSS dhe përpiqemi të shmangim përzgjedhësit e menjëhershëm të fëmijëve ( ~). Kjo ju jep më shumë fleksibilitet në zbatimin tuaj dhe ndihmon për ta mbajtur CSS-në tonë më të thjeshtë dhe më pak specifike.