en | ja Manupulering af variabler
Sass-variabler
Sass-variabler i Bootstrap-kildekoden er defineret i _variables.scss med !default-indstillingen. Du kan ændre eller modificere disse variabler for at tilpasse Bootstrap-stilarter.
Basisparametre
Variablerne nedenfor er grundlæggende parametre for hele stilindstillingerne.
-
$font-size-base: Basisskriftstørrelse (standard:1rem), påvirker alle skriftstørrelser i Bootstrap-stilarter -
$spacer: Enhedslængde for Spacing utilities (standard:1rem)
// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";Ændring af tilpasningsforudsætninger
Variabler, der begynder med $enable-, er indbyggede tilpasningsforudsætninger (se Sass-optioner for den fulde liste). For eksempel er gradienter og skygger deaktiveret som standard (i version 4.1.1). Du kan aktivere disse indstillinger med en udvidelseskode som nedenfor.
gradient+shadow.scss (begynderdel)// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...Se Gradation og skyggeeffekter for at kontrollere forskelle i visuelle repræsentationer.
Modificering af kortvariabler
Sass understøtter forskellige typer af variabler (se Datatyper). De fleste variabler er skalare (tal, strenge, farver, booleans og null). Men nedenstående variabler er defineret som nøgle-værdi maps.
-
$grays: Forudindstillinger for gråtoneskala -
$colors: Grundfarver (blå, indigo, lilla, …) -
$theme-colors: Bootstrap-temafarver (primær, sekundær, succes, …) -
$spacers: Forindstillede værdier af Spacing utitilies -
$sizes: Forindstillede værdier af Sizing utitilies -
$grid-breakpoints: Forindstillede værdier af Grid breakpoint (viewport width) -
$container-max-widths: Grid container width for each breakpoints
Du kan også ændre disse variabler. Tilføjelse og ændring af værdier er let.
variables.scss (Sass-kilde for denne side)// 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";Nedenfor er levende advarselsprøver (sammenlign med Bootstrap-standardfarver ⇒ se Officielle dokumenteksempler).
div.alert.alert-success div.alert.alert-custom Du kan også fjerne eksisterende kortposter ved hjælp af indbyggede Sass-funktioner (søg map-remove($map, $keys...) i map-functions). Men du er nødt til at importere partials invidually. Se Fjern fra kort i det officielle dokument for detaljer.