Doc Bootstrap 5

Installer et utiliser Bootstrap 5 en version Sass pour en tirer le meilleur et le customiser à votre guise.

• Doc Bootstrap 5
  • Installation
  • Utilisation
    • Boilerplate et setup
    • Feuilles de style (SCSS)
    • Javascript
  • Maintenance
  • Sass basics
  • Bootstrap core
  • Ressources utiles

Si vous cloner ce dépot, pensez à installer Bootstrap 5.

Installation

• télécharger les Sources Bootstrap 5 ou rendez-vous directement sur le github de Bootstrap et télécharger la dernière version
• installer un compilateur Sass, comme Dart Sass
• extraire le contenu de l'archive des sources de Bootstrap 5
• supprimer l'archive

A la création de cette documentation, la dernière version stable de Bootstrap est la 5.2.1. D'ici là, une nouvelle version peut être accessible. Adaptez l'installation à la dernière version en cours

Utilisation

Nous allons utiliser les fichiers sass de Bootstrap. On ne veut pas des sources précompilées (ni en local ni en CDN): on veut pouvoir recompiler les sources afin d'utiliser le framework et toutes ses capacités de personnalisation.

Boilerplate et setup

• créer vos fichiers index.html, style.scss et script.js
• link votre feuille de style style.css (qui n'existe pas encore!) à votre fichier HTML
• link votre fichier source javascript script.js à votre fichier HTML dans une balise script

Votre projet devrait ressember à ça

bootstrap-5.2.1/
index.html
style.scss
script.js

On laisse le projet comme ça, quand Bootstrap sortira une nouvelle version, vous n'aurez qu'à la télécharger, à l'extraire et à redéfinir le PATH vers les sources. Et c'est tout ! Ainsi, le projet est facile à maintenir.

Feuilles de style (SCSS)

Le point d'entrée de l'import de Bootstrap est le fichier style.scss. Vous ne devez et n'avez pas à modifier directement les sources de Bootstrap.

Nous allons utiliser les sources Sass de Bootstrap, non compilées. Et nous allons utiliser seulement celles qui sont nécessaires au bon fonctionnement de Bootstrap et celles qui nous intéressent (que nous allons utiliser). Cela nous permettra d'avoir un contrôle fin des sources (et donc de la taille des assets envoyés au navigateur) et de personnaliser Bootstrap comme nous l'entendons.

Voici à quoi devrait ressembler notre fichier source style.scss

Attention, l'ordre des import doit être respecté !

// Required
@import "./bootstrap-5.2.1/scss/functions";

// Default variable overrides : ici nous allons écraser la valeur par défaut de variables Bootstrap

/**

Votre code scss

*/

// Required
@import "./bootstrap-5.2.1/scss/variables";

// Variable value using existing variable : ici nous allons modifier la valeur de variables Bootstrap à l'aide de variables qui existent déjà, nous allons aussi définir nos propres variables Sass


/**

Votre code scss

*/

// Required: vous devez importer ces fichiers, ils font partie du core de Bootstrap
@import "./bootstrap-5.2.1/scss/maps";
@import "./bootstrap-5.2.1/scss/mixins";
@import "./bootstrap-5.2.1/scss/root";


// Optional Bootstrap CSS: ici nous importants en fonction de nos besoins les sources pour différents composants
// @import "./bootstrap-5.2.1/scss/reboot";
// @import "./bootstrap-5.2.1/scss/type";
// @import "./bootstrap-5.2.1/scss/images";
// @import "./bootstrap-5.2.1/scss/containers";
// @import "./bootstrap-5.2.1/scss/grid";
// @import "./bootstrap-5.2.1/scss/tables";
// @import "./bootstrap-5.2.1/scss/forms";
// @import "./bootstrap-5.2.1/scss/buttons";
// @import "./bootstrap-5.2.1/scss/transitions";
// @import "./bootstrap-5.2.1/scss/dropdown";
// @import "./bootstrap-5.2.1/scss/button-group";
// @import "./bootstrap-5.2.1/scss/nav";
// @import "./bootstrap-5.2.1/scss/navbar";
// @import "./bootstrap-5.2.1/scss/card";
// @import "./bootstrap-5.2.1/scss/accordion";
// @import "./bootstrap-5.2.1/scss/breadcrumb";
// @import "./bootstrap-5.2.1/scss/pagination";
// @import "./bootstrap-5.2.1/scss/badge";
// @import "./bootstrap-5.2.1/scss/alert";
// @import "./bootstrap-5.2.1/scss/progress";
// @import "./bootstrap-5.2.1/scss/list-group";
// @import "./bootstrap-5.2.1/scss/close";
// @import "./bootstrap-5.2.1/scss/toasts";
// @import "./bootstrap-5.2.1/scss/modal";
// @import "./bootstrap-5.2.1/scss/tooltip";
// @import "./bootstrap-5.2.1/scss/popover";
// @import "./bootstrap-5.2.1/scss/carousel";
// @import "./bootstrap-5.2.1/scss/spinners";
// @import "./bootstrap-5.2.1/scss/offcanvas";
// @import "./bootstrap-5.2.1/scss/placeholders";

// Helpers
@import "./bootstrap-5.2.1/scss/helpers";
// Utilities
@import "./bootstrap-5.2.1/scss/utilities";
// Utilities API
@import "./bootstrap-5.2.1/scss/utilities/api";

Compilez votre fichier style.scss en fichier CSS interprétable par votre navigateur

sass style.scss style.css

Ouvrez le fichier index.html dans votre navigateur favori pour constater le résultat.

Vous pouvez bien sûr ensuite décomposer votre code scss en différents fichiers ou partials et les importer (@use) dans le fichier style.scss

Javascript

A venir...

Maintenance

Vous n'avez pas besoin de versionner les sources de Bootstrap, seulement votre fichier style.scss. Vous pouvez télécharger Bootstrap à votre guise sur n'importe quelle machine afin de le brancher à votre projet.

Comme nous ne touchons pas directement aux sources, nous pouvons maintenir facilement notre projet et mettre à jour Bootstrap en cas de besoin.

Sass basics

A venir...

Bootstrap core

A venir...

Ressources utiles

• Documentation officielle de Bootstrap 5
• Dart Sass
• The Missing Bootstrap 5 Guide, de Jeppe Schaumburg Jensen, éditions Packt Publishing, un très bon livre qui vous explique comment tirer le maximum de Bootstrap et comment le personnaliser. Pour cela, on a un bref aperçu du fonctionnement du core de Bootstrap et comment utiliser l'utility API pour ajouter nos propres systèmes de design.