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;