null

Développement Front-End

Bootstrap

Objectif

Intégrer Bootstrap dans un projet Web
Maîtriser les composants et les plug-ins du framework Bootstrap
Développer des sites web responsive

Durée : 2 jours (14 heures)

Dates :
-06/02/23
-26/06/23
-11/09/23

Connaissances en HTML et CSS et notions de JavaScript

Programme de la formation

Présentation du framework

  • Vue d'ensemble du framework Bootstrap
  • L'apport de Bootstrap par rapport à CSS
  • Les éléments du kit Bootstrap (grilles, Normalize.css, icônes, plug-ins jQuery…)
  • Comprendre l'arborescence des différents fichiers : feuilles de style, JavaScript…
  • Lier une page Web à la feuille de style de base de Bootstrap

Les feuilles de style de Bootstrap

  • 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 de texte
  • Personnaliser sa feuille de style

Les grilles

  • Comprendre le concept de grille
  • Les grilles adaptatives (le Responsive Web Design, Media Queries, positionnement…)
  • Organisation de la grille. Manipuler les grilles
  • Flexbox dans Bootstrap
  • Disposition des colonnes
  • L'ordre des blocks

Les composants de base

  • Les deux fichiers JavaScript nécessaires
  • Les marges de chaque block
  • Les menus responsives améliorés
  • Les composants de navigation et de pagination
  • Les boutons, les badges, les alertes
  • Les barres de progression
  • Les tableaux, les listes d'éléments

Les plug-ins jQuery de Bootstrap

  • Les fenêtres modales. Les accordéons. Le carrousel de photos
  • La barre de navigation. Les onglets. Les menus déroulants
  • Les champs d'auto-complétion
  • Intégration de plug-ins externes (Datepicker...)
  • Les cards conteneurs flexibles et extensibles
Menu