Formations courtes

Bootstrap : styles, composants et WebApp responsive

Initiation
3 jours - 21 heures
Paris
Habiller rapidement des pages Web et des WebApps

Objectifs

Pour qui ?

Prérequis

Compétences acquises

Objectifs

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

Pour qui ?

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.

Habiller rapidement des pages Web et des WebApps

Programme

Bootstrap : styles, composants et WebApp responsive

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 pages 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 (fi l 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 et 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é
Bootstrap : styles, composants et WebApp responsive
Ref
WM08819
Tarif
1700€ HT

Prochaines sessions

Le choix de la session vous sera demandé lors de votre inscription.

Cette formation vous intéresse ?