Bootstrap - Maîtriser les Frameworks CSS/HTML

Objectifs d'apprentissage

• Comprendre le concept de framework CSS/HTML et son utilité dans le développement web moderne.
• Maîtriser l'installation et la configuration de Bootstrap dans un projet web.
• Apprendre à utiliser la grille responsive de Bootstrap pour créer des layouts adaptatifs.
• Découvrir les composants clés de Bootstrap (navigation, typographie, boutons, formulaires).
• Savoir personnaliser Bootstrap grâce au système de thèmes et aux variables CSS.
• Mettre en pratique les concepts à travers des exercices concrets de mise en page.

Public cible

Ce cours s'adresse aux développeurs web débutants ou intermédiaires souhaitant améliorer leur productivité grâce aux frameworks CSS. Les designers web y trouveront également des outils pour prototyper rapidement des interfaces. Une connaissance de base du HTML et CSS est recommandée pour tirer pleinement profit de cette formation.

Framework ?

Un framework CSS est une collection de fichiers prédéfinis qui standardisent le développement front-end. Bootstrap, créé par Twitter, est le plus populaire avec ses systèmes de grille, composants réutilisables et outils responsive. Il permet de gagner un temps considérable tout en garantissant une bonne compatibilité entre navigateurs.

Le contenu de Bootstrap

Bootstrap se compose de quatre éléments principaux : un système de grille responsive (12 colonnes par défaut), des composants UI pré-stylisés (boutons, cartes, navbar), des utilitaires CSS (marges, padding, visibilité) et des plugins JavaScript optionnels (carrousels, modales). La version 5 a abandonné jQuery pour du JavaScript vanilla.

La base HTML(5) de Bootstrap

Bootstrap nécessite une structure HTML5 valide avec la balise viewport pour le responsive. Le framework s'appuie sur des classes CSS plutôt que des sélecteurs complexes, ce qui permet une courbe d'apprentissage douce. Les exercices pratiques porteront sur la création d'une page conforme aux standards Bootstrap.

Exercice

Créer une page HTML5 intégrant Bootstrap via CDN, implémenter un conteneur fluid et expérimenter avec les classes de base (bg-primary, text-center etc.).

Positionnement CSS et décoration avec un Framework

La puissance de Bootstrap réside dans son approche systématique du positionnement. Contrairement au CSS traditionnel où chaque élément est stylisé individuellement, le framework propose des classes utilitaires réutilisables.

Utilisation de la grille d'un framework

Le système de grille est le cœur de Bootstrap. Basé sur Flexbox, il permet de créer des layouts complexes grâce à un système de lignes (row) et colonnes (col). La grille s'adapte automatiquement à la taille de l'écran grâce à cinq breakpoints (xs à xl).

Qu'est-ce qu'une grille ?

Une grille CSS divise l'espace horizontal en colonnes (12 par défaut) avec des gouttières (gutter) pour l'espacement. Les éléments s'étendent sur un nombre défini de colonnes, créant ainsi des rapports proportionnels.

Le cas de la grille de Bootstrap

Bootstrap implémente une grille mobile-first où les éléments s'empilent verticalement sur mobile (col-12 par défaut) puis s'alignent horizontalement sur les écrans plus larges (ex: col-md-6).

Exercice

Construire un layout en trois colonnes égales sur desktop qui s'empile sur mobile, avec des couleurs de fond distinctes pour visualiser les zones.

Quelques classes CSS spécifiques de Bootstrap

Outre la grille, Bootstrap propose des centaines de classes utilitaires couvrant typographie, espacement, couleurs, bordures et effets visuels.

Des classes pour positionner sur la grille

Les classes comme "offset-md-2" ou "order-lg-1" permettent un positionnement avancé sans CSS personnalisé. Les utilitaires Flexbox (d-flex, justify-content-between) complètent le système.

Des classes typographiques et décoratives

Bootstrap standardise la typographie avec des classes comme "display-4" pour les gros titres ou "text-muted" pour le texte secondaire. Les badges, alertes et cards offrent des éléments UI prêts à l'emploi.

Exercice

Créer une carte produit responsive avec image, titre, description et bouton CTA en utilisant uniquement les classes Bootstrap.

Mise en œuvre de la navigation

Bootstrap simplifie la création de systèmes de navigation complexes et responsive sans JavaScript personnalisé.

Une barre de menu avec Bootstrap

Le composant navbar supporte menus déroulants, formulaire de recherche et adaptation automatique en menu hamburger sur mobile. La personnalisation passe par des classes comme "navbar-dark bg-dark".

Exercice

Implémenter une navbar avec logo, liens principaux, menu déroulant et champ recherche, qui se transforme en menu hamburger sur mobile.

Un fil d'Ariane avec Bootstrap

Le composant breadcrumb (fil d'Ariane) aide à la navigation hiérarchique. Bootstrap le stylise simplement avec la classe "breadcrumb" et des "breadcrumb-item".

Exercice

Intégrer un fil d'Ariane reflétant une structure de catégories produit à trois niveaux.

Conception adaptative (Responsive design)

Bootstrap intègre le responsive design au cœur de son approche, avec des outils spécifiques pour chaque besoin d'adaptation.

Les classes "responsives" de Bootstrap

Le principe mobile-first signifie qu'on style d'abord pour mobile puis on ajoute des adaptations progressives (ex: col-md-).

Largeur des éléments

Les classes comme "w-lg-50" permettent de contrôler la largeur relative selon le breakpoint. Les images deviennent responsive avec "img-fluid".

Montrer/cacher des éléments

Les utilitaires "d-none d-md-block" permettent de masquer/afficher des éléments selon la taille d'écran, crucial pour l'optimisation mobile.

Le menu responsive de Bootstrap

La navbar se transforme automatiquement en menu hamburger sur mobile grâce au plugin Collapse. Aucun code JavaScript personnalisé n'est nécessaire pour cette fonctionnalité.

Exercice

Créer une page avec : en-tête responsive, menu adaptatif, bannière full-width, section trois colonnes (empilée sur mobile) et pied de page. Utiliser les utilitaires responsive pour optimiser l'affichage mobile.