Bootstrap - Masonry Demo

Introduction à Bootstrap Masonry

Bonjour, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant de Bootstrap Masonry. En tant que votre gentil voisin professeur d'informatique, je suis ravi de vous guider dans cette aventure. Même si vous n'avez jamais écrit une ligne de code auparavant, ne vous inquiétez pas - nous allons avancer pas à pas, et bientôt vous serez capable de créer des layouts magnifiques et dynamiques comme un pro !

Bootstrap-Masonry Demo

Qu'est-ce que Bootstrap Masonry ?

Bootstrap Masonry est une technique de mise en page puissante qui vous permet de créer une grille d'éléments avec des hauteurs variables. Imaginez un mur de briques de tailles différentes s'assemblant parfaitement - c'est l'essence de Masonry ! Il est particulièrement utile pour créer des galeries d'images, des portfolios ou tout contenu où vous souhaitez un aspect rangé et organisé sans gaspiller d'espace.

Commencer avec Bootstrap Masonry

Configuration de votre projet

Avant de plonger dans le code, configurons notre projet. Nous devons inclure Bootstrap et la bibliothèque Masonry dans notre fichier HTML. Ne vous inquiétez pas si cela semble déroutant au début - je vais expliquer chaque partie au fur et à mesure.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Démonstration Bootstrap Masonry</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Notre contenu ira ici -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js"></script>
</body>
</html>

Reprenons cela :

Nous commençons avec la structure HTML de base.
Dans le <head>, nous faisons un lien vers le fichier CSS de Bootstrap.
Au bas du <body>, nous incluons les fichiers JavaScript de Bootstrap et Masonry.

Ces fichiers nous donnent les outils nécessaires pour créer notre mise en page Masonry.

Créer votre première mise en page Masonry

Maintenant, créons une mise en page Masonry simple avec quelques boîtes colorées. Ajoutez ce code à l'intérieur de la balise <body> :

<div class="container my-5">
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white">
<div class="card-body">
<h5 class="card-title">Boîte 1</h5>
<p class="card-text">Cette boîte est courte.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-success text-white">
<div class="card-body">
<h5 class="card-title">Boîte 2</h5>
<p class="card-text">Cette boîte est un peu plus haute. Masonry s'ajustera !</p>
<p class="card-text">Regardez comment elle s'adapte bien.</p>
</div>
</div>
</div>
<!-- Ajoutez plus de boîtes ici -->
</div>
</div>

Reprenons cela :

Nous créons un conteneur avec une rangée à l'intérieur.
L'attribut data-masonry='{"percentPosition": true }' indique à Bootstrap d'utiliser la mise en page Masonry pour cette rangée.
Chaque boîte est une colonne (col-sm-6 col-lg-4) avec une carte à l'intérieur.
Nous utilisons différentes couleurs d'arrière-plan (bg-primary, bg-success) pour rendre nos boîtes visuellement distinctes.

Personnaliser votre mise en page Masonry

Maintenant que nous avons notre mise en page de base, explorons quelques moyens de la personnaliser.

Ajouter des éléments de tailles différentes

L'une des beautés de Masonry est la gestion des éléments de tailles différentes. Ajoutons quelques boîtes avec du contenu variable :

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-warning">
<div class="card-body">
<h5 class="card-title">Boîte 3</h5>
<p class="card-text">Cette boîte est vraiment haute !</p>
<p class="card-text">Elle contient beaucoup de contenu.</p>
<p class="card-text">Masonry s'assurera qu'elle s'adapte parfaitement.</p>
<p class="card-text">Peu importe sa hauteur.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title">Boîte 4</h5>
<p class="card-text">Retour à une boîte courte.</p>
</div>
</div>
</div>

Ajouter des images à votre mise en page Masonry

Masonry est excellent pour les galeries d'images. Ajoutons quelques images à notre mise en page :

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Image aléatoire">
<div class="card-body">
<h5 class="card-title">Carte avec image</h5>
<p class="card-text">Cette carte contient une image.</p>
</div>
</div>
</div>

Ce code ajoute une carte avec une image aléatoire de Lorem Picsum. L'image se charge en 300x200 pixels, mais vous pouvez ajuster ces nombres pour obtenir des images de tailles différentes.

Techniques avancées

Filtrer les éléments Masonry

Une fonctionnalité sympa que nous pouvons ajouter est la capacité de filtrer nos éléments Masonry. Ajoutons quelques boutons de filtrage et attribuons des catégories à nos éléments :

<div class="container my-5">
<div class="mb-3">
<button class="btn btn-primary filter-btn" data-filter="all">Tous</button>
<button class="btn btn-secondary filter-btn" data-filter="category1">Catégorie 1</button>
<button class="btn btn-secondary filter-btn" data-filter="category2">Catégorie 2</button>
</div>
<div class="row" id="masonry-grid" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category1">
<!-- Contenu de l'élément -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category2">
<!-- Contenu de l'élément -->
</div>
<!-- Plus d'éléments... -->
</div>
</div>

Pour faire fonctionner cela, nous devons ajouter un peu de JavaScript :

<script>
document.addEventListener('DOMContentLoaded', function() {
var grid = document.querySelector('#masonry-grid');
var msnry = new Masonry(grid, {
percentPosition: true
});

var filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(function(button) {
button.addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
var items = grid.querySelectorAll('.masonry-item');

items.forEach(function(item) {
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});

msnry.layout();
});
});
});
</script>

Ce script fait ce qui suit :

Initialise Masonry sur notre grille.
Ajoute des écouteurs d'événements sur nos boutons de filtrage.
Lorsqu'un bouton est cliqué, il affiche/masque les éléments en fonction de leur catégorie.
Après le filtrage, il appelle msnry.layout() pour réorganiser les éléments visibles.

Conclusion

Félicitations ! Vous avez vient de créer votre première mise en page Bootstrap Masonry. Du layout de base aux filtres avancés, vous avez maintenant les outils pour créer des layouts dynamiques et réactifs qui feront ressortir vos pages web.

N'oubliez pas, la clé pour maîtriser le développement web est la pratique. Essayez d'expérimenter avec différents contenus, layouts et fonctionnalités. N'ayez pas peur de casser des choses - c'est souvent ainsi que nous apprenons les leçons les plus précieuses en codage.

Continuez à construire, continuez à apprendre, et surtout, amusez-vous avec cela ! Avant de vous en rendre compte, vous créerez des layouts web qui feraient jaloux même les maçons les plus habiles. Bon codage !

Méthode	Description
`Masonry(element[, options])`	Initialise Masonry sur un élément
`msnry.layout()`	Déclenche la mise en page après avoir fait des changements
`msnry.appended(elements)`	Ajoute et met en page des éléments nouvellement ajoutés
`msnry.prepended(elements)`	Ajoute et met en page des éléments nouvellement ajoutés en début
`msnry.destroy()`	Supprime complètement la fonctionnalité Masonry

Credits: Image by storyset

Tutoriel précédent:

Bootstrap-Demo de pied de page collant avec barre de navigation

Tutoriel suivant:

Démo de modèle de départ Bootstrap