Bootstrap on tunnettu kehys, jossa on valmiita komponentteja, jotka auttavat verkkosuunnittelijoita rakentamaan sivuston nopeasti. Bootstrapin uusi versio 4.2.1 käyttää esiprosessorina Sassia. Joten tässä blogissa ymmärrämme, miten Bootstrap ohitetaan sass-muuttujien avulla.
Tiedämme, että meidän on ohitettava Bootstrapin tyyli antaaksemme verkkosivustolle uuden ilmeen. Aivan kuten teema-taustaa, fontteja, värejä, välejä jne. varten muuttujat ovat vastuussa Scss:lle tuotoksesta. Tässä meidän on ohitettava Bootstrapin oletusmuuttujat. Siirrytään Bootstrapin ohittamiseen.
Add Bootstrap In The Project
Aluksi lataa Bootstrap Bootstrapin lataussivulta. Sen jälkeen tehdään scss-kansioon kansio nimellä vendors ja lisätään Bootstrap tuohon kansioon. Emme muuta Bootstrapin tiedostoissa mitään, koska se aiheuttaa ongelmia tulevaisuudessa, kun Bootstrapia halutaan päivittää. Kun olet luonut kansion, voit lisätä bootstrap.scss:n tuohon tiedostoon, jonka olet kääntänyt.
Bootstrap-4:ssä käytetään !default-lippua, joka kuvaa oletusmuuttujan oletusarvoa. Sinun tarvitsee vain kopioida tuo muuttuja, lisätä oma arvosi ja poistaa !default-lippu muuttujasta.
Override-muuttujat
Bootstrapilla on oma “_variables.scss” “scss”-kansiossa, joka sisältää kaikki Bootstrapissa käytetyt muuttujat. Lisää nyt “abstracts”-niminen kansio scss-kansioosi ja luo siihen kansioon “_custom-variables.scss”.
Avaa nyt Bootstrap > scss > “_variables.scss”. Emme muuta Bootstrapin muuttujia tässä suoraan, joten kopioimme muuttujat tiedostosta “_variables.scss” ja liitämme ne tiedostoon “_custom-variables.scss”. Kun olet liittänyt muuttujat, voit lisätä uuden arvon muuttujiin.
Muuttujan ensisijainen teemaväri (sininen) on päivitettävä ja määriteltävä “_custom-variables.scss”-tiedostossasi. Muuttujan on tultava ennen kaikkia @import-lausekkeita. Kun käännät Sass-koodin, tätä uutta $primary-väriä voidaan käyttää kaikessa koodissa, joka viittaa $primary-muuttujaan.
Modify The Default Breakpoints
Grid Breakpoints
Bootstrapin taukopisteet määritellään myös _variables.scss-tiedostossa. Tässä ovat oletusarvot:
Voit muuttaa nykyisiä taukopisteitä tai lisätä uusia. Sinun täytyy vain ohittaa $grid-breakpoints-muuttuja lisäämällä vain tarvittavat arvot.
Containers Width
Bootstrap container-max-widths määritellään myös _variables.scss-tiedostossa. Tässä ovat oletusarvot:
Päivitetty tiedostossa “_custom-variables.scss”
Mukauttaminen Välisääntöjen mukauttaminen
Bootstrap tarjoaa joukon välisääntöjä, joiden avulla voidaan säätää välit. $spacer- ja $spacer-muuttujat hallitsevat välysten perusarvoa. Voit päivittää, lisätä ja ohittaa niitä.
Default Variables In Bootstrap
Override Variables
Bootstrap tarjoaa myös monia muuttujia, joita voimme ohittaa kuten:
Käytä vain sitä, mitä tarvitset
Bootstrapilla on niin paljon komponentteja, joita voit käyttää, mutta sinun ei tarvitse käyttää kaikkia bootstrapin tarjoamia komponentteja. Sinulla on määräysvalta bootstrapiin, joten ota mukaan ne komponentit, joita tarvitset. Jos et sisällytä niitä, CSS-tiedostosta tulee kevyempi ja siinä on vähemmän koodia. Ja voit sisällyttää nämä komponentit aina, kun tarvitset niitä tulevaisuudessa. Jos tarvitset komponentteja tulevaisuudessa, poista ne yksinkertaisesti kommentoimatta.
Joitakin hyödyllisiä muuttujia
Bootstrap tarjoaa joitakin tärkeitä globaaleja asetuksia, joita voit vaihtaa. Kuten border-radius, box-shadow ja gradients jne.
Löydät nämä muuttujat scss/_variables.scss-tiedostosta.
$enable-caret: Käytetään, kun halutaan ottaa käyttöön pseudoelementin caret .dropdown-toggle.
$enable-rounded: Käytetään border-radiuksen lisäämiseen tai poistamiseen (oletus: true)
$enable-shadows: Käytä ruutuvarjojen lisäämiseen tai poistamiseen (oletus: false)
$enable-gradients: (oletus: false)
$enable-transitions: Käytä siirtymien lisäämiseen tai poistamiseen (oletus: true)
$enable-grid-classes: Ruutujärjestelmän luokkien lisäämiseen tai poistamiseen (oletus: true)
$enable-print-styles: Ottaa käyttöön tyylit tulostuksen optimoimiseksi.
Voit tarkistaa sass-optiot täältä:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options
Conclusion
Olet nähnyt, kuinka helppoa on ohittaa bootstrap -saas-muuttujien avulla. Olemme yrittäneet antaa sinulle yksityiskohtaisen oppaan, joka auttaa sinua prosessin läpi visuaalisten kuvien ja vaiheittaisten toimintojen avulla. Bootstrapin ohittaminen on superhelppoa, kunhan osaat löytää tärkeät muuttujat. Ja jos olet käynyt blogimme läpi, olet valmis ohittamaan!