Personnalisation CSS de Bootstrap 4

fr | ja

Variables Sass

Les variables Sass du code source de Bootstrap sont définies dans _variables.scss avec l’option !default. Vous pouvez changer ou modifier ces variables pour personnaliser les styles Bootstrap.

Paramètres de base

Les variables ci-dessous sont des paramètres de base pour l’ensemble des paramètres de style.

• $font-size-base : Taille de la police de base (par défaut : 1rem), affecte toutes les tailles de police des styles Bootstrap
• $spacer : Longueur unitaire pour les utilitaires d’espacement (par défaut : 1rem)

// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";

Changer les préréglages de personnalisation

Les variables qui commencent par $enable- sont des préréglages de personnalisation intégrés (voir les options Sass pour la liste complète). Par exemple, les dégradés et les ombres sont désactivés par défaut (sur la version 4.1.1). Vous pouvez activer ces options avec un code d’extension comme ci-dessous.

// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...

Voir les effets de dégradés et d’ombres pour vérifier les différences de représentations visuelles.

Modifier les variables de la carte

Sass supporte différents types de variables (voir Types de données). La plupart des variables sont scalaires (nombres, chaînes de caractères, couleurs, booléens et null). Mais les variables ci-dessous sont définies comme des cartes clé-valeur.

• $grays : Présélections d’échelle de gris
• $colors : Couleurs de base (bleu, indigo, violet, …)
• $theme-colors : Couleurs du thème Bootstrap (primaire, secondaire, succès, ….)
• $spacers : Valeurs prédéfinies des utilitaires d’espacement
• $sizes : Valeurs prédéfinies des utilitaires de dimensionnement
• $grid-breakpoints : Présélections des points de rupture de la grille (largeur du viewport)
• $container-max-widths : Largeur du conteneur de la grille pour chaque point de rupture

Vous pouvez également modifier ces variables. L’ajout et le changement de valeurs sont faciles.

// 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";

Vous trouverez ci-dessous des échantillons d’alertes en direct (à comparer avec les couleurs par défaut de Bootstrap ⇒ voir les exemples du document officiel).

Vous pouvez également supprimer les entrées de carte existantes en utilisant les fonctions intégrées de Sass (recherche map-remove($map, $keys...) de map-functions). Mais vous devez importer les partiels de manière inviduelle. Voir Remove from map du document officiel pour plus de détails.