Lähenemine

Kuigi alustamise leheküljed pakuvad projekti ja selle pakutava tutvustust, keskendub käesolev dokument sellele, miks me Bootstrapis asju teeme. See selgitab meie filosoofiat veebis ülesehitamisel, et teised saaksid meilt õppida, meiega kaasa aidata ja aidata meil end täiustada.

Kas näete midagi, mis ei kõla õigesti või mida saaks paremini teha? Avage probleem – me tahaksime seda teiega arutada.

Kokkuvõte

Sukeldume neisse kõigisse läbivalt, kuid kõrgel tasemel juhindume meie lähenemisviisist järgmiselt.

• Komponendid peaksid olema tundlikud ja esmalt mobiilsed
• Komponendid tuleks ehitada põhiklassiga ja laiendada modifikaatoriklasside kaudu
• Komponentide olekud peaksid järgima ühist z-indeksi skaala
• Kui vähegi võimalik, eelista JavaScripti asemel HTML-i ja CSS-i rakendamist
• Kui võimalik, kasutage kohandatud stiilide asemel utiliite
• Võimaluse korral vältige rangete HTML-i nõuete jõustamist (lastevalijad)

Vastutulelik

Bootstrapi tundlikud stiilid on loodud tundlikuks – lähenemist, mida sageli nimetatakse mobiilipõhiseks . Kasutame seda terminit oma dokumentides ja oleme sellega suures osas nõus, kuid mõnikord võib see olla liiga lai. Kuigi kõik komponendid ei pea Bootstrapis täielikult reageerima, on see reageeriv lähenemisviis CSS-i alistamiste vähendamiseks, sundides teid lisama stiile, kui vaateava suureneb.

Kogu Bootstrapis näete seda kõige selgemalt meie meediapäringutes. Enamikul juhtudel kasutame min-widthpäringuid, mis hakkavad rakenduma kindlast katkestuspunktist ja viivad edasi läbi kõrgemate murdepunktide. Näiteks a .d-nonekehtib alates min-width: 0lõpmatuseni. Teisest küljest .d-md-nonekehtib a alates keskmisest katkestuspunktist ja ülespoole.

Mõnikord kasutame max-widthseda, kui komponendile omane keerukus seda nõuab. Mõnikord on need alistamised funktsionaalselt ja vaimselt selgemini rakendatavad ja toetatavad kui meie komponentidest põhifunktsioonide ümberkirjutamine. Püüame seda lähenemisviisi piirata, kuid kasutame seda aeg-ajalt.

klassid

Peale brauseriülese normaliseerimise laaditabeli Reboot on kõigi meie stiilide eesmärk kasutada klasse valijatena. See tähendab, et tuleb loobuda tüübivalijatest (nt input[type="text"]) ja kõrvalistest vanemklassidest (nt .parent .child), mis muudavad stiilid liiga spetsiifiliseks, et neid kergesti alistada.

Sellisena tuleks komponendid ehitada baasklassiga, mis sisaldab ühiseid, mitte alistatavaid vara-väärtuse paare. Näiteks .btnja .btn-primary. Kasutame .btnkõigi levinud stiilide jaoks, nagu display, paddingja border-width. Seejärel kasutame modifikaatoreid , näiteks .btn-primaryvärvi, taustavärvi, äärise värvi jne lisamiseks.

Muutusklasse tuleks kasutada ainult siis, kui mitme variandi vahel on mitu atribuuti või väärtust, mida muuta. Modifikaatorid ei ole alati vajalikud, seega veenduge, et salvestate koodiridu ja väldiksite nende loomisel tarbetuid ülekirjutusi. Headeks modifikaatorite näideteks on meie teemavärviklassid ja suurusvariandid.

z-indeksi skaalad

Bootstrapis on kaks z-indexskaalat – komponendis olevad elemendid ja ülekattekomponendid.

Komponentelemendid

• Mõned Bootstrapi komponendid on üles ehitatud kattuvate elementidega, et vältida topeltääriseid ilma borderatribuuti muutmata. Näiteks nupurühmad, sisestusrühmad ja lehekülgede arv.
• Nendel komponentidel on z-indexstandardskaala 0kuni 3.
• 0on vaikimisi (esialgne), 1on :hover, 2on :active/ .activeja 3on :focus.
• See lähenemine vastab meie ootustele kasutajate kõrgeima prioriteedi kohta. Kui element on fokusseeritud, on see nähtaval ja kasutaja tähelepanu all. Aktiivsed elemendid on suuruselt teisel kohal, kuna need näitavad olekut. Kursor on suuruselt kolmas, kuna see näitab kasutaja kavatsust, kuid kursorit saab hõljutada peaaegu kõike .

Ülekatte komponendid

Bootstrap sisaldab mitmeid komponente, mis toimivad teatud tüüpi ülekattena. See hõlmab kõrgeima järjekorras z-indexrippmenüüsid, fikseeritud ja kleepuvaid navigeerimisribasid, modaale, tööriistavihjeid ja hüpikaknaid. Nendel komponentidel on oma z-indexskaala, mis algab 1000. See algusnumber valiti meelevaldselt ja see toimib väikese puhvrina meie stiilide ja teie projekti kohandatud stiilide vahel.

Iga ülekattekomponent suurendab z-indexveidi oma väärtust nii, et kasutajaliidese üldised põhimõtted võimaldavad kasutajale keskendunud või hõljutatud elemendid kogu aeg nähtavaks jääda. Näiteks modaal blokeerib dokumente (nt te ei saa teha muid toiminguid peale modaali toimingu), seega paneme selle oma navigeerimisribade kohale.

Lisateavet selle kohta leiate meie z-indexpaigutuse lehelt .

HTML ja CSS üle JS

Kui vähegi võimalik, eelistame kirjutada HTML-i ja CSS-i JavaScripti asemel. Üldiselt on HTML ja CSS viljakamad ja kättesaadavad suuremale hulgale erineva kogemuse tasemega inimestele. HTML ja CSS on teie brauseris kiiremad kui JavaScript ja teie brauser pakub üldiselt teile palju funktsioone.

See põhimõte on meie esmaklassiline dataatribuute kasutav JavaScript API. Meie JavaScripti pluginate kasutamiseks ei pea te peaaegu ühtegi JavaScripti kirjutama; selle asemel kirjutage HTML. Lisateavet selle kohta leiate meie JavaScripti ülevaate lehelt .

Lõpuks tuginevad meie stiilid tavaliste veebielementide põhikäitumisele. Kui vähegi võimalik, eelistame kasutada seda, mida brauser pakub. Näiteks saate .btnklassi panna peaaegu igale elemendile, kuid enamik elemente ei paku semantilist väärtust ega brauseri funktsioone. Selle asemel kasutame <button>s ja <a>s.

Sama kehtib ka keerukamate komponentide kohta. Kuigi me võiksime kirjutada oma vormi valideerimise pistikprogrammi, et lisada sisendi oleku põhjal põhielemendile klasse, võimaldades seeläbi teksti punaseks kujundada, eelistame kasutada pseudoelemente :valid/ , mida iga brauser meile pakub.:invalid

Kommunaalteenused

Utiliidiklassid – varem Bootstrap 3 abilised – on võimas liitlane võitluses CSS-i paisumise ja kehva lehe jõudlusega. Kasulikkusklass on tavaliselt üks muutumatu omadus-väärtuse paaris, mida väljendatakse klassina (nt .d-blockesindab display: block;). Nende peamine atraktiivsus on kasutuskiirus HTML-i kirjutamisel ja kohandatud CSS-i arvu piiramine, mida peate kirjutama.

Täpsemalt, mis puudutab kohandatud CSS-i, võivad utiliidid aidata võidelda failisuuruse suurenemisega, vähendades teie kõige sagedamini korduvad atribuut-väärtuste paarid ühte klassi. Sellel võib olla teie projektidele ulatuslik mõju.

Paindlik HTML

Kuigi see pole alati võimalik, püüame vältida komponentide HTML-i nõuetes liigset dogmaatilisust. Seega keskendume oma CSS-i valijates üksikutele klassidele ja püüame vältida vahetuid lastevalijaid ( >). See annab teile juurutamisel suurema paindlikkuse ning aitab meie CSS-i lihtsamaks ja vähem spetsiifiliseks muuta.

Koodikokkulepped

Koodijuhend (Bootstrapi kaasloojalt @mdo) dokumenteerib, kuidas kirjutame oma HTML-i ja CSS-i Bootstrapi kaudu. See täpsustab juhised üldise vormingu, terve mõistuse vaikesätete, atribuutide ja atribuutide järjestuste ja muu kohta.

Nende standardite ja muude standardite jõustamiseks oma Sass/CSS- is kasutame Stylelinti . Meie kohandatud Stylelinti konfiguratsioon on avatud lähtekoodiga ja teistele kasutamiseks ja laiendamiseks saadaval.

Kasutame vnu-jari standardse ja semantilise HTML-i jõustamiseks ning levinud vigade tuvastamiseks.