en | ja Hantera variabler
Sass-variabler
Sass-variablerna i Bootstrap-källkoden definieras i _variables.scss med alternativet !default. Du kan ändra eller modifiera dessa variabler för att anpassa Bootstraps stilar.
Grundläggande parametrar
Variablerna nedan är grundläggande parametrar för hela stilinställningar.
-
$font-size-base: Grundtypsstorlek (standard:1rem), påverkar alla typsnittsstorlekar i Bootstrap-stilar -
$spacer: Enhetslängd för Spacing-verktyg (standard:1rem)
// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";Byte av förinställningar för anpassning
Variabler som börjar med $enable- är inbyggda förinställningar för anpassning (se Sass-alternativ för en fullständig lista). Gradienter och skuggor är till exempel inaktiverade som standard (i version 4.1.1). Du kan aktivera dessa alternativ med en tilläggskod som nedan.
gradient+shadow.scss (början)// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...Se Gradations- och skuggeffekter för att kontrollera skillnader i visuella representationer.
Modifiera kartvariabler
Sass stöder olika typer av variabler (se Datatyper). De flesta variabler är skalära (siffror, strängar, färger, booleans och null). Men variablerna nedan är definierade som nyckel-värdekartor.
-
$grays: Förinställningar för gråskala -
$colors: Grundfärger (blå, indigo, lila, …) -
$theme-colors: Bootstrap-temafärger (primära, sekundära, framgång, …).) -
$spacers: Förinställda värden för Spacing utitilies -
$sizes: Förinställda värden för Sizing utitilies -
$grid-breakpoints: Förinställda värden för Grid breakpoint (viewport width) -
$container-max-widths: Grid container width for each breakpoints
Du kan också ändra dessa variabler. Det är enkelt att lägga till och ändra värden.
variables.scss (Sass-källa för den här sidan)// 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";Nedan finns levande varningsexempel (jämför med Bootstraps standardfärger ⇒ se officiella dokumentexempel).
div.alert.alert-success div.alert.alert-custom Du kan också ta bort befintliga kartposter med hjälp av de inbyggda Sass-funktionerna (sök map-remove($map, $keys...) i map-functions). Men du måste importera partials invidually. Se Remove from map i det officiella dokumentet för detaljer.