en | ja Manupulating variables
Sass variabelen
Sass variabelen van Bootstrap broncode zijn gedefinieerd in _variables.scss met !default optie. U kunt deze variabelen veranderen of wijzigen om Bootstrap stijlen aan te passen.
Basic parameters
Variabelen hieronder zijn basis parameters voor hele stijl instellingen.
-
$font-size-base: Basis lettergrootte (standaard:1rem), beïnvloedt alle lettergroottes van Bootstrap stijlen -
$spacer: Eenheidslengte voor Spacing hulpprogramma’s (standaard:1rem)
// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";Aanpassen presets
Variabelen die beginnen met $enable- zijn ingebouwde customization presets (zie Sass opties voor de volledige lijst). Bijvoorbeeld, kleurverlopen en schaduwen zijn standaard uitgeschakeld (op versie 4.1.1). U kunt deze opties inschakelen met een extensie code zoals hieronder.
gradient+shadow.scss (begin gedeelte)// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...Zie Gradatie en schaduw effecten om verschillen van visuele voorstellingen te controleren.
Wijzig kaart variabelen
Sass ondersteund verschillende typen variabelen (zie Data Types). De meeste variabelen zijn scalair (getallen, strings, kleuren, booleans, en null). Maar onderstaande variabelen zijn gedefinieerd als key-value maps.
-
$grays: Grijsschaal voorinstellingen -
$colors: Basiskleuren (blauw, indigo, paars, …) -
$theme-colors: Bootstrap thema kleuren (primair, secundair, succes, …) -
$spacers: Vooringestelde waarden van Spacing utitilies -
$sizes: Vooringestelde waarden van Sizing utitilies -
$grid-breakpoints: Grid breakpoint (viewport breedte) presets -
$container-max-widths: Grid container breedte voor elke breakpoints
U kunt deze variabelen ook wijzigen. Toevoegen en wijzigen van waarden zijn eenvoudig.
variables.scss (Sass bron voor deze pagina)// 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";Hieronder staan live waarschuwingsvoorbeelden (vergelijk met Bootstrap standaard kleuren ⇒ zie Officieel document voorbeelden).
div.alert.alert-success div.alert.alert-custom U kunt ook bestaande kaart items verwijderen met behulp van Sass builtin functies (zoek map-remove($map, $keys...) van map-functions). Maar je moet partials invidueel importeren. Zie Verwijderen uit kaart van het officiële document voor details.