...
Pour aller plus loin dans la customisation, vous aurez besoin de vous intéresser à SASS. Bootstrap contient de très nombreuses variables à customiser dans des fichiers scss. Ces fichiers doivent être compilés avant de pouvoir être utilisés et nécessitent donc d'installer un environnement de développement. Vous trouverez de nombreux tutoriels qui expliquent cela, mais attention, de nombreux sont périmés. Attention d'utiliser ceux qui parlent de bootstrap 4 et gulp 4.Mode d'emploi à venir prochainement.
Voici une tentative de tuto ... mais après de nombreux essais / erreurs, je ne suis plus sur de ce qui marche ou pas ! J'ai fait l'installation sous Ubuntu, mais cela devrait être similaire sous d'autres OS, y compris Windows. En gros, télécharger les sources de bootstrap, installer les dépendances avec npm et utiliser gulpjs pour compiler les fichiers scss en css. Donc n'hésitez pas à modifier selon votre expérience :
Installation :
Télécharger et installer node.js
Télécharger les fichiers sources de bootstrap, les décompresser.
Aller dans le dossier "bootstrap"
Télécharger les dépendances : npm install
Vous devriez avoir la structure de fichiers :
|-Votre-projet-css-pour-pod
|--bootstrap-4
|--dist
|--scss
|----custom.scss (qu'on renommera bootstrap.min.scss plus tard)
Le dossier dist est vide, il contiendra le fichier css compilé. Le dossier scss contient votre fichier custom.scss. Vous pouvez l'appeler comme vous voulez
Installer gulpjs 4 : (inspiré de https://www.goede.site/setting-up-gulp-4-for-automatic-sass-compilation-and-css-injection)
npm install -g gulp-cli
npm install --save-dev gulp-sass
npm install --save-dev gulpjs/gulp
Créer le fichier gulpjs à la racine de votre projet : (le fournir)
Générer un fichier css :
Lancer la commande : gulp watch dans le dossier qui contient gulpjs. Ce script surveille vos modifications et compile à la volée, donc ne l'arrêtez pas.
Modifier votre fichier custom.scss comme expliqué sur la page Theming de bootstrap.
Votre fichier custom.css est automatiquement compilé dans le dossier dist à chaque enregistrement de custom.scss.
Vous pouvez bien sur donner tout de suite le bon nom à votre fichier source, par exemple : bootstrap-custom.min.scss. Vous obtiendrez ainsi le fichier bootstrap-custom.min.css