Informatique Informatique
Référence formation : 4-BOOT - Durée : 2 jours

 
  • Objectifs
  • Pré-requis
  • Pédagogie
Intégrer Bootstrap dans un projet Web.Maîtriser les composants et les plug-ins du framework Bootstrap.Développer des sites Web responsive.
Connaissance en HTML et CSS et avoir des notions de JavaScript.

Méthodes pédagogiques

Présentation des concepts, démonstration, exécution, synthèse et exercices pratiques d'assimilation

Modalités pédagogiques

Présentiel - Distanciel - AFEST

Moyens pédagogiques

Formateur expert du domaine - 1 ordinateur, 1 support de cours version papier ou numérique, un bloc-note et un stylo par personne - vidéo projecteur - tableau blanc

Modalités d'évaluation

Positionnement préalable oral ou écrit - Evaluation formative tout au long de la formation - Evaluation sommative faite par le formateur ou à l'aide de la certification NULL

Public concerné

Salariés - Demandeur d'emploi - Reconversion professionnelle

Si vous êtes en situation de handicap, vous pouvez joindre notre référent Handicap. Voir notre fiche Accès correspondante.

Contenu pédagogique

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.