Comment puis-je changer la couleur primaire dans Bootstrap 4, 5 et 5.3 ?

Personnalisation de la couleur primaire de Bootstrap

La modification de la couleur primaire par défaut dans Bootstrap est réalisable, vous permettant d'aligner la palette de couleurs avec l'identité de votre marque.

Bootstrap 5.3 (mis à jour 2023)

Pour modifier la couleur primaire, vous pouvez exploiter la variable de couleur existante, $orange, comme suit :

// 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 (mis à jour en 2021)

Dans Bootstrap 5, l'approche reste la même. Vous pouvez définir la variable de thème et importer la feuille de style Bootstrap :

$primary: rebeccapurple;

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

Bootstrap 4

Pour Bootstrap 4, définissez la variable de couleur de thème appropriée avant d'importer bootstrap.scss :

$primary: purple;
$danger: red;

@import "bootstrap";

Dans les cas où vous souhaitez dériver la nouvelle couleur d'une variable Bootstrap existante, importez les fonctions et les fichiers de variables en premier :

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

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

@import "bootstrap";

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!