Bootstrap - Demo Masonry
Introduzione a Bootstrap Masonry
Ciao, futuri sviluppatori web! Oggi esploreremo il mondo emozionante di Bootstrap Masonry. Come il tuo amico insegnante di informatica, sono entusiasta di guidarti in questo viaggio. Anche se non hai mai scritto una riga di codice prima, non preoccuparti - andremo passo per passo, e presto sarai in grado di creare layout bellissimi e dinamici come un professionista!
Cos'è Bootstrap Masonry?
Bootstrap Masonry è una tecnica di layout potente che ti permette di creare una griglia di elementi con altezze variabili. Immagina un muro di mattoni di dimensioni diverse che si incastrano perfettamente - questa è l'essenza di Masonry! È particolarmente utile per creare gallerie di immagini, portfolio o qualsiasi contenuto dove vuoi un aspetto ordinato e organizzato senza sprecare spazio.
Iniziare con Bootstrap Masonry
Configurazione del Progetto
Prima di immergerci nel codice, configuriamo il nostro progetto. Avremo bisogno di includere Bootstrap e la libreria Masonry nel nostro file HTML. Non preoccuparti se questo sembra confusionario all'inizio - spiegherò ogni parte man mano che procediamo.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Masonry Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Il nostro contenuto andrà qui -->
<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>Ecco una spiegazione dettagliata:
- Iniziamo con la struttura HTML di base.
- Nel
<head>, colleghiamo il file CSS di Bootstrap. - Alla fine del
<body>, includiamo i file JavaScript di Bootstrap e Masonry.
Questi file ci danno gli strumenti di cui abbiamo bisogno per creare il nostro layout Masonry.
Creazione del Primo Layout Masonry
Ora creiamo un layout Masonry semplice con一些人 colorate. Aggiungiamo questo codice all'interno del tag <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">Box 1</h5>
<p class="card-text">Questo è un box breve.</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">Box 2</h5>
<p class="card-text">Questo box è un po' più alto. Masonry si adatterà!</p>
<p class="card-text">Guarda quanto si adatta bene.</p>
</div>
</div>
</div>
<!-- Aggiungi altri box qui -->
</div>
</div>Ecco una spiegazione dettagliata:
- Creiamo un contenitore con una riga all'interno.
- L'attributo
data-masonry='{"percentPosition": true }'dice a Bootstrap di usare il layout Masonry per questa riga. - Ogni box è una colonna (
col-sm-6 col-lg-4) con una carta all'interno. - Usiamo diversi colori di sfondo (
bg-primary,bg-success) per rendere i nostri box visivamente distinti.
Personalizzazione del Layout Masonry
Ora che abbiamo il nostro layout di base, esploriamo alcuni modi per personalizzarlo.
Aggiungere Elementi di Diverse Dimensioni
Una delle bellezze di Masonry è come gestisce elementi di dimensioni diverse. Aggiungiamo alcuni box con contenuti vari:
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-warning">
<div class="card-body">
<h5 class="card-title">Box 3</h5>
<p class="card-text">Questo è un box davvero alto!</p>
<p class="card-text">Ha molto contenuto.</p>
<p class="card-text">Masonry si assicurerà che si adatti perfettamente.</p>
<p class="card-text">Non importa quanto è alto.</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">Box 4</h5>
<p class="card-text">Torniamo a un box breve.</p>
</div>
</div>
</div>Aggiungere Immagini al Layout Masonry
Masonry è fantastico per le gallerie di immagini. Aggiungiamo alcune immagini al nostro layout:
<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="Immagine casuale">
<div class="card-body">
<h5 class="card-title">Card con Immagine</h5>
<p class="card-text">Questa card ha un'immagine.</p>
</div>
</div>
</div>Questo codice aggiunge una carta con un'immagine casuale da Lorem Picsum. L'immagine si caricherà a 300x200 pixel, ma puoi modificare questi numeri per ottenere immagini di diverse dimensioni.
Tecniche Avanzate
Filtraggio degli Elementi Masonry
Una funzionalità carina che possiamo aggiungere è la possibilità di filtrare i nostri elementi Masonry. Aggiungiamo alcuni pulsanti di categoria e assegniamo categorie ai nostri elementi:
<div class="container my-5">
<div class="mb-3">
<button class="btn btn-primary filter-btn" data-filter="all">Tutti</button>
<button class="btn btn-secondary filter-btn" data-filter="category1">Categoria 1</button>
<button class="btn btn-secondary filter-btn" data-filter="category2">Categoria 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">
<!-- Contenuto dell'elemento -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category2">
<!-- Contenuto dell'elemento -->
</div>
<!-- Altri elementi... -->
</div>
</div>Per far funzionare questo, dobbiamo aggiungere un po' di 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>Questo script fa quanto segue:
- Inizializza Masonry sulla nostra griglia.
- Aggiunge listener di eventi ai nostri pulsanti di filtro.
- Quando un pulsante viene cliccato, mostra/nasconde gli elementi in base alla loro categoria.
- Dopo il filtraggio, chiama
msnry.layout()per riorganizzare gli elementi visibili.
Conclusione
Complimenti! Hai appena creato il tuo primo layout Bootstrap Masonry. Dalla griglia di base alla filtratura avanzata, ora hai gli strumenti per creare layout dinamici e reattivi che faranno risaltare le tue pagine web.
Ricorda, la chiave per padroneggiare lo sviluppo web è la pratica. Prova a sperimentare con contenuti diversi, layout e funzionalità. Non aver paura di rompere le cose - spesso è così che impariamo le lezioni più preziose nella programmazione.
Continua a costruire, continua a imparare, e, soprattutto, divertiti! Prima di sapere, sarai in grado di creare layout web che farebbero invidia anche ai muratori più abili. Buon codice!
Credits: Image by storyset