Bootstrap 3 : Créez facilement le design de vos sites Web

Référence : T448-035

Infos pratiques

  • Durée : 3 jours soit 21 heures
  • Population visée : Ouvrier – Employé – Employé qualifié – Cadre – Cadre supérieur
  • Public concerné : Toute personne souhaitant maitriser la présentation Responsive des applications Web et disposer d'une bibliothèque complète de fonctionnalités permettant de résoudre le casse-tête du développement Web

Programme

Objectifs pédagogiques

A l’issue de cette formation, l’apprenant sera capable de :

  • Intégrer la librairie Bootstrap dans votre projet
  • Structurer la page HTML et positionner le contenu avec une grille
  • Utiliser les styles prédéfinis
  • Mettre en oeuvre les composants simple
  • Personnaliser le thème
  • Intégrer des composants dynamiques avec la librairie complémentaire jQuery

Pré-requis

  • Connaître les notions fondamentales de la création de pages Web HTML

Objectifs opérationnels et contenu de la formation

Introduction générale

Présentation de HTML5 et CSS3

  • Structure d'une page HTML 5 et CSS 3
  • Balises importantes
  • Présentation des attributs HTML5

Introduction à jQuery

  • Présentation du framework jQuery
  • Gestion des événements
  • Manipuler le DOM
  • Manipuler le CSS
  • Manipuler les attributs HTML5

Introduction à Bootstrap 3

  • Présentation du framework Bootstrap 3
  • Télécharger et installer Bootstrap 3
  • Créer une première page HTML utilisant Bootstrap 3

Créer une interface Web Responsive

  • Présentation du concept de grilles de Bootstrap 3
    • 4 grilles pour 4 types de supports
    • Créer une page multi-grilles
  • Manipuler les grilles
    • Afficher et cacher des zones en fonction du support
    • Changer l'ordre des zones
    • Décaler les éléments d'une grille

La typographie

  • Disposition du texte
  • Mise en forme contextuelle
    • Texte simple
    • Bandeaux d'alerte contextuels
    • Les badges
    • Les labels
  • La bibliothèque Glyphicons

Les listes

  • Introduction
  • Les listes simples
  • Les listes en ligne
  • Les listes de définition
  • Les listes de définition horizontales
  • Les list-group
  • Media Objects

Les boutons

  • Les boutons contextuels
  • One class, multiple tag
  • Taille des boutons
  • Les boutons groupés
  • Boutons avec menu déroulant
  • Manipuler les boutons avec l'API Bootstrap 3
    • Via les attributs HTML5
    • Via la fonction .button()

Les formulaires

  • Principes de base
  • Formulaires horizontaux
  • Formulaires verticaux
  • Largeur des éléments du formulaire
  • Hauteur des éléments du formulaire
  • Les éléments groupés
  • Les messages d'aide
  • Messages d'aide contextuels

La navigation

  • Objectif
  • La barre de navigation principale
    • Première barre de navigation
    • Fixer la barre en haut ou en bas
    • Aligner le contenu
    • Insertion d'un bouton
    • Insertion d'un formulaire
    • Insertion d'un menu déroulant
    • Rendre la barre responsive
  • Les sous-menus
    • Sous-menus avec onglets
    • Sous-menus sans onglet
    • Sous-menus verticaux

Les images

  • Mise en forme
  • Manipuler la taille des images
  • Créer une étiquette
  • Le carrousel de Bootstrap 3
  • Manipuler le carrousel avec l'API Bootstrap 3
    • Via les attributs HTML5
    • Via la fonction .carousel()

Les infobulles

  • Objectif
  • Les tooltips
    • Présentation
    • Manipuler les tooltips avec l'API Bootstrap 3
  • Les popovers
    • Présentation
    • Manipuler les popovers avec l'API Bootstrap 3
  • Les fenêtres modales
    • Présentation
    • Manipuler les fenêtres modales avec l'API Bootstrap 3

Les tableaux et panneaux

  • Les tableaux
    • Présentation des différents types de tableaux
    • Lignes et cellules contextuelles
    • Tableaux adaptés aux supports mobiles
  • Les panneaux
    • Panneau simple
    • Panneau et tableau

Travaux pratique final

  • Nous terminons cette formation par un cas pratique d'une durée d'environ 2 heures. Il est demandé aux stagiaires de créer un mini site Web reprenant l'ensemble des éléments étudiés en cours. Le contenu est adapté en fonction des attentes initiales des stagiaires et des questions / intérêts de chacun.

Méthodes et moyens

 Explications théoriques suivies de pratiques guidées puis de mises en autonomie


Votre formation a lieu en présentiel :

  • 1 vidéoprojecteur par salle
  • 1 ordinateur

Votre formation se déroule à distance avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque)
  • 1 Webcam (facultatif – dans l’idéal)
  • 1 deuxième écran (facultatif – dans l’idéal)

Votre formation se déroule sur notre plate-forme de formation avec :

  • 1 ordinateur
  • 1 connexion Internet
  • 1 adresse e-mail valide
  • 1 équipement audio (micro et enceintes ou casque - facultatif)

Méthodes d’évaluation des acquis

L’acquisition des compétences de la formation se fait à travers le suivi du formateur tout au long de la formation (séquences synchrones et asynchrones). Elle s’appuie également sur la réalisation d’exercices et de TP. Enfin, des quiz s’ajoutent aux différents outils de validation de l’acquisition des compétences visées.
Une évaluation est systématiquement réalisée par chaque stagiaire, à l’issue de la formation.

Profil formateur

Nos formateurs sont certifiés à l’issue d’un parcours organisé par nos soins. Ils bénéficient d’un suivi de maintien et d’évolution de leurs compétences aussi bien au niveau technique que pédagogique.
Chacun de nos formateurs a bénéficié d’une formation spécifique à l’animation de classe virtuelle et à l’utilisation des solutions de formation à distance du Groupe ARKESYS.

Support stagiaire

À l’issue de la formation, les exercices et travaux pratiques réalisés, leurs corrigés ainsi qu’un support de cours dématérialisé sera fourni à chaque stagiaire par e-mail ou via la plate-forme FOAD.

Accessible à tous

Cette formation est accessible à toute personne en situation de handicap. Notre référent handicap prendra contact avec les stagiaires concernés pour adapter l’animation à leurs besoins et rendre l’apprentissage accessible à tous. Enfin, nos centres de formation sont accessibles aux personnes à mobilité réduite.