Theming Bootstrap
Mukauta Bootstrap 4:ää uusilla sisäänrakennetuilla Sass-muuttujillamme, jotta voit valita yleiset tyyliasetukset helpon teeman ja komponenttien muuttamisen vuoksi.
Bootstrap 3:ssa teemaa ohjasivat suurelta osin muuttujien ohitukset LESS:ssä, mukautettu CSS ja erillinen teematyylitaulukko, jonka sisällytimme dist
tiedostoihimme. Pienellä vaivalla Bootstrap 3:n ulkoasu voitaisiin suunnitella kokonaan uudelleen koskematta ydintiedostoihin. Bootstrap 4 tarjoaa tutun, mutta hieman erilaisen lähestymistavan.
Nyt teemat toteutetaan Sass-muuttujien, Sass-karttojen ja mukautetun CSS:n avulla. Ei ole enää omaa teematyylitaulukkoa; sen sijaan voit ottaa käyttöön sisäänrakennetun teeman lisätäksesi liukuvärejä, varjoja ja paljon muuta.
Hyödynnä Sass-lähdetiedostojamme muuttujien, karttojen, mixinien ja muiden ominaisuuksien hyödyntämiseksi.
Vältä Bootstrapin ydintiedostojen muokkaamista aina kun mahdollista. Sassille tämä tarkoittaa oman tyylisivun luomista, joka tuo Bootstrapin, jotta voit muokata ja laajentaa sitä. Olettaen, että käytät paketinhallintaohjelmaa, kuten npm, tiedostorakenne näyttää tältä:
Jos olet ladannut lähdetiedostomme etkä käytä paketinhallintaa, sinun kannattaa määrittää manuaalisesti jotain samankaltaista rakennetta pitäen Bootstrapin lähdetiedostot erillään omista tiedostoistasi.
Tuot custom.scss
Bootstrapin Sass-lähdetiedostot tiedostoosi. Sinulla on kaksi vaihtoehtoa: sisällytä kaikki Bootstrap tai valitse tarvitsemasi osat. Suosittelemme jälkimmäistä, mutta muista, että komponenttiemme välillä on joitain vaatimuksia ja riippuvuuksia. Sinun on myös sisällytettävä JavaScript-laajennuksiamme varten.
Kun tämä asetus on tehty, voit alkaa muokata mitä tahansa Sass-muuttujia ja -karttoja custom.scss
. Voit myös aloittaa Bootstrapin osien lisäämisen // Optional
osion alle tarpeen mukaan. Suosittelemme käyttämään bootstrap.scss
tiedostomme koko tuontipinoa lähtökohtana.
Jokainen Bootstrap 4:n Sass-muuttuja sisältää !default
lipun, jonka avulla voit ohittaa muuttujan oletusarvon omassa Sassissasi muuttamatta Bootstrapin lähdekoodia. Kopioi ja liitä muuttujia tarpeen mukaan, muokkaa niiden arvoja ja poista !default
lippu. Jos muuttuja on jo määritetty, sitä ei määritetä uudelleen Bootstrapin oletusarvoilla.
Löydät täydellisen luettelon Bootstrapin muuttujista kohdasta scss/_variables.scss
.
Saman Sass-tiedoston muuttujien ohitukset voivat tulla oletusmuuttujien eteen tai jälkeen. Kuitenkin, kun ohitat Sass-tiedostoja, ohitusten on tapahduttava ennen Bootstrapin Sass-tiedostojen tuontia.
Tässä on esimerkki, joka muuttaa background-color
ja color
for the, <body>
kun Bootstrap tuodaan ja käännetään npm:n kautta:
Toista tarvittaessa mille tahansa Bootstrapin muuttujalle, mukaan lukien alla olevat yleiset asetukset.
Bootstrap 4 sisältää kourallisen Sass-karttoja, avainarvopareja, jotka helpottavat toisiinsa liittyvien CSS-perheiden luomista. Käytämme Sass-karttoja väreissämme, ruudukon keskeytyspisteissä ja monessa muussa. Aivan kuten Sass-muuttujat, kaikki Sass-kartat sisältävät !default
lipun, ja ne voidaan ohittaa ja laajentaa.
Jotkut Sass-kartoistamme on oletuksena yhdistetty tyhjiksi. Tämä tehdään tietyn Sass-kartan helpon laajentamisen mahdollistamiseksi, mutta sen kustannuksella on kohteiden poistaminen kartalta hieman vaikeampaa.
Jos haluat muokata kartallamme olevaa väriä $theme-colors
, lisää seuraavat mukautettuun Sass-tiedostoosi:
Lisää uusi väri $theme-colors
lisäämällä uusi avain ja arvo:
Voit poistaa värit $theme-colors
kartalta tai mistä tahansa muusta kartasta käyttämällä map-remove
. Huomaa, että sinun on lisättävä se vaatimustemme ja vaihtoehtojemme väliin:
Bootstrap olettaa joidenkin tiettyjen avainten läsnäolon Sass-kartoissa, kun käytimme ja laajennamme niitä itse. Kun mukautat mukana olevia karttoja, saatat kohdata virheitä, kun käytetään tiettyä Sass-kartan avainta.
Käytämme esimerkiksi primary
, success
ja danger
-näppäimiä $theme-colors
linkkien, painikkeiden ja lomakkeiden tiloihin. Näiden avainten arvojen korvaamisen ei pitäisi aiheuttaa ongelmia, mutta niiden poistaminen voi aiheuttaa Sass-kääntämisongelmia. Näissä tapauksissa sinun on muutettava Sass-koodia, joka käyttää näitä arvoja.
Bootstrap hyödyntää useita Sass-toimintoja, mutta vain osa on sovellettavissa yleiseen teemaan. Olemme sisällyttäneet kolme toimintoa arvojen saamiseksi värikartoista:
Niiden avulla voit valita yhden värin Sass-kartalta aivan samalla tavalla kuin käyttäisit värimuuttujaa v3:sta.
Meillä on myös toinen toiminto tietyn väritason saamiseksi $theme-colors
kartasta. Negatiivinen tasoarvo vaalentaa väriä, kun taas korkeammat tasot tummenevat.
Käytännössä kutsuisit funktiota ja välität kaksi parametria: värin nimi $theme-colors
(esim. ensisijainen tai vaara) ja numeerinen taso.
Lisätoimintoja voidaan lisätä tulevaisuudessa tai omaa mukautettua Sassia luodaksesi tasofunktioita lisä Sass-kartoille, tai jopa yleisen, jos haluat olla monisanaisempi.
Yksi lisätoiminto, jonka sisällytämme Bootstrapiin, on värikontrastitoiminto, color-yiq
. Se käyttää YIQ-väriavaruutta palauttamaan automaattisesti vaalean ( #fff
) tai tumman ( #111
) kontrastivärin määritetyn perusvärin perusteella. Tämä toiminto on erityisen hyödyllinen mikseissä tai silmukoissa, joissa luot useita luokkia.
Voit esimerkiksi luoda värimalleja $theme-colors
kartastamme seuraavasti:
Sitä voidaan käyttää myös kertaluonteisiin kontrastitarpeisiin:
Voit myös määrittää perusvärin värikarttatoiminnoillamme:
Mukauta Bootstrap 4:ää sisäänrakennetun mukautetun muuttujatiedoston avulla ja vaihda globaaleja CSS-asetuksia helposti uusilla $enable-*
Sass-muuttujilla. Ohita muuttujan arvo ja käännä uudelleen npm run test
tarvittaessa.
Voit etsiä ja mukauttaa nämä muuttujat tärkeimmille yleisille asetuksille Bootstrap- scss/_variables.scss
tiedostosta.
Muuttuva | Arvot | Kuvaus |
---|---|---|
$spacer |
1rem (oletus) tai mikä tahansa arvo > 0 |
Määrittää oletusarvoisen spacerin arvon, jonka avulla ohjelmallisesti luodaan spacer-apuohjelmamme . |
$enable-rounded |
true (oletus) taifalse |
Ottaa käyttöön ennalta määritetyt border-radius tyylit eri komponenteissa. |
$enable-shadows |
true tai false (oletus) |
Ottaa käyttöön ennalta määritetyt box-shadow tyylit eri komponenteissa. |
$enable-gradients |
true tai false (oletus) |
Ottaa käyttöön ennalta määritetyt liukuvärit background-image eri komponenttien tyylien kautta. |
$enable-transitions |
true (oletus) taifalse |
Ottaa käyttöön ennalta määritetyt transition s-toiminnot eri komponenteissa. |
$enable-hover-media-query |
true tai false (oletus) |
Käytöstä poistettu |
$enable-grid-classes |
true (oletus) taifalse |
Mahdollistaa CSS-luokkien luomisen ruudukkojärjestelmälle (esim. .container , .row , .col-md-1 , jne.). |
$enable-caret |
true (oletus) taifalse |
Ottaa käyttöön pseudoelementin caret on .dropdown-toggle . |
$enable-print-styles |
true (oletus) taifalse |
Ottaa käyttöön tyylit tulostuksen optimoimiseksi. |
Monet Bootstrapin eri komponenteista ja apuohjelmista on rakennettu Sass-kartassa määritettyjen värien avulla. Tämä kartta voidaan silmukalla Sassissa luodaksesi nopeasti sarjan sääntöjoukkoja.
Kaikki Bootstrap 4:ssä saatavilla olevat värit ovat saatavilla Sass-muuttujina ja Sass-kartana scss/_variables.scss
tiedostona. Tätä laajennetaan myöhemmissä pienissä julkaisuissa lisäämällä lisää sävyjä, aivan kuten jo mukanamme oleva harmaasävypaletti .
Näin voit käyttää näitä Sassissasi:
Värien käyttöluokat ovat myös saatavilla asettamiseen color
ja background-color
.
Jatkossa pyrimme tarjoamaan Sass-kartat ja muuttujat kunkin värin sävyille, kuten olemme tehneet alla olevien harmaasävyvärien kanssa.
Käytämme osajoukkoa kaikista väreistä luodaksemme pienemmän väripaletin väriteemoja varten. Saatavilla myös Sass-muuttujina ja Sass-kartana Bootstraps- scss/_variables.scss
tiedostossa.
Laaja joukko harmaita muuttujia ja Sass-kartta, joka scss/_variables.scss
takaa yhtenäiset harmaan sävyt projektissasi.
Sisältä scss/_variables.scss
löydät Bootstrapin värimuuttujat ja Sass-kartan. Tässä on esimerkki $colors
Sass-kartasta:
Lisää, poista tai muokkaa kartan arvoja päivittääksesi niiden käyttöä monissa muissa osissa. Valitettavasti tällä hetkellä kaikki komponentit eivät käytä tätä Sass-karttaa. Tulevat päivitykset pyrkivät parantamaan tätä. Suunnittele siihen asti ${color}
muuttujien ja tämän Sass-kartan hyödyntämistä.
Monet Bootstrapin komponenteista ja apuohjelmista on rakennettu @each
silmukoilla, jotka toistuvat Sass-kartan yli. Tämä on erityisen hyödyllistä luotaessamme komponentin $theme-colors
muunnelmia ja luotaessa responsiivisia muunnelmia kullekin keskeytyspisteelle. Kun mukautat näitä Sass-karttoja ja käännät uudelleen, näet automaattisesti tekemäsi muutokset näissä silmukoissa.
Monet Bootstrapin komponenteista on rakennettu perusmodifier-luokan lähestymistavalla. Tämä tarkoittaa, että suurin osa tyylistä sisältyy .btn
perusluokkaan (esim. ), kun taas tyylimuunnelmat rajoittuvat muokkausluokkiin (esim. .btn-danger
). Nämä muokkausluokat on rakennettu $theme-colors
kartasta muokkausluokkien lukumäärän ja nimen mukauttamiseksi.
Tässä on kaksi esimerkkiä siitä, kuinka luomme $theme-colors
kartan muokkaajia .alert
komponentille ja kaikille .bg-*
taustaapuohjelmillemme.
Nämä Sass-silmukat eivät myöskään rajoitu värikarttoihin. Voit myös luoda reagoivia muunnelmia komponenteistasi tai apuohjelmistasi. Otetaan esimerkiksi responsiiviset tekstin tasausapuohjelmamme, joissa yhdistämme Sass-kartan @each
silmukan $grid-breakpoints
mediakyselyyn.
Jos sinun on muokattava $grid-breakpoints
, tekemäsi muutokset koskevat kaikkia silmukoita, jotka iteroidaan kyseisen kartan yli.
Bootstrap 4 sisältää noin kaksi tusinaa mukautettua CSS-ominaisuutta (muuttujaa) kootussa CSS:ssä. Nämä tarjoavat helpon pääsyn yleisesti käytettyihin arvoihin, kuten teemaväreihin, keskeytyspisteisiin ja ensisijaisiin kirjasinpinoihin, kun työskentelet selaimesi Inspectorissa, koodihiekkalaatikossa tai yleisessä prototyypeissä.
Tässä ovat sisällyttämämme muuttujat (huomaa, että se :root
on pakollinen). Ne sijaitsevat _root.scss
tiedostossamme.
CSS-muuttujat tarjoavat samanlaista joustavuutta kuin Sassin muuttujat, mutta niitä ei tarvitse kääntää ennen kuin ne toimitetaan selaimelle. Esimerkiksi tässä nollaamme sivumme kirjasinten ja linkkien tyylit CSS-muuttujilla.
Vaikka alun perin sisällytimme keskeytyspisteitä CSS-muuttujiimme (esim. --breakpoint-md
), niitä ei tueta mediakyselyissä , mutta niitä voidaan silti käyttää mediakyselyjen sääntöjoukoissa. Nämä keskeytyspistemuuttujat pysyvät käännetyssä CSS:ssä taaksepäin yhteensopivuuden takaamiseksi, koska JavaScript voi käyttää niitä. Lisätietoja spesifikaatiosta.
Tässä on esimerkki siitä, mitä ei tueta:
Ja tässä on esimerkki siitä, mitä tuetaan: