de | ja Variablen manipulieren
Sass-Variablen
Sass-Variablen des Bootstrap-Quellcodes werden in _variables.scss mit der Option !default definiert. Sie können diese Variablen ändern oder modifizieren, um die Bootstrap-Stile anzupassen.
Grundparameter
Die folgenden Variablen sind Grundparameter für die gesamten Stileinstellungen.
-
$font-size-base: Basis-Schriftgröße (Standard:1rem), wirkt sich auf alle Schriftgrößen von Bootstrap-Styles aus -
$spacer: Einheitslänge für Spacing-Utilities (Standard:1rem)
// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";Ändern von Anpassungsvorgaben
Variablen, die mit $enable- beginnen, sind eingebaute Anpassungsvorgaben (siehe Sass-Optionen für die vollständige Liste). Zum Beispiel sind Farbverläufe und Schatten standardmäßig deaktiviert (in Version 4.1.1). Sie können diese Optionen mit einem Erweiterungscode wie unten aktiviert werden.
gradient+shadow.scss (Anfangsteil)// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...Siehe Gradation und Schatteneffekte, um Unterschiede in der visuellen Darstellung zu überprüfen.
Modifizieren von Map-Variablen
Sass unterstützt verschiedene Arten von Variablen (siehe Datentypen). Die meisten Variablen sind skalar (Zahlen, Strings, Farben, Booleans und null). Die folgenden Variablen sind jedoch als Key-Value-Maps definiert.
-
$grays: Graustufen-Voreinstellungen -
$colors: Grundfarben (blau, indigo, lila, …) -
$theme-colors: Bootstrap-Themenfarben (primär, sekundär, Erfolg, …) -
$spacers: Voreingestellte Werte für Spacing utitilies -
$sizes: Voreingestellte Werte für Sizing utitilies -
$grid-breakpoints: Grid breakpoint (viewport width) presets -
$container-max-widths: Grid container width for each breakpoints
Sie können diese Variablen auch ändern. Hinzufügen und Ändern von Werten sind einfach.
variables.scss (Sass-Quelle für diese Seite)// 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";Unten sind Live-Alarm-Beispiele (vergleichen Sie mit Bootstrap Standard-Farben ⇒ siehe Offizielle Dokument Beispiele).
div.alert.alert-success div.alert.alert-custom Sie können auch bestehende Karteneinträge mit Hilfe von Sass Builtin-Funktionen entfernen (Suche map-remove($map, $keys...) von map-functions). Allerdings müssen Sie Teilbereiche einzeln importieren. Siehe Remove from map aus dem offiziellen Dokument für Details.