Bootstrap

Intégrer Bootstrap dans un projet Web.Maîtriser les composants et les plug-ins du framework Bootstrap.Développer des sites Web responsive.

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.