metodas
Sužinokite apie pagrindinius principus, strategijas ir metodus, naudojamus kuriant ir prižiūrint „Bootstrap“, kad galėtumėte patys lengviau pritaikyti ir išplėsti.
Nors pradžios puslapiuose pateikiama įžanginė projekto apžvalga ir jo pasiūlymai, šiame dokumente daugiausia dėmesio skiriama tam, kodėl mes darome tai, ką darome naudodami „Bootstrap“. Tai paaiškina mūsų filosofiją kurti žiniatinklyje, kad kiti galėtų mokytis iš mūsų, prisidėti su mumis ir padėti mums tobulėti.
Matote kažką, kas skamba ne taip, o gal būtų galima padaryti geriau? Pradėkite problemą – norėtume su jumis ją aptarti.
Mes išsamiau išnagrinėsime kiekvieną iš jų, bet aukšto lygio, štai kas vadovaujasi mūsų požiūriu.
- Komponentai turėtų būti jautrūs ir pirmiausia skirti mobiliesiems
- Komponentai turėtų būti sukurti naudojant bazinę klasę ir išplėsti naudojant modifikavimo klases
- Komponentų būsenos turėtų atitikti bendrą z indekso skalę
- Kai tik įmanoma, pirmenybę teikite HTML ir CSS diegimui, o ne „JavaScript“.
- Jei įmanoma, naudokite pagalbines programas, o ne pasirinktinius stilius
- Kai tik įmanoma, venkite vykdyti griežtus HTML reikalavimus (vaikų parinkikliai)
„Bootstrap“ reaguojantys stiliai sukurti taip, kad būtų reaguojantys, o tai dažnai vadinama „ pirmiausia mobiliesiems“ . Mes naudojame šį terminą savo dokumentuose ir iš esmės su juo sutinkame, tačiau kartais jis gali būti per platus. Nors ne kiekvienas komponentas turi visiškai reaguoti į „Bootstrap“, šis reaguojantis metodas yra skirtas sumažinti CSS nepaisymą, verčiant pridėti stilių, kai peržiūros sritis tampa didesnė.
„Bootstrap“ tai aiškiausiai pamatysite mūsų žiniasklaidos užklausose. Daugeliu atvejų naudojame min-widthužklausas, kurios pradedamos taikyti tam tikrame lūžio taške ir tęsiamos per aukštesnius lūžio taškus. Pavyzdžiui, a .d-nonetaikoma nuo min-width: 0iki begalybės. Kita vertus, .d-md-nonenuo vidutinės pertraukos taško taikomas a.
Kartais naudosime max-width, kai to reikalauja komponentui būdingas sudėtingumas. Kartais šiuos nepaisymus funkciškai ir psichiškai lengviau įgyvendinti ir palaikyti, nei perrašyti pagrindines funkcijas iš mūsų komponentų. Stengiamės apriboti šį metodą, bet retkarčiais juo naudosime.
Be mūsų Reboot, kelių naršyklių normalizavimo stiliaus lapo, visi mūsų stiliai siekia naudoti klases kaip parinkiklius. Tai reiškia, kad reikia vengti tipo parinkėjų (pvz., input[type="text"]) ir pašalinių pirminių klasių (pvz., .parent .child), dėl kurių stiliai yra pernelyg specifiniai, kad juos būtų galima lengvai nepaisyti.
Taigi komponentai turėtų būti sukurti pagal bazinę klasę, kurioje yra bendros, nepaisomos nuosavybės vertės poros. Pavyzdžiui, .btnir .btn-primary. Naudojame .btnvisiems įprastiems stiliams, pvz display., padding, ir border-width. Tada naudojame modifikatorius, pavyzdžiui .btn-primary, pridėti spalvą, fono spalvą, kraštinės spalvą ir kt.
Modifikatorių klasės turėtų būti naudojamos tik tada, kai yra kelios ypatybės arba vertės, kurias reikia keisti keliuose variantuose. Modifikatoriai ne visada būtini, todėl kurdami būtinai išsaugote kodo eilutes ir išvengsite nereikalingų nepaisymų. Geri modifikatorių pavyzdžiai yra mūsų temų spalvų klasės ir dydžių variantai.
„Bootstrap“ yra dvi z-indexskalės – komponento elementai ir perdangos komponentai.
- Kai kurie „Bootstrap“ komponentai sukurti su persidengiančiais elementais, kad būtų išvengta dvigubų kraštinių nekeičiant
bordernuosavybės. Pavyzdžiui, mygtukų grupės, įvesties grupės ir puslapių skirstymas. - Šie komponentai turi standartinę
z-indexskalę0iki3. 0yra numatytasis (pradinis),1yra:hover,2yra:active/.activeir ,3yra:focus.- Šis metodas atitinka mūsų lūkesčius dėl aukščiausio vartotojo prioriteto. Jei elementas yra sufokusuotas, jis matomas ir naudotojo dėmesingas. Aktyvūs elementai yra antroje vietoje, nes jie rodo būseną. Užvedimas yra trečias pagal dydį, nes jis rodo vartotojo ketinimą, tačiau užveskite pelės žymeklį beveik bet ką .
„Bootstrap“ apima kelis komponentus, kurie veikia kaip tam tikra perdanga. Tai apima aukščiausios eilės tvarka z-indexišskleidžiamuosius meniu, fiksuotas ir lipnias naršymo juostas, modalus, patarimus ir iššokančius langus. Šie komponentai turi savo z-indexskalę, kuri prasideda 1000. Šis pradinis skaičius yra atsitiktinis ir yra nedidelis buferis tarp mūsų stilių ir jūsų projekto pasirinktinių stilių.
Kiekvienas perdangos komponentas šiek tiek padidina jo z-indexvertę taip, kad bendrieji vartotojo sąsajos principai leidžia naudotojui sutelktus arba užvedus pelės žymeklį elementus visą laiką matyti. Pavyzdžiui, modalas blokuoja dokumentus (pvz., jūs negalite atlikti jokių kitų veiksmų, išskyrus modalo veiksmą), todėl mes tai pateikiame virš naršymo juostų.
Sužinokite daugiau apie tai mūsų z-indexišdėstymo puslapyje .
Kai tik įmanoma, mes mieliau rašome HTML ir CSS, o ne „JavaScript“. Apskritai, HTML ir CSS yra produktyvesni ir prieinami daugiau įvairaus patirties lygių žmonių. HTML ir CSS taip pat yra greitesni jūsų naršyklėje nei „JavaScript“, o jūsų naršyklė suteikia daug funkcijų.
Šis principas yra mūsų pirmos klasės JavaScript API dataatributai. Jums nereikia rašyti beveik jokio „JavaScript“, kad galėtumėte naudoti „JavaScript“ papildinius; vietoj to parašykite HTML. Daugiau apie tai skaitykite mūsų JavaScript apžvalgos puslapyje .
Galiausiai, mūsų stiliai remiasi įprastų žiniatinklio elementų pagrindinėmis elgsenomis. Kai tik įmanoma, mes norime naudoti tai, ką suteikia naršyklė. Pavyzdžiui, galite įdėti .btnklasę beveik bet kuriam elementui, tačiau dauguma elementų nesuteikia jokios semantinės vertės ar naršyklės funkcijų. Taigi vietoj to naudojame <button>s ir <a>s.
Tas pats pasakytina ir apie sudėtingesnius komponentus. Nors galėtume parašyti savo formos patvirtinimo įskiepį, kad pridėtume klases prie pirminio elemento pagal įvesties būseną ir taip sudarytume teksto stilių, tarkime, raudoną, o mes norime naudoti :valid/ :invalidpseudoelementus, kuriuos mums pateikia kiekviena naršyklė.
Naudingumo klasės – anksčiau buvusios „Bootstrap 3“ pagalbininkės – yra galingas sąjungininkas kovojant su CSS išsipūtimu ir prastu puslapio našumu. Naudingumo klasė paprastai yra viena nekintanti nuosavybės ir vertės pora, išreikšta kaip klasė (pvz., .d-blockreiškia display: block;). Pagrindinis jų patrauklumas yra naudojimo greitis rašant HTML ir ribojant pasirinktinio CSS, kurį turite rašyti, kiekį.
Konkrečiai kalbant apie tinkintą CSS, komunalinės paslaugos gali padėti kovoti su didėjančiu failo dydžiu, sumažindamos dažniausiai pasikartojančias nuosavybės ir verčių poras į atskiras klases. Tai gali turėti didelį poveikį jūsų projektams.
Nors tai ne visada įmanoma, mes stengiamės vengti pernelyg dogmatiškų HTML reikalavimų komponentams. Taigi CSS parinkikliuose daugiausia dėmesio skiriame atskiroms klasėms ir stengiamės vengti tiesioginių vaikų pasirinkimų ( ~). Tai suteikia jums daugiau lankstumo diegiant ir padeda padaryti mūsų CSS paprastesnį ir ne tokį konkretų.