Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Masonry Demo

Einführung in Bootstrap Masonry

Hallo, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt von Bootstrap Masonry ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich begeistert, dich auf dieser Reise zu führen. Auch wenn du noch nie eine Zeile Code geschrieben hast, keine Sorge – wir gehen schrittweise vor, und bald wirst du wunderschöne, dynamische Layouts wie ein Profi erstellen!

Bootstrap-Masonry Demo

Was ist Bootstrap Masonry?

Bootstrap Masonry ist eine leistungsstarke Layout-Technik, die es ermöglicht, eine Gitterstruktur mit unterschiedlich hohen Elementen zu erstellen. Stell dir eine Wand mit unterschiedlich großen Ziegeln vor, die perfekt zusammenpassen – das ist das Wesen von Masonry! Es ist besonders nützlich für die Erstellung von Bildergalerien, Portfolios oder jedem Inhalt, bei dem du ein aufgeräumtes, organisiertes Aussehen ohne Platzverschwendung möchtest.

Erste Schritte mit Bootstrap Masonry

Projekt einrichten

Bevor wir in den Code eintauchen, richten wir unser Projekt ein. Wir müssen Bootstrap und die Masonry-Bibliothek in unsere HTML-Datei einbinden. Keine Sorge, wenn das initially verwirrend erscheint – ich werde jeden Teil erklären, während wir vorankommen.

<!DOCTYPE html>
<html lang="de">
<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>
<!-- Unser Inhalt kommt hier hin -->

<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>

Lassen wir das auseinanderfallen:

  1. Wir beginnen mit der grundlegenden HTML-Struktur.
  2. Im <head> verknüpfen wir die Bootstrap-CSS-Datei.
  3. Am Ende des <body> binden wir die Bootstrap- und Masonry-JavaScript-Dateien ein.

Diese Dateien geben uns die Werkzeuge, die wir für die Erstellung unseres Masonry-Layouts benötigen.

Erstellung Ihres ersten Masonry-Layouts

Nun erstellen wir ein einfaches Masonry-Layout mit einigen farbigen Kisten. Fügen wir diesen Code im <body>-Tag hinzu:

<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">Dies ist eine kurze Box.</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">Diese Box ist ein bisschen höher. Masonry wird anpassen!</p>
<p class="card-text">Schau, wie gut es passt.</p>
</div>
</div>
</div>
<!-- Füge hier mehr Kisten hinzu -->
</div>
</div>

Lassen wir das auseinanderfallen:

  1. Wir erstellen einen Container mit einer Zeile innen.
  2. Das data-masonry='{"percentPosition": true }'-Attribut weist Bootstrap an, für diese Zeile das Masonry-Layout zu verwenden.
  3. Jede Box ist eine Spalte (col-sm-6 col-lg-4) mit einer Karte darin.
  4. Wir verwenden verschiedene Hintergrundfarben (bg-primary, bg-success), um unsere Kisten visuell voneinander abzuheben.

Anpassung Ihres Masonry-Layouts

Nun, da wir unser grundlegendes Layout haben, lassen uns einige Möglichkeiten zur Anpassung erkunden.

Hinzufügen von unterschiedlich großen Elementen

Eine der Schönheiten von Masonry ist, wie es Elemente unterschiedlicher Größe handhabt. Fügen wir einige weitere Kisten mit unterschiedlichem Inhalt hinzu:

<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">Dies ist eine wirklich hohe Box!</p>
<p class="card-text">Sie hat viel Inhalt.</p>
<p class="card-text">Masonry stellt sicher, dass sie perfekt passt.</p>
<p class="card-text">Unabhängig davon, wie hoch sie wird.</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">Zurück zu einer kurzen Box.</p>
</div>
</div>
</div>

Hinzufügen von Bildern zu Ihrem Masonry-Layout

Masonry ist großartig für Bildergalerien. Fügen wir einige Bilder zu unserem Layout hinzu:

<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="Zufälliges Bild">
<div class="card-body">
<h5 class="card-title">Bildkarte</h5>
<p class="card-text">Diese Karte hat ein Bild.</p>
</div>
</div>
</div>

Dieser Code fügt eine Karte mit einem zufälligen Bild von Lorem Picsum hinzu. Das Bild lädt in 300x200 Pixeln, aber du kannst diese Zahlen anpassen, um unterschiedliche Bildgrößen zu erhalten.

Fortgeschrittene Techniken

Filtern von Masonry-Elementen

Eine coole Funktion, die wir hinzufügen können, ist die Möglichkeit, unsere Masonry-Elemente zu filtern. Fügen wir einige Kategorie-Schaltflächen hinzu und unseren Elementen Kategorien zu:

<div class="container my-5">
<div class="mb-3">
<button class="btn btn-primary filter-btn" data-filter="all">Alle</button>
<button class="btn btn-secondary filter-btn" data-filter="category1">Kategorie 1</button>
<button class="btn btn-secondary filter-btn" data-filter="category2">Kategorie 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">
<!-- Inhaltsangabe -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category2">
<!-- Inhaltsangabe -->
</div>
<!-- Mehr Elemente... -->
</div>
</div>

Um dies zu ermöglichen, müssen wir einige JavaScript hinzufügen:

<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>

Dieser Skript macht folgendes:

  1. Initialisiert Masonry auf unserem Raster.
  2. Fügt Click-Event-Listener zu unseren Filter-Schaltflächen hinzu.
  3. Wenn eine Schaltfläche geklickt wird, zeigt es/versteckt Elemente basierend auf ihrer Kategorie.
  4. Nach dem Filtern ruft es msnry.layout() auf, um die sichtbaren Elemente neu anzuordnen.

Schlussfolgerung

Glückwunsch! Du hast dein erstes Bootstrap Masonry-Layout erstellt. Von grundlegenden Gittern bis hin zu fortgeschrittenen Filterfunktionen hast du jetzt die Werkzeuge, um dynamische, responsiven Layouts zu erstellen, die deine Webseiten hervorheben werden.

Denke daran, der Schlüssel zum Beherrschen der Webentwicklung ist die Übung. Versuche, mit unterschiedlichem Inhalt, Layouts und Funktionen zu experimentieren. Habe keine Angst, Dinge zu kaputtmachen – das ist oft, wie wir die wertvollsten Lektionen im Coding lernen.

Weiterbauen, weiterlernen und vor allem: Spaß dabei haben! Bereitwillig wirst du Web-Layouts erstellen, die selbst die talentiertesten Maurer beneiden würden. Viel Spaß beim Coden!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap-Sticky Footer Navbar Demo
Nächstes Tutorial:
Bootstrap-Starter-Vorlage Demo