Bootstrap 5

Objectifs

Apprendre à utiliser les composants de base de Bootstrap
Découvrez les éléments fondamentaux de Bootstrap, comme les boutons, les alertes, les cartes et les barres de navigation. Apprenez comment les intégrer facilement dans vos pages web pour améliorer leur structure et leur fonctionnalité.
Comprendre les principes de grille de Bootstrap et comment les utiliser pour organiser les éléments sur une page
Maîtrisez le système de grille de Bootstrap, qui permet de diviser l'écran en lignes et colonnes pour une mise en page fluide et responsive. Apprenez à ajuster la disposition des éléments selon la taille de l'écran, garantissant ainsi une présentation optimale sur tous les appareils.
Apprendre à utiliser les classes de mise en forme de Bootstrap pour créer des boutons, des formulaires, des navbars, des modals, etc.
Explorez les classes utilitaires de Bootstrap pour concevoir des composants interactifs tels que des boutons stylisés, des formulaires élégants, des barres de navigation et des fenêtres modales, afin d'enrichir l'expérience utilisateur sur votre site.
Comprendre comment utiliser les plugins JavaScript de Bootstrap pour ajouter des fonctionnalités telles que les carrousels, les accordéons, les tabs, etc.
Apprenez à intégrer les plugins JavaScript fournis par Bootstrap pour ajouter des éléments dynamiques à votre site, comme des carrousels d'images, des accordéons déroulants, des onglets et d'autres composants interactifs qui améliorent l'interface.
Apprendre à personnaliser les styles de Bootstrap en utilisant les variables Sass et les règles CSS personnalisées
Découvrez comment ajuster l'apparence de Bootstrap en modifiant ses variables Sass et en ajoutant des règles CSS sur mesure. Personnalisez les couleurs, les polices et d'autres éléments visuels pour donner à votre projet une touche unique.
Apprendre à créer un thème Bootstrap personnalisé pour un projet en utilisant les variables Sass et les règles CSS personnalisées
Maîtrisez la création d'un thème Bootstrap entièrement personnalisé en utilisant les variables Sass pour configurer les paramètres globaux et les règles CSS personnalisées pour répondre aux besoins spécifiques de votre projet. Cela permet de créer un design cohérent et distinctif.

Programme de la formation

Module 1 : Introduction à Bootstrap 5
Objectif : Comprendre les bases de Bootstrap et ses avantages.
Contenu :
Présentation de Bootstrap : Qu'est-ce que c'est et pourquoi l'utiliser ?
Historique de Bootstrap : Évolution et impact sur le développement web.
Avantages et inconvénients de Bootstrap : Pourquoi choisir cette bibliothèque ?
Installation de Bootstrap : Comment l'intégrer dans un projet ?
Présentation de l'éditeur de code utilisé : Configuration de l'environnement de travail.
Travaux pratiques : Création d'un projet de base avec Bootstrap, intégration de la bibliothèque et mise en place de la structure.
Module 2 : Utilisation de la grille de Bootstrap
Objectif : Apprendre à organiser le contenu avec la grille de Bootstrap.
Contenu :
Présentation de la grille de Bootstrap : Comprendre le système de colonnes et lignes.
Utilisation des classes de grille : Création de mises en page réactives adaptées à différents écrans.
Utilisation des classes d'offset : Comment décaler les colonnes pour obtenir des mises en page plus complexes.
Travaux pratiques : Création d'une mise en page réactive en utilisant la grille de Bootstrap pour structurer un site simple.
Module 3 : Utilisation des composants de Bootstrap
Objectif : Découvrir et intégrer les composants essentiels de Bootstrap.
Contenu :
Présentation des composants de Bootstrap : Composants de base comme la navbar, les boutons, les formulaires, etc.
Utilisation des composants pour créer des éléments communs : Comprendre comment intégrer ces éléments pour améliorer l'interface utilisateur.
Travaux pratiques : Création d'un site web de base en utilisant ces composants pour l'interface (navigation, boutons, formulaires).
Module 4 : Personnalisation de Bootstrap
Objectif : Savoir personnaliser les styles de Bootstrap pour un projet unique.
Contenu :
Présentation des options de personnalisation : Introduction aux variables SASS, surcharge de classes, et autres options de personnalisation.
Utilisation des options de personnalisation : Modifier l'apparence par défaut de Bootstrap pour répondre aux besoins spécifiques.
Travaux pratiques : Amélioration du site web créé précédemment en personnalisant les couleurs, les polices et les autres éléments visuels pour un look unique.

Validation et sanction

Attestation de formation

Type de formation

Non certifiante

Sortie

Sans niveau spécifique