en | ja Változók kezelése
Sass változók
A Bootstrap forráskód Sass változói a _variables.scss !default opcióval vannak definiálva. Ezeket a változókat megváltoztathatja vagy módosíthatja a Bootstrap stílusok testreszabásához.
Basic parameters
Az alábbi változók alapvető paraméterek a teljes stílusbeállításokhoz.
-
$font-size-base: Alap betűméret (alapértelmezett:1rem), a Bootstrap stílusok összes betűméretére hatással van -
$spacer: A Spacing segédprogramok egységnyi hossza (alapértelmezett:1rem)
// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";A testreszabási beállítások módosítása
A $enable- kezdetű változók beépített testreszabási beállítások (a teljes listát lásd a Sass beállításoknál). Például a gradiensek és az árnyékok alapértelmezés szerint ki vannak kapcsolva (a 4.1.1-es verziónál). Ezeket az opciókat az alábbi kiterjesztési kóddal engedélyezheted.
gradient+shadow.scss (kezdő rész)// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...A vizuális ábrázolások különbségeinek ellenőrzéséhez lásd Gradáció és árnyékhatások.
Térképváltozók módosítása
A Sass különböző típusú változókat támogat (lásd Adattípusok). A legtöbb változó skalár (számok, karakterláncok, színek, booleans és null). Az alábbi változók azonban kulcs-érték térképként vannak definiálva.
-
$grays: Szürkeárnyalatos előbeállítások -
$colors: Alapszínek (kék, indigó, lila, …) -
$theme-colors: Bootstrap téma színek (elsődleges, másodlagos, siker, …).) -
$spacers: A Spacing utitiliák előre beállított értékei -
$sizes: A Sizing utitiliák előre beállított értékei -
$grid-breakpoints: Rács töréspont (viewport width) előre beállított értékei -
$container-max-widths: Rács konténer szélessége minden törésponthoz
Ezeket a változókat is módosíthatja. Az értékek hozzáadása és megváltoztatása egyszerű.
variables.scss (Sass forrás ehhez az oldalhoz)// 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";Az alábbiakban élő figyelmeztető minták láthatók (összehasonlítás a Bootstrap alapértelmezett színeivel ⇒ lásd a hivatalos dokumentum példáit).
div.alert.alert-success div.alert.alert-custom A meglévő térképbejegyzéseket is eltávolíthatja a Sass beépített funkcióival (keresse map-remove($map, $keys...) a map-functions-ben). De a részlegeseket külön-külön kell importálnod. A részleteket lásd: Remove from map a hivatalos dokumentumban.