Wie kann ich die Primärfarbe in Bootstrap 4, 5 und 5.3 ändern?

Anpassen der Bootstrap-Primärfarbe

Das Ändern der Standard-Primärfarbe in Bootstrap ist möglich, sodass Sie das Farbschema an Ihre Markenidentität anpassen können.

Bootstrap 5.3 (aktualisiert 2023)

Um die Primärfarbe zu ändern, können Sie die vorhandene Farbvariable $orange wie folgt nutzen:

// Import necessary Bootstrap files
@import "functions";
@import "variables";

// Set the $primary variable to your desired color
$primary: orange;

// Merge the custom color with the existing $theme-colors map
$theme-colors: map-merge($theme-colors, ("primary": $primary));

// Apply the changes by importing Bootstrap
@import "bootstrap";

Bootstrap 5 (aktualisiert 2021)

In Bootstrap 5 bleibt der Ansatz derselbe. Sie können die Designvariable festlegen und das Bootstrap-Stylesheet importieren:

$primary: rebeccapurple;

// Ensure you use the full path to bootstrap.scss
@import "bootstrap";

Bootstrap 4

Für Bootstrap 4 legen Sie die entsprechende Designfarbvariable fest, bevor Sie bootstrap.scss importieren :

$primary: purple;
$danger: red;

@import "bootstrap";

In Fällen, in denen Sie die neue Farbe von einer vorhandenen Bootstrap-Variablen ableiten möchten, importieren Sie Zuerst die Funktions- und Variablendateien:

@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: ("primary": $purple);

@import "bootstrap";

Das obige ist der detaillierte Inhalt vonWie kann ich die Primärfarbe in Bootstrap 4, 5 und 5.3 ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!