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.
Travaux pratiques
Installation de Bootstrap 5. Habiller une page HTML avec 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.
Travaux pratiques
Styler les différents éléments constituant une page web avec les CSS de Bootstrap 5. Personnaliser le style de certains éléments de la page.
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.
Travaux pratiques
Créer une page web responsive basée sur une grille.
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.
Travaux pratiques
Conception d'une page web pour un site Internet ou intranet intégrant plusieurs composants Bootstrap 5.
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.
Travaux pratiques
Créer un projet sur mesure avec uniquement les modules CSS et JavaScript dont on a besoin.
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).
Travaux pratiques
Intégrer des effets visuels modernes par le biais de plug-ins JavaScript associés à la bibliothèque Bootstrap 5.
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).
Travaux pratiques
Créer son propre Bootstrap.css.