Bootstrap : grille partie 3 imbrication des colonnes et des rangées

bootstrap 4

Plan du cours

Dans cette dernière partie nous allons voir comment imbriquer des colonnes et des rangées, c’est indispensable si vous voulez pouvoir structurer votre site de façon plus complexe.

Exemple basique (2 niveaux)

Commençons par un exemple simple en imbriquant une rangée dans une autre rangée.

imbrication
colonnes

Exemple intermédiaire (4 niveaux)

Prenons un autre exemple beaucoup plus complexe avec 4 niveaux d’imbrications et des décalages entre les colonnes se trouvant dans les rangées de niveau 4.
Je vous donnerai plus d’explications à la suite de cet exemple.

imbrication
imbrication

Explication :

La rangée 1 englobe tout le bloc.
La rangée 2 contient 2 colonnes et est imbriquée dans la colonne 1 de la rangée 1.
La rangée 3 contient 2 colonnes et est imbriquée dans la colonne 1 de la rangée 2.
La rangée 4 contient 2 colonnes et est imbriquée dans la colonne 2 de la rangée 3.

Si tout ceci vous semble confus revoyez cet exemple plusieurs fois. Il est primordial que vous compreniez bien ce système d’imbrication.

Exemple avancé (4 niveaux)

Nous allons voir un dernier exemple en faisant la structure d’une page de base avec:

  • Un header.
  • Un menu factice, (nous verrons les véritables menus que propose bootstrap dans une autre leçon, ici pas de bouton ni de liens cliquables juste du positionnement.
  • Deux barres latérales avec plusieurs rangées et colonnes.
  • Un contenu principal.
  • Un footer.
imbrication
imbrication
imbrication

Cet article a 1 commentaire

  1. Eⲭcеllent way of explaining, and goοd paragrаph to get data regarding my pгesentation topic, which i am going to deliver
    in college.

Laisser un commentaire