Programmation : Bootstrap

Public visé

• Développeurs web et intégrateurs qui souhaitent gagner du temps sur la mise en page
• Webdesigners et créateurs de sites qui veulent produire des interfaces responsives
• Étudiants et autodidactes en développement web déjà à l'aise avec HTML et CSS

Prérequis

• Des bases en HTML et en CSS sont nécessaires pour suivre la formation. Aucune connaissance préalable de Bootstrap n'est requise.
• Prérequis techniques :
• Navigateur web : Google Chrome recommandé

Objectifs pédagogiques

• Structurer une page web avec le système de grilles de Bootstrap et gérer son comportement responsive
• Remplacer le CSS écrit à la main par les classes utilitaires de Bootstrap
• Styliser des éléments complexes : tableaux, images, boutons, listes et formulaires
• Intégrer les composants de navigation, d'information et d'affichage proposés par le framework
• Mettre en œuvre l'ensemble sur des cas pratiques reproduisant les conditions d'un projet réel

Contenu de la formation

① Programmation : Bootstrap ➤ Cas pratique 1 ➜ Créer des colonnes avec les grilles Bootstrap ➜ Aligner et espacer les colonnes des grilles Bootstrap ➜ Gérer l'ordre des colonnes et l'imbrication de lignes ➜ Mettre en forme des textes ➜ Modifier la couleur de fond, du texte et l'opacité des éléments ➜ Modifier les dimensions des éléments ➜ Modifier les bordures des éléments ➜ Ajouter des marges aux éléments ➤ Cas pratique 2 ➜ Modifier l'affichage des éléments ➜ Modifier le positionnement des éléments ➜ Cacher les éléments et gérer les dépassements ➜ Ajouter des ombres aux éléments ➜ Créer des tableaux ➜ Gérer les images et les figures ➜ Créer des boutons ➜ Créer des groupes de listes ➜ Structurer des formulaires ➤ Cas pratique 3 ➜ Créer un menu de navigation avec Bootstrap ➜ Créer des éléments et des menus déroulants avec Bootstrap ➜ Créer des barres de navigation complexes avec Bootstrap ➜ Utiliser les autres composants de navigation Bootstrap ➜ Alertes, boites modales et notifications toast Bootstrap ➜ Boites d'aide et popovers Bootstrap ➜ Barres de progression et spinners Bootstrap ➜ Utiliser les cartes ou cards ➜ Créer un carrousel ➤ Fonctionnement de base du framework Bootstrap ➜ Présentation de Bootstrap ➜ Présentation du fonctionnement de Bootstrap ➜ Présentation du système de grilles de Bootstrap ➜ Créer des colonnes dans les grilles Bootstrap et gérer leur taille ➜ Gérer l'alignement et l'espacement des colonnes des grilles Bootstrap ➜ Gérer l'ordre d'affichage des colonnes et l'imbrication de lignes dans une grille Bootstrap ➤ Classes Bootstrap et propriétés CSS ➜ La normalisation des styles des éléments HTML Bootstrap avec Reboot ➜ Mettre en forme des textes avec les classes Bootstrap ➜ Modifier la couleur, la couleur de fond et l'opacité des éléments avec Bootstrap ➜ Gérer les dimensions des éléments avec Bootstrap ➜ Ajouter des bordures aux éléments avec Bootstrap ➜ Ajouter des marges aux éléments avec Bootstrap ➜ L'affichage des éléments : Bootstrap display et display : flex ➜ Gérer le type de positionnement des éléments avec Bootstrap ➜ Cacher des éléments et gérer les dépassements avec Bootstrap ➜ Ajouter des ombres aux éléments avec Bootstrap ➤ Styliser des éléments complexes avec Bootstrap ➜ Créer des tableaux stylisés avec Bootstrap ➜ Gérer les images et les figures avec Bootstrap ➜ Créer des boutons stylisés avec Bootstrap ➜ Créer des groupes de listes et appliquer des styles à des listes avec Bootstrap ➜ Structurer et styliser des formulaires avec Bootstrap ➤ Les composants de navigation Bootstrap ➜ Créer un menu de navigation avec Bootstrap ➜ Créer des éléments et des menus déroulants avec Bootstrap ➜ Créer des barres de navigation complexes avec Bootstrap ➜ Les autres composants de navigation Bootstrap : breadcrumb, pagination et scrollspy ➤ Les composants informatifs Bootstrap ➜ Alertes, boites modales et notifications toast Bootstrap ➜ Boites d'aide et popovers Bootstrap ➜ Barres de progression et spinners Bootstrap ➤ Autres composants visuels Bootstrap ➜ Badges et jumbotron Bootstrap ➜ Les cartes ou cards Bootstrap ➜ Le composant Bootstrap collapse ➜ Créer un carrousel avec Bootstrap ② Évaluation des acquis ➜ Testez ce que vous avez retenu