> Formations > Technologies numériques > Technologies Web > Développement Front-End > Formation Bootstrap 5, développer des pages web responsive > Formations > Technologies numériques > Formation Bootstrap 5, développer des pages web responsive
Formation incontournable

Formation : Bootstrap 5, développer des pages web responsive

Bootstrap 5, développer des pages web responsive

Télécharger au format pdf Partager cette formation par e-mail 2


Le framework Bootstrap, créé par les développeurs de Twitter, est devenu un framework CSS et JavaScript de référence dans la conception de sites web. Vous apprenez à habiller vos pages et à les enrichir de composants interactifs avec Bootstrap 5 afin de rendre vos sites attractifs et adaptatifs.


Inter
Intra
Sur mesure

Cours pratique en présentiel ou en classe à distance

Réf. BTP
Prix : 1550 € H.T.
  2j - 14h00
Pauses-café et
déjeuners offerts




Le framework Bootstrap, créé par les développeurs de Twitter, est devenu un framework CSS et JavaScript de référence dans la conception de sites web. Vous apprenez à habiller vos pages et à les enrichir de composants interactifs avec Bootstrap 5 afin de rendre vos sites attractifs et adaptatifs.

Objectifs pédagogiques
À l’issue de la formation, le participant sera en mesure de :
  • Intégrer Bootstrap 5 dans un projet web
  • Réaliser des pages web reprenant les codes esthétiques des sites actuels
  • Maîtriser les composants et les plug-ins du framework Bootstrap 5
  • Développer des sites web responsive

Public concerné
Webmaster, développeur, intégrateur.

Prérequis
Connaître HTML et CSS et avoir des notions de JavaScript.
Vérifiez que vous avez les prérequis nécessaires pour profiter pleinement de cette formation en faisant  ce test.

Programme de la formation

Présentation du framework

  • Vue d'ensemble du framework Bootstrap 5 et des autres frameworks.
  • L'apport de Bootstrap 5 par rapport à CSS.
  • Les éléments du kit Bootstrap 5 (grilles, normalize.css, icônes, plug-ins...).
  • Comprendre l'arborescence des différents fichiers : feuilles de style, JavaScript...
  • Lier une page web à la feuille de style de base de Bootstrap 5.
Travaux pratiques
Installation de Bootstrap 5. Habiller une page HTML avec Bootstrap 5.

Les feuilles de style de Bootstrap 5

  • 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 dans une page.
  • Surcharger la feuille de style.
Travaux pratiques
Styler les différents éléments constituant une page web avec les CSS de Bootstrap 5. Personnaliser le style de certains éléments de la page.

Les grilles

  • Comprendre le concept de grille.
  • Les grilles adaptatives (le responsive web design, media queries, positionnement...).
  • Organisation de la grille. Manipuler les grilles.
  • Grid Layout dans Bootstrap 5.
  • Flexbox dans Bootstrap 5.
  • Disposition des colonnes.
  • L'ordre des blocs.
Travaux pratiques
Créer une page web responsive basée sur une grille.

Les composants de base JavaScript

  • Utilisation du carrousel.
  • Les menus responsives améliorés.
  • Les composants de navigation et de pagination.
  • Les boutons, les badges, les alertes.
  • Les barres de progression.
Travaux pratiques
Conception d'une page web pour un site Internet ou intranet intégrant plusieurs composants Bootstrap 5.

Les modules à la carte de Bootstrap 5

  • Utiliser un serveur JavaScript (Node, Deno, Parcel).
  • Définir un Bootstrap sur mesure avec uniquement le nécessaire.
  • Inclure des modules bootstrap.js dans le Webpack.
Travaux pratiques
Créer un projet sur mesure avec uniquement les modules CSS et JavaScript dont on a besoin.

Les plug-ins de Bootstrap 5

  • Les fenêtres modales. Les accordéons. Le carrousel de photos.
  • Formulaire validateur.
  • Les champs d'autocomplétion.
  • Navigation verticale.
  • Multi-item carrousel.
  • Editeur WYSIWYG (What You See Is What You Get).
Travaux pratiques
Intégrer des effets visuels modernes par le biais de plug-ins JavaScript associés à la bibliothèque Bootstrap 5.

Analyse des modèles Bootstrap 5

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


Modalités pratiques
Travaux pratiques
Réalisation d'une interface administrateur back office avec Bootstrap 5. Création d'un site web responsive depuis un modèle Bootstrap 5.
Méthodes pédagogiques;
Les cours comprennent pour moitié des exposés, pour l'autre de la pratique.

Modalités d'évaluation
Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de QCM, mises en situation, travaux pratiques…
Le participant complète également un test de positionnement en amont et en aval pour valider les compétences acquises.

Solutions de financement
Pour trouver la meilleure solution de financement adaptée à votre situation : contactez votre conseiller formation.
Il vous aidera à choisir parmi les solutions suivantes :
  • Le plan de développement des compétences de votre entreprise : rapprochez-vous de votre service RH.
  • Le dispositif FNE-Formation.
  • L’OPCO (opérateurs de compétences) de votre entreprise.
  • Pôle Emploi sous réserve de l’acceptation de votre dossier par votre conseiller Pôle Emploi.
  • Le plan de développement des compétences de votre entreprise : rapprochez-vous de votre service RH.
  • Le dispositif FNE-Formation.
  • L’OPCO (opérateurs de compétences) de votre entreprise.
  • Pôle Emploi sous réserve de l’acceptation de votre dossier par votre conseiller Pôle Emploi.

Avis clients
4,3 / 5
Les avis clients sont issus des évaluations de fin de formation. La note est calculée à partir de l’ensemble des évaluations datant de moins de 12 mois. Seules celles avec un commentaire textuel sont affichées.
BAPTISTE B.
15/05/23
4 / 5

Très bien, manque un peu plus de cas usuels et pratiques..
SARRAZIN ISABELLE B.
15/05/23
5 / 5

Tout très bien, un peu plus de pratique aurait été appréciée.
DORUNTINE F.
15/05/23
5 / 5

Contenu intéressant et avec des bons exemples pour illustrer les propos.




Horaires
En présentiel, les cours ont lieu de 9h à 12h30 et de 14h à 17h30.
Les participants sont accueillis à partir de 8h45. Les pauses et déjeuners sont offerts.
En classe à distance, la formation démarre à partir de 9h.
Pour les stages pratiques de 4 ou 5 jours, quelle que soit la modalité, les sessions se terminent à 15h30 le dernier jour.

Dates et lieux
Sélectionnez votre lieu ou optez pour la classe à distance puis choisissez votre date.
Classe à distance