fi | ja Muuttujien muokkaaminen
Sass-muuttujien muokkaaminen
Sass-muuttujat Bootstrap-lähdekoodin muuttujat määritetään osoitteessa _variables.scss vaihtoehdon !default avulla. Voit muuttaa tai muokata näitä muuttujia Bootstrap-tyylien mukauttamiseksi.
Perusparametrit
Alla olevat muuttujat ovat perusparametreja koko tyylin asetuksia varten.
-
$font-size-base: Peruskirjasinkoko (oletus:1rem), vaikuttaa kaikkiin Bootstrap-tyylien kirjasinkokoihin -
$spacer: Yksikköpituus Spacing-apuohjelmille (oletus:1rem)
// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";Kustomoinnin esiasetusten muuttaminen
Muuttujat, jotka alkavat $enable-:lla, ovat sisäänrakennettuja mukauttamisen esiasetuksia (katso täysi listaus kohdasta Sass-optiot). Esimerkiksi kaltevuudet ja varjot ovat oletuksena pois käytöstä (versiossa 4.1.1). Voit ottaa nämä vaihtoehdot käyttöön laajennuskoodilla kuten alla.
gradient+shadow.scss (alkuosa)// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...Katso Gradaatio- ja varjotehosteet tarkistaaksesi visuaalisten esitystapojen erot.
Karttamuuttujien muokkaaminen
Sass tukee erityyppisiä muuttujia (ks. Tietotyypit). Useimmat muuttujat ovat skalaarisia (numerot, merkkijonot, värit, booleanit ja null). Mutta alla olevat muuttujat on määritelty avain-arvokarttoina.
-
$grays: Harmaasävyjen esiasetukset -
$colors: Perusvärit (sininen, indigo, violetti, …) -
$theme-colors: Bootstrap-teemavärit (ensisijainen, toissijainen, menestys, …).) -
$spacers: Spacing-hyödykkeiden esiasetetut arvot -
$sizes: Sizing-hyödykkeiden esiasetetut arvot -
$grid-breakpoints: Ruudukon taukopisteen (näkymäikkunan leveyden) esiasetetut arvot -
$container-max-widths: Ruudukon kontin leveys kullekin taukopisteelle
Voit myös muokata näitä muuttujia. Arvojen lisääminen ja muuttaminen on helppoa.
variables.scss (Sass-lähde tälle sivulle)// Example: Modify $theme-colors$theme-colors: ( // change "success" from green to teal "success": #20c997, // add "custom" to orange "custom": #fd7e14);// import Bootstrap@import "bootstrap/scss/bootstrap";Alhaalla ovat live-hälytysnäytteet (vertaa Bootstrapin oletusväreihin ⇒ katso virallisen dokumentin esimerkit).
div.alert.alert-success div.alert.alert-custom Voit myös poistaa olemassa olevat karttamerkinnät Sassin sisäänrakennetuilla funktioilla (haku map-remove($map, $keys...) of map-functions). Mutta sinun on tuotava osittaiset osatekijät yksitellen. Katso lisätietoja virallisen dokumentin kohdasta Remove from map.