Journée 1 :
Découverte de Bootstrap.
- Introduction à Bootstrap
- Historique des versions
- Différence entre Bootstrap 3, 4 et 5
- Les préprocesseurs CSS Less et Sass dans Bootstrap
Développement d'un premier site avec Bootstrap 5.
- Utiliser un exemple de site Bootstrap 5 pour démarrer un projet.
- Interpréter la documentation officiel de Bootstrap 5
- Installation de Bootstrap 5
- Les container (.container et .container-fluid)
- Utilisation de la grille (grid) adapté au responsive design
- Manipulation des lignes (.row) et colonnes par tailles d'écran
Mise en place du code HTML / CSS à l'aide de la documentation Bootstrap 5.
- Typographie
- Les listes
- Tableaux
- Formulaires
- Boutons
- Images
Mise en place du code Javascript.
- Boite de dialogue de type pop-up (Modal)
- Liste déroulante (Dropdown)
- Accordéon (Collapse)
- Animation d'images et texte dans un carrousel (Carousel)
- Fixer un élément ou un menu vers le haut lors d'un défilement de la page (Affix)
Composants principaux de Bootstrap 5
- Utilisation de police d'écriture
- Menu de navigation (Navbar)
Bonne pratique pour modifier le code CSS de bootstrap sans modifier la feuille de style originale.
Journée 2 :
Evolution de Bootstrap.
- Comprendre les différences et nouveautés majeurs de Bootstrap 5
- Les flexbox dans Bootstrap 4 et 5
- Non prise en charge des navigateurs IE8, IE9, iOS 6.
- Utilisation de l'unité de mesure rem au lieu de px principalement pour les textes.
- Taille de police globale augmentée de 14px à 16px (1 rem).
- Réorganisation des grilles (5 niveaux de col-) par taille d'écran
- Réécriture de la barre de navigation (Navbar) avec les flexbox
- Utilisation des polices d'icônes pour afficher des icônes sur les pages
- D'autres nouveautés à découvrir
Développement d'un second site avec Bootstrap 5 à partir d'un template.
Rédiger un avis public