...
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.
Après de nombreux tatônnements, ce qui fonctionne le mieux chez moi, c'est d'utiliser gulpjs pour compiler les fichiers scss de bootstrap.
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 des sources de bootstrap :
Télécharger et installer node.js (pour Ubuntu : https://doc.ubuntu-fr.org/nodejs)
Créer un dossier pour votre projet.
Télécharger les fichiers sources de bootstrap, les décompresser dans votre dossier projet.
Aller dans le dossier "bootstrap"
Télécharger les dépendances de bootstrap : npm install
Vous devriez avoir la structure de fichiers ci-dessous. Créer les dossiers manquants (dist et scss) :
|-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
Installation des outils pour compiler :
Installer gulpjs 4 :
Pour les détails, voir ce site pour une démarche très complète et qui permet de bien comprendre le fonctionnement de gulp :
(inspiré de https://www.goede.site/setting-up-gulp-4-for-automatic-sass-compilation-and-css-injection)
En résumé :
sudo npm install -g gulp
sudo npm install -g gulp-cli
npm install --save-dev gulp-sass
npm install --save-dev gulpjs/gulp
npm install --save-dev gulp-postcss autoprefixer cssnano gulp-sourcemaps
Créer le fichier gulpfile.js à la racine de votre projet et l'adapter à votre structure de dossier :
...
Votre fichier custom.css est automatiquement compilé et généré 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 à déposer dans votre arborescence de pod.