Bootstrap est une bibliothèque de css / js créée par l'équipe de développement de twitter. A partir de la version 4 boostrap utilise le langage SASS. Il sera donc nécessaire de compiler le code sass localement afin de personnaliser le code.
Concernant les aspects js de bootstrap, nous recommendons d'utiliser les cdn suivants :
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Principales class de mise en forme
un peu de javascript
Customiser bootstrap 5
Référence : https://getbootstrap.com/docs/5.0/customize/sass/
Avant de commencer la customisation, il faut comprendre quelques points :
- Il ne faut pas modifier de fichiers sources de bootstrap, cela rendrait la mise à jour compliquée
- Le fichier bootstrap.scss contient tout ce qui est nécessaire pour le code scss soit compilé. Si on regarde de plus près ce fichier, on voit qu'il contient une liste d'imports des différents composants de bootstrap.
- Le fichier _variables.scss est aussi un fichier important car il définit toutes les variables (que l'on pourra redéfinir). Notez qu'un bon nombre de variables sont définies dans des "map" (ou tableaux associatifs) et il faudra donc les modifiers également via des map ($theme-colors, $grid-breakpoints,...)
Installation en utilisant npm
npm install bootstrap
Rewrite des variables
ATTENTION, quand on "ré-écrit" des variables, il faut le faire avant de charger le fichier de bootstrap. Cela peut sembler contre-intuitif, mais la plupart des variables bootstrap sont déclarées avec le mot clé "default". Cela veut dire que si la variable en question n'a pas été définie alors elle prendra la valeur donnée par bootstrap. Il faut donc définir cette valeur avant le chargement de bootstrap.
Couleurs
Ex de réécriture de la variable $warning
// import des variables à réécrire et à appeler avant // l'import de bootstrap $warning: red; // import des fichiers scss de bootstrap @import "../node_modules/bootstrap/scss/bootstrap"; // import des mes propres fichiers scss. Tous les fichiers importés // ci-dessous utilisent les variables de bootstrap. Il faut donc les // importer après bootstrap.scss @import "./global.scss";
Breakpoints
Ex de réécriture des breakpoints de la grille :
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1800px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1740px );
Pour aller plus loin dans la customisation
Vous verrez dans la documention de bootstrap qu'il est possible :
- d'importer uniquement les fichiers dont on a besoin
- de réécrire les variables par défaut
- d'ajouter des valeurs aux différentes map ($theme-colors, $grid-breakpoints, ...)
- d'ajouter des mixins
- ...
https://getbootstrap.com/docs/5.0/customize/sass/
Exercice :
Ajouter une nouvelle variable de couleur (ex : $call-action : #b12929;)
Faites en sorte que la classe btn-call-action fonctionne en utilisant une variable custom
$call-action : #ed2a2d;