Lähestyä
Opi ohjaavista periaatteista, strategioista ja tekniikoista, joita käytetään Bootstrapin rakentamiseen ja ylläpitoon, jotta voit helpommin muokata ja laajentaa sitä itse.
Aloitussivuilla esitellään projektia ja sen tarjontaa, mutta tämä asiakirja keskittyy siihen, miksi teemme asioita, joita teemme Bootstrapissa. Se selittää filosofiaamme rakentaa verkkoa, jotta muut voivat oppia meiltä, osallistua kanssamme ja auttaa meitä kehittymään.
Näetkö jotain, mikä ei kuulosta oikealta, tai kenties voitaisiin tehdä paremmin? Avaa ongelma – keskustelemme siitä mielellämme kanssasi.
Sukellaan jokaiseen näistä tarkemmin läpi, mutta korkealla tasolla, tämä ohjaa lähestymistapaamme.
- Komponenttien tulee olla responsiivisia ja mobiiliensimmäisiä
- Komponentit tulee rakentaa perusluokilla ja laajentaa modifier-luokilla
- Komponenttien tilojen tulee noudattaa yhteistä z-indeksiasteikkoa
- Aina kun mahdollista, suosi HTML- ja CSS-toteutusta JavaScriptin sijaan
- Aina kun mahdollista, käytä apuohjelmia mukautettujen tyylien sijaan
- Aina kun mahdollista, vältä tiukkojen HTML-vaatimusten pakottamista (lapsivalitsimet)
Bootstrapin responsiiviset tyylit on rakennettu reagoiviksi, lähestymistapaa, jota usein kutsutaan mobiililähtöisyydeksi . Käytämme tätä termiä asiakirjoissamme ja olemme suurelta osin samaa mieltä sen kanssa, mutta toisinaan se voi olla liian laaja. Vaikka kaikkien komponenttien ei tarvitse olla täysin responsiivisia Bootstrapissa, tämä reagoiva lähestymistapa tarkoittaa CSS-ohitusten vähentämistä pakottamalla sinua lisäämään tyylejä näkymän kasvaessa.
Bootstrapissa tämä näkyy selkeimmin mediakyselyissämme. Useimmissa tapauksissa käytämme min-widthkyselyitä, jotka alkavat päteä tietystä keskeytyskohdasta ja jatkavat korkeampien keskeytyskohtien läpi. Esimerkiksi a .d-nonekoskee min-width: 0äärettömään. Toisaalta a .d-md-nonekoskee keskipitkästä keskeytyskohdasta ylöspäin.
Joskus käytämme, max-widthkun komponentin luontainen monimutkaisuus vaatii sitä. Joskus nämä ohitukset ovat toiminnallisesti ja henkisesti selkeämpiä toteuttaa ja tukea kuin ydintoimintojen uudelleenkirjoittaminen komponenteistamme. Pyrimme rajoittamaan tätä lähestymistapaa, mutta käytämme sitä aika ajoin.
Lukuun ottamatta Rebootia, selainten välistä normalisointityylitaulukkoa, kaikki tyylimme pyrkivät käyttämään luokkia valitsimina. Tämä tarkoittaa, että vältetään tyypin valitsimet (esim. input[type="text"]) ja ylimääräiset yläluokat (esim. .parent .child), jotka tekevät tyyleistä liian erityisiä ohitettavaksi.
Sellaisenaan komponentit tulisi rakentaa sellaisella perusluokalla, joka sisältää yhteiset, ei ohitettavat omaisuusarvo-parit. Esimerkiksi .btnja .btn-primary. Käytämme .btnkaikkia yleisiä tyylejä, kuten display, paddingja border-width. Käytämme sitten muokkaajia, kuten .btn-primaryvärin, taustavärin, reunuksen värin jne. lisäämiseen.
Muokkausluokkia tulee käyttää vain, kun useissa muunnelmissa on useita muutettavaa ominaisuuksia tai arvoja. Muokkaukset eivät aina ole välttämättömiä, joten varmista, että todella tallennat koodirivejä ja estät tarpeettomat ohitukset niitä luodessasi. Hyviä esimerkkejä muuntajista ovat teemaväriluokat ja kokovariantimme.
Bootstrapissa on kaksi z-indexasteikkoa: komponentin sisällä olevat elementit ja peittokomponentit.
- Jotkut Bootstrapin komponentit on rakennettu päällekkäisillä elementeillä kaksoisreunusten estämiseksi ominaisuutta muokkaamatta
border. Esimerkiksi painikeryhmät, syöttöryhmät ja sivutus. - Näillä komponenteilla on yhteinen
z-indexstandardiasteikko0.3 0on oletusarvo (alkuperäinen),1on:hover,2on:active/.active, ja ,3on:focus.- Tämä lähestymistapa vastaa odotuksiamme korkeimmasta käyttäjäprioriteettista. Jos elementti on kohdistettu, se on näkyvissä ja käyttäjän huomiossa. Aktiiviset elementit ovat toiseksi korkeimmat, koska ne osoittavat tilaa. Hover on kolmanneksi korkein, koska se osoittaa käyttäjän aikomusta, mutta lähes mitä tahansa voidaan siirtää.
Bootstrap sisältää useita komponentteja, jotka toimivat jonkinlaisena peittokuvana. Tämä sisältää suurimman järjestyksessä z-indexpudotusvalikot, kiinteät ja tarttuvat navigointipalkit, modaalit, työkaluvihjeet ja ponnahdusikkunat. Näillä komponenteilla on oma z-indexasteikkonsa, joka alkaa 1000. Tämä aloitusnumero on satunnainen ja toimii pienenä puskurina tyyliemme ja projektisi mukautettujen tyylien välillä.
Jokainen peittokuvakomponentti lisää z-indexhieman sen arvoa siten, että yleiset käyttöliittymäperiaatteet sallivat käyttäjälle kohdistetut tai leijuvat elementit pysyvät näkyvissä koko ajan. Esimerkiksi modaali estää asiakirjan (esim. et voi tehdä muita toimia paitsi modaalin toimintoa), joten laitamme sen navigointipalkkiemme yläpuolelle.
Lisätietoja tästä on z-indexasettelusivullamme .
Aina kun mahdollista, kirjoitamme mieluummin HTML:n ja CSS:n JavaScriptin sijaan. Yleisesti ottaen HTML ja CSS ovat tuotteliaampia ja saatavilla useammille ihmisille eri kokemustasoilla. HTML ja CSS ovat myös nopeampia selaimessasi kuin JavaScript, ja selaimesi tarjoaa yleensä paljon toimintoja sinulle.
Tämä periaate on ensiluokkainen JavaScript-sovellusliittymämme dataattribuutit. Sinun ei tarvitse kirjoittaa lähes mitään JavaScriptiä käyttääksesi JavaScript-laajennuksiamme. kirjoita sen sijaan HTML. Lue lisää tästä JavaScript - esittelysivultamme .
Lopuksi tyylimme perustuvat yleisten verkkoelementtien peruskäyttäytymiseen. Aina kun mahdollista, käytämme mieluummin sitä, mitä selain tarjoaa. Voit esimerkiksi laittaa .btnluokan lähes mille tahansa elementille, mutta useimmat elementit eivät tarjoa semanttista arvoa tai selaimen toimintoja. Joten sen sijaan käytämme kirjaimia <button>s ja <a>s.
Sama koskee monimutkaisempia komponentteja. Vaikka voisimme kirjoittaa oman lomakkeen vahvistuslaajennuksen lisätäksemme luokkia ylätason elementtiin syötteen tilan perusteella, jolloin voimme muotoilla tekstin esimerkiksi punaiseksi, käytämme mieluummin jokaisen selaimen tarjoamia :valid/ :invalidpseudoelementtejä.
Utility-luokat – entiset Bootstrap 3:n apulaiset – ovat tehokas liittolainen torjuttaessa CSS:n turvotusta ja huonoa sivun suorituskykyä. Hyödyllisyysluokka on tyypillisesti yksi, muuttumaton ominaisuus-arvo-pari, joka ilmaistaan luokkana (esim. .d-blockedustaa display: block;). Niiden ensisijainen vetovoima on käytön nopeus HTML-kirjoituksen aikana ja kirjoitettavan mukautetun CSS:n määrän rajoittaminen.
Erityisesti mukautetun CSS:n osalta apuohjelmat voivat auttaa torjumaan tiedostokoon kasvamista vähentämällä yleisimmin toistuvat ominaisuus-arvo-parit yksittäisiksi luokiksi. Tällä voi olla dramaattinen vaikutus projekteissasi.
Vaikka se ei aina ole mahdollista, pyrimme välttämään liian dogmaattisia komponentteja koskevissa HTML-vaatimuksissamme. Siksi keskitymme yksittäisiin luokkiin CSS-valitsimissamme ja yritämme välttää välittömiä lapsivalitsimia ( >). Tämä antaa sinulle enemmän joustavuutta toteutuksessa ja auttaa pitämään CSS:n yksinkertaisena ja vähemmän täsmällisenä.