CATALOGUE Code & Data Formation Bootstrap Apprendre Bootstrap - Le Framework Front-End

Personnaliser le Comportement des Colonnes dans Bootstrap

Retour à la formation
Chapitre 2 Leçon 2
Précédent
Suivant

Apprenez à personnaliser manuellement le comportement des colonnes en Bootstrap pour des affichages adaptés à chaque format d'écran.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous découvrons comment personnaliser le comportement des colonnes Bootstrap pour qu'elles s'adaptent intuitivement à différentes tailles d'écran. Nous explorerons les concepts liés aux préfixes de classe xs, sm, md et lg, et comment les utiliser pour définir la largeur des colonnes en fonction de l'amplitude de largeur de l'écran.

Nous apprendrons notamment que par défaut, les colonnes définies en MD6 affichent à 50% de la largeur en mode bureau, tandis qu'en mode mobile, elles s'affichent à 100% de la largeur disponible. Grâce à une manipulation simple de ces classes, comme col-xs-6, les colonnes peuvent être configurées pour rester à 50% même sur des petites résolutions.

En utilisant plusieurs préfixes de classe, nous démontrons comment créer un comportement adaptatif pour les pages web, assurant une présentation cohérente sur différentes résolutions d'écran, notamment en accumulant plusieurs classes pour une gestion fine des colonnes. Nous détaillons également chaque point avec des exemples de code et applications pratiques.

Objectifs de cette leçon

Les objectifs de cette vidéo sont d'apprendre à:

  • Personnaliser les colonnes Bootstrap pour différents écrans.
  • Utiliser les préfixes de classe XS, SM, MD, et LG.
  • Créer une disposition de grille adaptable et réactive.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir:

  • Des connaissances de base en HTML et CSS.
  • Une compréhension élémentaire de Bootstrap.

Métiers concernés

Cette compétence est particulièrement utile pour des métiers tels que:

  • Développeur Front-end
  • Web Designer
  • Intégrateur Web

Alternatives et ressources

Des alternatives à Bootstrap pour la création de grilles réactives incluent:

  • Foundation
  • Bulma
  • Tailwind CSS

Questions & Réponses

En mode mobile, Bootstrap ne définit plus de taille pour les divs, ce qui les met à 100% par défaut.
En ajoutant des préfixes tels que XS, SM, MD, et LG à la classe de colonne, vous pouvez définir le comportement de la colonne pour différentes largeurs d'écran.
Si seule la classe XS est spécifiée, la taille définie sera appliquée indépendamment de la largeur de l'écran.