metodas

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.

Santrauka

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)

Atsakingas

„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.

Klasės

Išskyrus mūsų „Reboot“, kelių naršyklių normalizavimo stilių, 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.

z indekso svarstyklės

„Bootstrap“ yra dvi z-indexskalės – komponento elementai ir perdangos komponentai.

Komponentiniai elementai

• 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ę 0iki 3.
• 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 naudotojo ketinimą, tačiau užveskite pelės žymeklį beveik bet ką .

Perdangos komponentai

„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 numeris buvo pasirinktas savavališkai ir yra nedidelis buferis tarp mūsų stilių ir jūsų projekto pasirinktinių stilių.

Kiekvienas perdangos komponentas z-indexšiek tiek padidina savo vertę taip, kad bendrieji vartotojo sąsajos principai leidžia visada matyti vartotojui skirtus arba užvedus pelės žymeklį elementus. 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 .

HTML ir CSS per JS

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 naršyklė paprastai teikia daug funkcijų.

Šis principas yra mūsų pirmos klasės „JavaScript“ API, naudojanti dataatributus. 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ė.

Komunalinės paslaugos

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.

Lankstus HTML

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ų.

Kodo konvencijos

Kodo vadovas (iš „Bootstrap“ bendro kūrėjo, @mdo) dokumentuoja, kaip rašome HTML ir CSS naudodami „Bootstrap“. Jame pateikiamos bendrojo formatavimo, sveiko proto numatytųjų nustatymų, savybių ir atributų tvarkos ir kt. gairės.

Naudojame Stylelint , kad įgyvendintume šiuos ir daugiau standartų mūsų Sass/CSS. Mūsų tinkinta Stylelint konfigūracija yra atvirojo kodo ir prieinama kitiems naudoti bei išplėsti.

Naudojame vnu-jar standartiniam ir semantiniam HTML vykdymui, taip pat dažnų klaidų aptikimui.