Bootstrap 5 - Système de grille

Présentation de Bootstrap

• Synthèse de Bootstrap
• Ce pourquoi le produit est fait
• Ce qu'apporte Bootstrap par rapport à un développement conventionnel
• Vocabulaire Bootstrap
• L'arborescence des fichiers Bootstrap 3, 4 et 5
• Différences en Bootstrap 3, 4 et 5
• Lier une page aux feuilles de style Bootstrap

Installation de Bootstrap

• Installation locale ou par Content Delivery Network (CDN)
• Comprendre les relations entre Bootstrap, CSS et JavaScript

Mise en page

• Présentation des grilles CSS et de l'application du Responsive Design
• Cellules, lignes et colonnes
• Fonctionnement d'une page responsive
• Positionnement avec Flexbox
• Les nouveaux breakpoints (taille d'écran)

CSS avec Bootstrap

• Classes CSS livrées par défaut
• Présentation des différentes typographies
• Images, objets de type bouton et autres
• Surcharger les styles au profit de ceux développés
• CSS dynamiques : SASS remplace LESS

Menu de navigation

• Différents types de navigation
• Navigation conventionnelle
• Navigation depuis un Smartphone

Formulaires et tableaux

• Présentation de la création de formulaires
• Création d'un formulaire avec Bootstrap
• Présentation de la création de tableaux avec Bootstrap
• Création de tableaux avec Bootstrap

Fonts personnalisés

• Police d'écritures d'icônes
• Bootstrap Icons
• Font Awesome...
• Police d'écriture Google

Utilisation des animations fournies par Bootstrap en JavaScript

• Cas où JavaScript peut être nécessaire
• Cas des menus déroulants intelligents
• Onglets
• Accordéons...

Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.

Modalités d’évaluation des acquis

• En cours de formation, par des études de cas ou des travaux pratiques
• Et, en fin de formation, par un questionnaire d'auto-évaluation