Apprendre Compréhension du Système de Grille Bootstrap

Disposition en 12 colonnes

Le système de grille de Bootstrap divise la page en 12 colonnes, offrant une structure de mise en page flexible et réactive. Cela permet aux développeurs de créer des conceptions visuellement attrayantes et bien structurées qui s'adaptent parfaitement à différentes tailles d'écran et appareils.

Classes de grille

container : La classe container englobe et centre le contenu dans un conteneur de largeur fixe. Elle fournit des marges intérieures, des marges extérieures et assure un alignement correct du contenu ;
row : La classe row crée un groupe horizontal de colonnes. Elle sert de conteneur pour les colonnes, garantissant leur bon alignement et l'espacement entre elles ;
col : Les colonnes à l'intérieur d'une ligne sont définies à l'aide de la classe col. Les développeurs spécifient la largeur des colonnes avec des classes telles que col-6, col-md-4 ou col-lg-3.

Conception réactive

Le système de grille de Bootstrap est conçu pour être réactif, permettant au contenu de s'adapter dynamiquement en fonction de la taille de la fenêtre d'affichage et du type d'appareil. Les développeurs peuvent utiliser des classes de grille réactives comme col-md-6 ou col-lg-4 pour spécifier la largeur des colonnes selon différentes tailles d'écran, telles que les appareils moyens ou grands.

Remarque

Dans Bootstrap, les classes sm, md, lg et xl représentent différentes tailles d'écran

Exemples

Exemple 1 : Mise en page de grille de base

Dans cet exemple, un conteneur comprend une seule ligne contenant trois colonnes de largeur égale. Chaque colonne occupe une portion égale de la largeur de la ligne, ce qui donne une disposition horizontale à trois colonnes.

index.html

Exemple 2 : Mise en page de grille réactive

Dans cet exemple, un conteneur possède une ligne avec trois colonnes. Les deux premières colonnes (col-md-6) sont configurées pour occuper la moitié de la largeur de la ligne sur les écrans de taille moyenne et supérieure. La troisième colonne (col-md-12) est configurée pour occuper toute la largeur de la ligne sur les écrans de taille moyenne et supérieure. Cela garantit que la troisième colonne occupe toute la largeur de la ligne.

index.html

Résultat du comportement de la grille réactive

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 1

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you explain how to use the different grid classes in Bootstrap?

What do the sm, md, lg, and xl classes mean in practice?

Can you provide more examples of responsive layouts using Bootstrap?

Awesome!

Completion rate improved to 3.23

Glissez pour afficher le menu

Disposition en 12 colonnes

Classes de grille

container : La classe container englobe et centre le contenu dans un conteneur de largeur fixe. Elle fournit des marges intérieures, des marges extérieures et assure un alignement correct du contenu ;
row : La classe row crée un groupe horizontal de colonnes. Elle sert de conteneur pour les colonnes, garantissant leur bon alignement et l'espacement entre elles ;
col : Les colonnes à l'intérieur d'une ligne sont définies à l'aide de la classe col. Les développeurs spécifient la largeur des colonnes avec des classes telles que col-6, col-md-4 ou col-lg-3.

Conception réactive

Remarque

Dans Bootstrap, les classes sm, md, lg et xl représentent différentes tailles d'écran

Exemples

Exemple 1 : Mise en page de grille de base

index.html

Exemple 2 : Mise en page de grille réactive

index.html

Résultat du comportement de la grille réactive

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 1