← Retour aux formations

Développement Web & No-Code

Bootstrap 5, développer des pages web responsive

Intermédiaire
Développement Web & No-Code

À propos de cette formation

Cette formation couvre l'ensemble du framework Bootstrap 5. Les participants apprennent à structurer un projet Bootstrap, à exploiter les feuilles de style et les grilles adaptatives, à intégrer des composants JavaScript interactifs et des plug-ins, et à personnaliser le framework selon leurs besoins via SASS.

Objectifs de la formation

  • check_circleIntégrer Bootstrap 5 dans un projet web
  • check_circleRéaliser des pages web reprenant les codes esthétiques des sites actuels
  • check_circleMaîtriser les composants et les plug-ins du framework Bootstrap 5
  • check_circleDévelopper des sites web responsive

Programme détaillé

Module 1 — Présentation du framework

  • Vue d'ensemble de Bootstrap 5 et des autres frameworks CSS
  • L'apport de Bootstrap 5 par rapport à CSS natif
  • Les éléments du kit Bootstrap 5 : grilles, normalize.css, icônes, plug-ins
  • Arborescence des fichiers : feuilles de style, JavaScript
  • Liaison d'une page HTML à la feuille de style de base Bootstrap 5
  • Travaux pratiques : installation de Bootstrap 5 et habillage d'une page HTML

Module 2 — Les feuilles de style de Bootstrap 5

  • CSS pour les éléments textuels et les images
  • CSS pour les éléments de formulaires et les tableaux
  • Utilisation des polices icônes pour afficher des icônes sur les pages
  • CSS pour la mise en page et les blocs dans une page
  • Surcharger la feuille de style
  • Travaux pratiques : stylisation des éléments d'une page avec Bootstrap 5 et personnalisation du style

Module 3 — Les grilles

  • Concept de grille et grilles adaptatives : responsive web design, media queries, positionnement
  • Organisation et manipulation des grilles
  • Grid Layout dans Bootstrap 5
  • Flexbox dans Bootstrap 5
  • Disposition des colonnes et ordre des blocs
  • Travaux pratiques : création d'une page web responsive basée sur une grille Bootstrap 5

Module 4 — Les composants de base JavaScript

  • Utilisation du carrousel
  • Menus responsives améliorés
  • Composants de navigation et de pagination
  • Boutons, badges et alertes
  • Barres de progression
  • Travaux pratiques : conception d'une page web intégrant plusieurs composants Bootstrap 5

Module 5 — Les modules à la carte de Bootstrap 5

  • Utiliser un serveur JavaScript : Node, Deno, Parcel
  • Définir un Bootstrap sur mesure avec uniquement les modules nécessaires
  • Inclure des modules bootstrap.js dans Webpack
  • Travaux pratiques : création d'un projet sur mesure avec les seuls modules CSS et JavaScript requis

Module 6 — Les plug-ins de Bootstrap 5

  • Fenêtres modales, accordéons et carrousel de photos
  • Formulaire validateur et champs d'autocomplétion
  • Navigation verticale et multi-item carrousel
  • Éditeur WYSIWYG
  • Travaux pratiques : intégration d'effets visuels modernes via des plug-ins JavaScript associés à Bootstrap 5

Module 7 — Analyse des modèles Bootstrap 5

  • Analyser des modèles construits avec Bootstrap 5
  • Créer un site à partir d'un modèle existant
  • Créer une page en surchargeant le fichier CSS
  • Utiliser des fichiers SASS avec un préprocesseur et/ou un serveur JavaScript
  • Travaux pratiques : création de son propre Bootstrap.css

Prérequis

Maîtriser HTML et CSS. Des notions en JavaScript sont attendues.