TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment utiliser les dispositions de grille Bootstrap 5 ?

221

Bootstrap 5 offre un puissant système de mise en page de grille qui permet de créer facilement des mises en page adaptées aux mobiles. Il existe six points d’arrêt réactifs pour différentes tailles d’appareils dans le système de disposition de grille Bootstrap. Il y a 12 colonnes dans chacune et en mélangeant et en faisant correspondre, vous pouvez créer différentes mises en page que vous désirez. Le système de grille est basé sur une boîte flexible et est entièrement réactif.

Tutoriel de mise en page de la grille Bootstrap 5

Ce didacticiel contient les sujets suivants :

  1. Notions de base sur la mise en page de la grille
  2. Système de grille de niveau 5
  3. Grille simple de largeur égale
  4. Une largeur de colonne et redimensionner les autres colonnes
  5. Contenu à largeur variable
  6. Grille de plusieurs lignes de largeur égale
  7. Grille horizontale empilée
  8. Alignement vertical
  9. Alignement horizontal
  10. Grille sans gouttières
  11. Grille de poteaux enveloppés
  12. Réorganisation du contenu des colonnes dans la grille
  13. Décalage de colonne
  14. Imbrication dans la grille

1 Bases du système de grille Bootstrap

Le système de grille utilise trois classes CSS principales pour créer la mise en page nécessaire – .container, .row et .col. Le conteneur couvre la mise en page complète, puis les lignes, puis les colonnes.

  • Utilisez la classe .container pour centrer le contenu avec une largeur fixe et .container-fluid pour une mise en page pleine largeur réactive.
  • Vous pouvez utiliser la classe .row pour inclure toutes les colonnes horizontales divisées en 12 de largeur égale.
  • Placez le contenu réel dans les colonnes à l’aide des classes .col ou .col-*. Par exemple, une ligne peut contenir deux colonnes comme .col-8 + .col-4. La colonne doit être l’enfant immédiat de la classe de ligne.
  • Toutes les colonnes utilisent flexbox, ce qui signifie que l’utilisation simple de la classe .col divisera la ligne en colonnes de largeur égale. Par exemple, lorsque vous utilisez deux classes .col dans une ligne, elles seront automatiquement réparties en deux zones à 50%.
  • Vous pouvez définir explicitement la largeur de la colonne comme .col-sm-8 qui occupera 3/4 (75%) de la largeur de la ligne.
  • Par défaut, les colonnes et les lignes ont un remplissage et une marge pour une meilleure visibilité. Vous pouvez supprimer la marge et le remplissage en ajoutant une classe supplémentaire ".noglutter" avec ".row".
  • Bootstrap 5 propose six points d’arrêt – extra petit (xs), petit (sm), moyen (md), grand (lg), extra large (xl) et extra extra large (xxl).
  • Tous les niveaux de points d’arrêt utilisent par défaut la classe .col. Toutes les autres classes utilisées seront appliquées à tous les appareils de niveau supérieur. Par exemple, .col-sm-4 (small) sera appliqué aux appareils de petite, moyenne, grande et très grande taille.

Système de grille à 2 niveaux 6

Le tableau ci-dessous montre les six niveaux de points d’arrêt proposés dans Bootstrap 5:

Grille Super petit Petit Moyen Grand Extra large Très Très Grand
Point d’arrêt <576px ≥576px 768px 992px 1200px ≥1400px
Classe CSS .avec le- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Largeur maximale du conteneur Aucun (automatique) 540px 720px 960px 1140px 1320px
  • Colonnes – Chaque ligne est divisée en 12 colonnes de largeur égale.
  • Largeur de gouttière – 15 pixels de chaque côté de la colonne pour un total de 30 pixels.
  • Imbrication – Oui, les colonnes peuvent être imbriquées dans une autre colonne.
  • Ordre des colonnes – Oui, le contenu à l’intérieur de n’importe quelle colonne d’une ligne peut être réorganisé.

Montrons différents exemples pour mieux comprendre les grilles :

3 grille simple de largeur égale

Créez une grille simple avec des colonnes égales en utilisant simplement les classes ".col". Lors de l’utilisation de classes ".col", la ligne sera automatiquement divisée en colonnes de largeur égale. Par exemple, lorsque vous utilisez deux classes ".col", la ligne sera divisée en deux colonnes 1/2 + 1/2. Vous trouverez ci-dessous un exemple de codes pour créer des colonnes 1/2+1/2 et 1/3+1/3+1/3 à l’aide de simples classes ".col".

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> <div class="col"> .col </div> </div> </div>

Les colonnes égales seront affichées sur le navigateur comme ci-dessous :

Comment utiliser les dispositions de grille Bootstrap 5 ?

4 Une largeur de colonne et redimensionner d’autres colonnes

Le système de grille Bootstrap vous permet de définir la largeur d’une colonne et les colonnes restantes dans la même ligne seront automatiquement ajustées. Par exemple, lorsque vous définissez «col + col-6 + col» dans une ligne, il sera automatiquement divisé comme des colonnes «1/3+1/6+1/3 ». Vous trouverez ci-dessous deux exemples de définition d’une colonne, puis les deux autres colonnes restantes seront ajustées en conséquence.

Comment utiliser les dispositions de grille Bootstrap 5 ?

Vous trouverez ci-dessous le code pour ajuster les colonnes entourant la colonne avec la largeur définie :

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> </div> </div>

5 Contenu à largeur variable

La largeur des colonnes peut être limitée au contenu réel en utilisant la classe ".col-{breakpoint}-auto", par exemple, ".col-md-auto".

Comment utiliser les dispositions de grille Bootstrap 5 ?

Les colonnes du milieu dans l’exemple ci-dessus sont automatiquement ajustées à la largeur du contenu. Vous trouverez ci-dessous le code de la disposition de la grille ci-dessus :

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

6 Grille de plusieurs rangées de largeur égale

Créez simplement une disposition de plusieurs colonnes dans une ligne en utilisant les classes ".col" en continu. Il vous suffit d’insérer la classe ".w-100" où un point d’arrêt est requis.

Comment utiliser les dispositions de grille Bootstrap 5 ?

Vous trouverez ci-dessous le code pour créer plusieurs rangées de largeur égale à l’aide d’une seule classe « rangée ».

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> </div>

7 Grille horizontale empilée

Vous pouvez créer une disposition de grille empilée à l’aide de classes ".col-sm-" qui seront étendues à une grille horizontale sur le bureau.

Comment utiliser les dispositions de grille Bootstrap 5 ?

Vous trouverez ci-dessous le code permettant de créer une disposition de grille horizontale empilée, comme indiqué ci-dessus.

<div class="row"> <div class="col-sm-8">.col-sm-8</div> <div class="col-sm-4">.col-sm-4</div> </div> <div class="row"> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> </div>

8 Alignement vertical

L’alignement vertical du contenu à l’intérieur d’une colonne peut être ajusté en ajoutant l’une des trois classes suivantes avec la classe ".row" comme ci-dessous :

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 Alignement horizontal

Semblable à l’alignement vertical, vous pouvez également ajuster l’alignement horizontal des colonnes comme ci-dessous :

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

Cela produira le résultat suivant sur le navigateur :

Comment utiliser les dispositions de grille Bootstrap 5 ?

10 Grille sans gouttières

Par défaut, les colonnes auront un remplissage horizontal et les lignes auront des marges horizontales négatives pour un meilleur alignement. Vous pouvez supprimer ces marges et rembourrages en utilisant la classe "sans gouttières" avec "ligne" comme indiqué ci-dessous.

<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>

Il produira le résultat suivant :

Comment utiliser les dispositions de grille Bootstrap 5 ?

11 Grille de colonnes enveloppées

Lorsque vous avez plus de 12 colonnes dans une ligne, les colonnes seront automatiquement renvoyées à la ligne suivante. Par exemple, les deux premières colonnes ci-dessous s’adapteront à la première ligne (9+2=11) tandis que les troisième et quatrième colonnes seront insérées dans une nouvelle ligne.

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

Les colonnes enveloppées ressembleront à ci-dessous :

Comment utiliser les dispositions de grille Bootstrap 5 ?

12 Réorganisation du contenu des colonnes dans la grille

Bootstrap vous permet de réorganiser le contenu d’une colonne quelle que soit la position dans une ligne. Par exemple, trois colonnes sont utilisées dans la disposition de la grille ci-dessous.

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

Le résultat ressemble à ci-dessous sans colonne ordonnée aura la priorité de toutes les autres colonnes ordonnées et affiché dans la première colonne. Le contenu de la colonne utilisant la classe "order-12" sera déplacé vers la dernière position. Et le contenu de la colonne utilisant "order-1" sera déplacé vers la position centrale (première).

Comment utiliser les dispositions de grille Bootstrap 5 ?

13 Décalage de colonne

À partir de Bootstrap 4, ils ont abandonné la fonction de décalage de colonne en raison de l’utilisation de la disposition de la grille flexbox. Mais vous pouvez toujours déplacer les colonnes à l’aide de classes utilitaires de marge telles que "ml-auto", "mr-auto", etc.

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div>

Vous trouverez ci-dessous le résultat de la compensation de colonne à l’aide de classes de marge :

Comment utiliser les dispositions de grille Bootstrap 5 ?

14 Imbrication dans la grille

Vous pouvez également imbriquer les colonnes dans d’autres colonnes, comme indiqué ci-dessous :

<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div>

Il produira le résultat suivant :

Comment utiliser les dispositions de grille Bootstrap 5 ?

Conclusion

Comme vous pouvez le voir, vous pouvez créer de nombreuses mises en page par défaut avec le système de mise en page de grille Bootstrap 5. Il est également possible de créer des CSS personnalisés pour créer des mises en page personnalisées ou modifier l’une des mises en page par défaut. La disposition solide de la grille flexbox et les composants réutilisables rendent Bootstrap 5 plus solide que la version précédente.


Apprendre Bootstrap 5 (Index )


Source d’enregistrement: www.webnots.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails