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

Bootstrap 4 Grille
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.

flexbox imbrication
.col

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.

flexbox imbrication
flexbox 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.
flexbox imbrication
flexbox imbrication
flexbox imbrication

3 Commentaires
Tout afficher Most Helpful Highest Rating Lowest Rating Ajouter votre avis
  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.

  2. Merci pour ce cours très clair et très bien expliqué.

  3. Cours très instructif

Laisser un commentaire

error: Content is protected !!
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0