Lähenemine
Siit saate teada Bootstrapi koostamiseks ja hooldamiseks kasutatavate juhtpõhimõtete, strateegiate ja tehnikate kohta, et saaksite seda ise hõlpsamini kohandada ja laiendada.
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.
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)
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.
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.
Bootstrapis on kaks z-indexskaalat – komponendis olevad elemendid ja ülekattekomponendid.
- 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-indexstandardskaala0kuni3. 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 .
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 on juhuslik ja toimib väikese puhvrina meie stiilide ja teie projekti kohandatud stiilide vahel.
Iga ülekattekomponent suurendab z-indexveidi selle 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 .
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 teile palju funktsioone.
See põhimõte on meie esmaklassiline JavaScripti API dataatribuudid. 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
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.
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.