1

Présentation du framework

• Vue d'ensemble du framework Bootstrap 5 et des autres frameworks.
• L'apport de Bootstrap 5 par rapport à CSS.
• Les éléments du kit Bootstrap 5 (grilles, normalize.css, icônes, plug-ins...).
• Comprendre l'arborescence des différents fichiers : feuilles de style, JavaScript...
• Lier une page web à la feuille de style de base de Bootstrap 5.

2

Les feuilles de style de Bootstrap 5

• Les CSS pour les éléments textuels et les images.
• Les CSS pour les éléments de formulaires et les tableaux.
• Utilisation des polices icônes pour afficher des icônes sur les pages.
• Les CSS pour la mise en page, les blocs dans une page.
• Surcharger la feuille de style.

3

Les grilles

• Comprendre le concept de grille.
• Les grilles adaptatives (le responsive web design, media queries, positionnement...).
• Organisation de la grille. Manipuler les grilles.
• Grid Layout dans Bootstrap 5.
• Flexbox dans Bootstrap 5.
• Disposition des colonnes.
• L'ordre des blocs.

4

Les composants de base JavaScript

• Utilisation du carrousel.
• Les menus responsives améliorés.
• Les composants de navigation et de pagination.
• Les boutons, les badges, les alertes.
• Les barres de progression.

5

Les modules à la carte de Bootstrap 5

• Utiliser un serveur JavaScript (Node, Deno, Parcel).
• Définir un Bootstrap sur mesure avec uniquement le nécessaire.
• Inclure des modules bootstrap.js dans le Webpack.

6

Les plug-ins de Bootstrap 5

• Les fenêtres modales. Les accordéons. Le carrousel de photos.
• Formulaire validateur.
• Les champs d'autocomplétion.
• Navigation verticale.
• Multi-item carrousel.
• Editeur WYSIWYG (What You See Is What You Get).

7

Analyse des modèles Bootstrap 5

• Analyser des modèles construits à partir de Bootstrap 5.
• Créer un site avec un des modèles.
• Créer une page à partir d'un modèle en surchargeant le fichier CSS.
• Utiliser des fichiers SAAS avec un préprocesseur et/ou un serveur JavaScript (NodeJS).