01 40 26 00 99 15 rue de turbigo - 75002 Paris Nous contacter

Développement Bootstrap : styles, composants et WebApp responsive

Habiller rapidement des pages Web et des WebApps

Objectifs

→ Définir le rôle de Bootstrap
→ Réaliser des mises en pages responsive
→ Maîtriser les styles génériques de Bootstrap
→ Utiliser les composants Bootstrap
→ Créer et personnaliser une application Web avec Bootstrap

Public concerné

Intégrateurs, webdesigners et développeurs.

Pré-requis

Il est nécessaire de maîtriser le HTML et d’avoir des notions de CSS. La connaissance de JavaScript n’est pas requise (les notions de base sont rappelées) mais facilitera l’accès à cette formation.

Pré-requis

Il est nécessaire de maîtriser le HTML et d’avoir des notions de CSS. La connaissance de JavaScript n’est pas requise (les notions de base sont rappelées) mais facilitera l’accès à cette formation.

Programme

Définir le rôle de Bootstrap

  • Connaître les bases de HTML5 et CSS3
  • Maîtriser la notion de responsive design avec les Media Queries
  • Comprendre le rôle d‘une bibliothèque CSS
  • Comprendre le rôle de Bootstrap et ses avantages
  • Savoir récupérer et installer Bootstrap dans ses projets
  • Connaître le support des navigateurs et la compatibilité

 

Étude de cas : analyse de pages réalisées avec Bootstrap et recommandation de sites

Réaliser des mises en pages responsive

  • Comprendre la notion de “Mobile First”
  • Maîtriser le système de grille de Bootstrap
  • Savoir gérer les options et la taille des écrans
  • Savoir mélanger mobile, tablette et desktop
  • Maîtriser le décalage et l‘imbrication des colonnes

 

Exercice : création de pages responsive

Maîtriser les styles génériques de Bootstrap

  • Maîtriser la typographie : titres, listes, alignements, effets graphiques…
  • Mettre en page des formulaires : form-group, inline…
  • Décorer efficacement ses formulaires : input, textarea, checkboxes…
  • Enrichir ses formulaires avec des effets CSS sur les inputs, les icônes
  • Tout savoir sur les boutons : options, couleur, taille et états
  • Insérer des images responsive

 

Exercice : création et personnalisation de formulaires responsive

Utiliser les composants Bootstrap

  • Informer avec les icônes
  • Gérer des choix avec le menu déroulant et le groupe de boutons
  • Organiser la navigation avec le composant navbar
  • Se repérer avec les composants pagination et breadcrumbs (fil d‘Ariane)
  • Informer avec les composants labels, badges et jumbotron
  • Accompagner l‘utilisateur avec les alertes et la barre de progression
  • Structurer ses pages avec les panels, les groupes de listes, les wells

 

Exercice : tester les composants dans une mini WebApp

Créer et personnaliser une application Web avec Bootstrap

  • Personnaliser Bootstrap
  • Créer sa propre version personnalisée en ligne
  • Compiler ses fichiers *.less en *.CSS

 

Exercice : créer une WebApp sur la base d‘un wireframe imposé

Méthodes pédagogiques

Alternance de théorie, de démonstrations et de mise en pratique grâce à de nombreux exercices. Les apprenants construisent progressivement la maquette d‘une petite application Web, type backoffice / Intranet.

Moyens techniquesMoyens spécifiques à cette formation :→ Logiciels : Sublime Text 3, plugins installés en cours, le navigateur et ses outils de développement (Firefox ou Chrome)

Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateurDéveloppeur Web ayant plus de 10 ans d‘expérience en enseignement.
Marketing Digital
Web
Médias sociaux
Voir toutes les formations

Bootstrap : styles, composants et WebApp responsive

3 jours 21 heures 4 170 €HT*

* À partir de

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis
L'avis des participants
La formation a été très satisfaisante grâce à un excellent formateur pédagogue et à l’écoute. Cela m'a permis de consolider mes connaissances.
Amrati A. - Webmaster (session du 1e au 3 mars 2017)