CATALOGUE Code & Data Formation Bootstrap Apprendre Bootstrap - Le Framework Front-End Personnaliser le Comportement des Colonnes dans Bootstrap

Personnaliser le Comportement des Colonnes dans Bootstrap

Savoir utiliser les préfixes xs - sm - md -lg
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Bootstrap - Le Framework Front-End
Revoir le teaser Je m'abonne
2,5
Transcription

Cette leçon fait partie de la formation
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
2,5
Cette leçon fait partie de la formation
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

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

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.

Voir plus
Questions réponses
Pourquoi les colonnes passent-elles à 100% en mode mobile par défaut?
En mode mobile, Bootstrap ne définit plus de taille pour les divs, ce qui les met à 100% par défaut.
Comment utiliser les préfixes de classe pour différentes tailles d'écran?
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.
Que se passe-t-il si seule la classe XS est spécifiée?
Si seule la classe XS est spécifiée, la taille définie sera appliquée indépendamment de la largeur de l'écran.
2 commentaires
2,5
2 votes
5
4
3
2
1
ideal.micro40
Il y a 1 semaine
video sur Bootstrap 3 alors qu'on est sur la version 5.3.6.
on parle de jquery alors que dans la version il n'y est plus
on nous parle de phpstorm comme editeur qui est payant voir lez bloc note (au secours !!!)
il y a vscode qui maintenant est utiliser par quasi tous les développeurs et qui est gratuit.

sur la video : Maîtriser les Grilles et Colonnes dans Bootstrap
1 - le cours annonce la modification pour passer sur 4 colonne puis de changer les titres,
a ce moment la on reviens en arrière à la modification pour passer en 4 colonnes... et ça recommence
grosse erreur de montage.

2 - ensuite push et pull ont été supprimé pour utiliser le système flexbox sur la version 5
avec les classes order pour gérer l'ordre des colonnes.

3 - l'explication sur le offset n'est absolument pas claire :
on a une première explication, puis une deuxième qui est la même mais avec le résultat directe avec offset.

bref je vais être franc j'ai trouver une formation sur udemy sur bootstrap 5 bien plus intéressante, je ne trouve pas normal d'avoir une formation sur bootstrap 3 qui nous induit en erreur.
ayant passer ce premier chapitre j’arrête car je ne vois aucun intérêt à continuer.
Stephd
Il y a 4 ans
tres bonne formation c est une bonne decouverte generale.