Bootstrap : grille partie 3 imbrication des colonnes et des rangées
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.
Commençons par un exemple simple en imbriquant une rangée dans une autre rangée.
Légende
Fond noir : rangée niveau 1
Fond gris : rangée niveau 2
Bordure blanche : colonne
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.
Légende
Fond noir : rangée niveau 1
Fond gris : rangée niveau 2
Fond violet : rangée niveau 3
Fond orange : rangée niveau 4
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.
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.
Merci pour ce cours très clair et très bien expliqué.
Cours très instructif