contact@bootstrap-top-design.com

Voici comment vous pouvez à l’aide des classes flexbox de Bootstrap, réaliser une propre mise en page (Partie 1)

mise en page à l'aide des classes flexbox de Bootstrap

A la fin de ce cours, vous connaitrez les classes flexbox de Bootstrap et vous serez en mesure de  les utiliser pour:

·        Faire une mise en page soigneuse

·        Rendre flexibles les éléments de votre page web

·        Positionner ces éléments dans le sens qui vous convient

·        Ensuite, faire des alignements spécifiques avec les éléments de l’interface de vos pages web.

Vous allez pouvoir réaliser toutes ces choses grâce au module flexbox intégré dans Bootstrap. Tout comme le système de grille de Bootstrap, les classes flexbox de Bootstrap vous permettent de bien organiser les éléments de vos interfaces pour que les pages de vos applications web soient bien présentables.

Au cas où vous n’auriez pas suivi le tutoriel sur le système de grille de Bootstrap, voici les différents points détaillés dans le cours.

·     Définissez le point de départ de votre grille Bootstrap

·     Intégrez le système de colonnage de Bootstrap au sein de la grille

·      Définissez le comportement de votre grille selon le type d’écran d’affichage

Retrouver le cours en entier en cliquant sur le lien suivant : 3 étapes simples pour maitriser une fois pour de bon l’utilisation du système de grille de Bootstrap.

La flexbox : Qu’est-ce que c’est ?

les contenus qui seront publiés sur le blog Bootstrap Top Design

Flexbox (Flexible Box) qui signifie en français conteneur flexible est un module CSS3 de disposition qui permet d’agencer naturellement les éléments d’une interface.

Elle s’utilise en faisant appel à ses propriétés pour faire la mise en page des éléments, mais bootstrap l’a intégrée dans sa bibliothèque pour éviter à ses utilisateurs une surcouche de styles CSS implémentant ce module.

Vous découvrirez dans la suite du cours les classes flexbox de bootstrap vous permettant de réaliser de magnifiques mises en page sur l’interface de vos pages web.

PS: Pour que vous puissiez bien remarquer le comportement défini dans les exemples, j’ai appliqué une bordure et des marges internes aux éléments.

Rendez le conteneur de vos éléments flexibles :

rendre un élément flexible à l'aide des classes flexbox de Bootstrap

Le principe de la flexbox est de définir un conteneur principal au sein duquel vous imbriquez les éléments enfants. Ensuite de rendre ce conteneur principal flexible.

Bootstrap vous offre le choix entre deux classes pour rendre votre conteneur principal flexible :

·        La classe .d-flex qui vous permet de créer un conteneur flexible qui occupe toute la largeur de l’écran

·        La classe .d-inline-flex qui vous permet de créer un conteneur flexible qui s’adapte à son contenu

Exemple 1 : Nous allons réaliser deux conteneurs, l’un qui occupe tout l’espace d’affichage et l’autre qui s’adapte à son contenu.

<!-- Premier Conteneur -->
    <div class="d-flex">
	     <p>Je suis le conteneur flexible qui occupe toute la largeur de l'écran</p>
    </div>

<!-- Second Conteneur -->
    <div class="d-inline-flex">
	    <p>Je suis le conteneur flexible qui s'adapte à son contenu</p>
    </div>
Démo de l’exemple 1



Le rôle de l’outil flexbox ne s’arrête pas là, vous avez la possibilité d’agir sur les éléments imbriqués dans le conteneur principal.

Agencez les éléments imbriqués comme bon vous semble :

Agencer des éléments à l'aide des classes flexbox de Bootstrap

Par défaut une fois qu’un conteneur principal est défini, les éléments imbriqués s’alignent horizontalement de la gauche vers la droite.

Le module flexbox vous offre le choix de garder cette disposition ou de spécifier la disposition que vous voulez.

Positionnez vos éléments imbriqués horizontalement dans le sens qui vous plait :

Pour la disposition horizontale des éléments imbriqués, vous pouvez spécifier aux éléments :

·        de s’aligner en partant de la gauche vers la droite à l’aide de la classe .flex-row

·        Ou de s’aligner de la droite vers la gauche en utilisant la classe .flex-row-reverse

Exemple 2 : Réalisons deux exemples qui illustrent comment utiliser ces deux classes

<!-- Eléments imbriqués positionnés horizontalement de la gauche vers la droite -->
	<div class="d-flex flex-row">
		<p>Premier Paragraphe</p>
		<p>Second Paragraphe</p>
		<p>Troisième Paragraphe</p>
	</div>

<!-- Eléments imbriqués positionnés horizontalement de la droite vers la gauche -->
	<div class="d-flex flex-row-reverse">
		<p>Premier Paragraphe</p>
		<p>Second Paragraphe</p>
		<p>Troisième Paragraphe</p>
	</div> 
Démo de l’exemple 2

Positionnez vos éléments imbriqués verticalement dans le sens qui vous convient :

Tout comme l’alignement horizontal, le principe est le même sauf qu’ici soit vous disposerez vos éléments verticalement du haut vers le bas ou soit du bas vers le haut.

Voici les classes Bootstrap mises à votre disposition pour définir ces comportements :

·        La classe .flex-column permet de disposer les éléments du haut vers le bas

·        La classe .flex-column-reverse au contraire de .flex-column dispose les éléments du bas vers le haut.

Exemple 3 : Disposons verticalement les éléments imbriqués à l’aide de ces classes

<!-- Eléments imbriqués disposés verticalement du haut vers le bas -->
	<div class="d-flex flex-column">
		<p>Premier Paragraphe</p>
		<p>Second Paragraphe</p>
		<p>Troisième Paragraphe</p>
	</div>

<!-- Eléments imbriqués disposés verticalement du bas vers le haut -->
	<div class="d-flex flex-column-reverse">
		<p>Premier Paragraphe</p>
		<p>Second Paragraphe</p>
		<p>Troisième Paragraphe</p>
	</div> 
Démo de l’exemple 3



Nous venons de terminer la première partie de ce cours, n’oubliez pas seule la pratique vous permettra de bien maitriser le cours. Du coup refaites les exemples du cours, vous pourriez vous-même imaginer des mises en page et essayer de les réaliser à l’aide du module flexbox.

Dans la seconde partie de ce cours, vous étudierez comment aligner les éléments imbriqués dans le conteneur principal selon les axes principal et secondaire.

Sois informé à chaque nouvelle publication d’un nouveau tutoriel sur le blog en cliquant sur le lien suivant : je veux m’inscrire

2 Responses

  1. Françoise dit :

    Pages not found sur les liens…

Laisser un commentaire