Couleurs et personnalisationEn bref, vous pouvez utiliser les classes de couleur Bootstrap mais aussi les variables CSS de la palette de couleur de base Bootstrap. Pour les classes, voici un exemple d'utilisation:
Rapelons-nous comment utiliser des variables CSS:
Donc les variables de couleur Bootstrop en CSS, il vous suffit d'utiliser les noms de variables existantes. Ceci vous permettra de sauver beaucoup de temps à styliser dans un fichier CSS personnalisé.
Voici une liste de plusieurs variables que vous pouvez utiliser (couleurs et plus encore):
Il est possible réutiliser les variables de couleurs Bootstrap et même de les personnaliser pour les éléments de votre feuilles de style.
Dans votre fichier .css personnel redéfinir la valeur des principales variables de couleurs Bootstrap:
Ceci étant dit, ça n'aura aucun effet sur les composantes Bootstrap donc les styles ont été définis dans la feuille de style de Bootstrap et que vous n'avez restylisé à nouveau dans votre feuille de styles personnalisée.
Il est possible de faire réécrire automatiquement tout le CSS de Bootstrap à partir de quelques personnalisations. Par exemple, si on veut changer la couleur primary et la couleur secondary qui sont utilisées et appliquées sur de multiples composantes de base de Bootstrap, comme les boutons, les liens, les éléments de formulaires, les accordéons etc.
Comment? Par l'utilisation de SASS (Syntactically Awesome Style Sheets) à des fin de personnalisation de Bootstrap
Vous pourriez simplement réécrire la valeur de certaines variables Bootstrap en format SASS et ensuite recompiler le SASS complet de Bootstrap dans le format CSS. Ainsi, cela vous donne la possibilité de personnaliser plusieurs aspects dont les couleurs. Par la suite vous continuez simplement d'utiliser les mêmes classes ou les même variables CSS que Bootstrap utilise et dorénavant tout sera changé avec votre palette de couleurs personnalisée!
Les étapes
- Télécharger les fichiers sources de Bootstrap pour avoir accès aux fichiers Sass. Ajoutez le dossier des fichiers source de Bootstrap dans votre dossier de projet (je vous propose de le déposer dans un dossier nommé vendors)
- Créer un fichier .scss dans lequel vous allez réécrivez la valeur de certaines variables Bootstrap existantes.
$light: #bfe5df; $dark: #201d40; $primary: #f36b62; $secondary: #5f5f71; $info: #20b4a8; $success : #63af0e; $warning : #ffc377; $danger : #f60568; et dans ce format: $theme-colors: ( "light": #bfe5df, "dark": #201d40, "primary": #f36b62, "secondary": #5f5f71, "info": #20b4a8, "success": #63af0e, "warning": #ffc377, "danger": #f60568, ); - Importez ensuite la le SCSS de Bootstrap dans votre fichier SCSS (ajustez le chemin d'accès) selon votre configuration de projet:
@import 'vendors/bootstrap-5.2.3/scss/bootstrap.scss' - Compilez votre fichier SCSS en format css (j'utilise personnellement l'extension de VSCode Live Sass Compiler de Glenn Marks). Ça créera un nouveau fichier .css dans votre projet.
- Changez le lien du Bootstrap.css dans vos fichier HTML pour pointer dorénavant vers votre nouveau fichier .css (celui qui vient d'être compilé à l'aide du fichier scss.