Bootstrap - Album Demo

Willkommen, angehende Web-Entwickler! Heute tauchen wir in die aufregende Welt von Bootstrap ein und erstellen eine wunderschöne Album-Demo. Als Ihr freundlicher Nachbarschaftsinformatiklehrer bin ich hier, um Sie auf dieser Reise Schritt für Schritt zu führen. Also holen Sie sich Ihr Lieblingsgetränk, machen Sie es sich bequem und lassen Sie uns gemeinsam dieses Coding-Abenteuer starten!

Bootstrap-Album Demo

Was ist ein Album?

Bevor wir uns dem Code widmen, lassen Sie uns darüber sprechen, was ein Album im Kontext des Webdesigns ist. Stellen Sie es sich als digitales Fotoalbum vor, aber anstatt nur Fotos zu zeigen, kann es verschiedene Arten von Inhalten präsentieren. Es ist eine visuell ansprechende Möglichkeit, eine Sammlung von Gegenständen zu präsentieren, sei es Produkte, Portfolioelemente oder sogar Blogposts.

In unserem Fall werden wir ein responsives Raster von Karten erstellen, jede davon repräsentiert ein Element in unserem Album. Es ist so, als würde man eine Reihe von Polaroidfotos auf einem Tisch anordnen, aber wir tun es auf einer Webseite!

Einrichtung unseres Projekts

Schritt 1: HTML-Struktur

Lassen Sie uns mit der grundlegenden HTML-Struktur für unsere Album-Demo beginnen. Wir verwenden Bootstrap's CSS- und JavaScript-Dateien, um uns das Leben zu erleichtern.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Album Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Unser Albuminhalt kommt hier hin -->

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

Dies ist unsere Grundlage. Stellen Sie es sich als leeres Leinwand vor, auf dem wir malen werden. Der <link>-Tag fügt Bootstrap's Stile hinzu, und der <script>-Tag am Ende lädt seine JavaScript-Funktionalität.

Erstellung des Album-Layouts

Schritt 2: Hinzufügen einer Kopfzeile

Fügen wir unserer Album-Demo eine einfache Kopfzeile hinzu:

<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>Mein großartiges Album</strong>
</a>
</div>
</div>
</header>

Dies erstellt eine dunkle Kopfzeile oben auf unserer Seite. Es ist wie der Titel unserer Fotocollage!

Schritt 3: Hauptinhaltsbereich

Jetzt richten wir den Hauptinhaltsbereich ein, in dem unsere Albumelemente leben werden:

<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- Albumelemente kommen hier hin -->
</div>
</div>
</div>
</main>

Diese Struktur erstellt einen hellen Hintergrund für unser Album und richtet ein responsives Raster ein. Es ist so, als würde man eine leere Fotocollage-Seite anlegen, bereit, mit Erinnerungen gefüllt zu werden!

Schritt 4: Erstellung von Albumelementen

Jetzt kommt der spaßige Teil – lassen Sie uns einige Elemente in unser Album hinzufügen:

<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Vorschaubild" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Vorschaubild</text>
</svg>
<div class="card-body">
<p class="card-text">Dies ist eine breitere Karte mit unterstützenden Texten darunter als natürlicher Einstieg in zusätzlichen Inhalt.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Ansehen</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Bearbeiten</button>
</div>
<small class="text-muted">9 Minuten</small>
</div>
</div>
</div>
</div>

Dieser Code erstellt ein einzelnes Albumelement. Das <svg>-Element ist ein Platzhalter für ein Bild. In einem realen Projekt würden Sie dies durch ein <img>-Tag ersetzen, das auf Ihr tatsächliches Bild zeigt.

Um mehrere Elemente zu erstellen, kopieren und fügen Sie diesen Codeblock mehrmals innerhalb der row-Division, die wir earlier erstellt haben.

Verbesserung unseres Albums

Schritt 5: Hinzufügen einer Fußzeile

Lassen Sie uns unser Album mit einer einfachen Fußzeile abschließen:

<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Zurück nach oben</a>
</p>
<p class="mb-1">Das Album-Beispiel ist © Bootstrap, aber bitte laden Sie es herunter und passen Sie es für sich selbst an!</p>
</div>
</footer>

Dies fügt eine schöne Note am Ende unserer Seite hinzu, gibt die verdiente Anerkennung und bietet einen praktischen "Zurück nach oben"-Link.

Alles zusammenfügen

Nun, da wir alle Komponenten durchgangen sind, schauen wir uns an, wie unsere vollständige HTML-Datei aussieht:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Album Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>Mein großartiges Album</strong>
</a>
</div>
</div>
</header>

<main>
<div class="album py-5 bg-light">
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<!-- Albumelement 1 -->
<div class="col">
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Vorschaubild" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#55595c"/>
<text x="50%" y="50%" fill="#eceeef" dy=".3em">Vorschaubild</text>
</svg>
<div class="card-body">
<p class="card-text">Dies ist eine breitere Karte mit unterstützenden Texten darunter als natürlicher Einstieg in zusätzlichen Inhalt.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">Ansehen</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Bearbeiten</button>
</div>
<small class="text-muted">9 Minuten</small>
</div>
</div>
</div>
</div>
<!-- Wiederholen Sie die obige Albumelementstruktur für mehr Elemente -->
</div>
</div>
</div>
</main>

<footer class="text-muted py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Zurück nach oben</a>
</p>
<p class="mb-1">Das Album-Beispiel ist © Bootstrap, aber bitte laden Sie es herunter und passen Sie es für sich selbst an!</p>
</div>
</footer>

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

Schlussfolgerung

Und das ist es, Leute! Wir haben eine schöne, responsive Album-Demo mit Bootstrap erstellt. Denken Sie daran, dies ist nur der Anfang. Passen Sie die Farben an, fügen Sie Ihre eigenen Bilder hinzu und experimentieren Sie mit dem Layout. Webentwicklung dreht sich alles um Experimentieren und Kreativität!

Als wir den Abschluss machten, erinnerte ich mich an einen Schüler, der mir einmal sagte: "Herr, ich hätte nie gedacht, dass ich mit nur HTML etwas so professionell aussehendes erstellen könnte!" Das ist die Magie von Frameworks wie Bootstrap – sie geben Ihnen einen Vorsprung, allowing Sie sich auf den Inhalt und die Kreativität konzentrieren können.

Weiters üben, weiter erkunden und vor allem Spaß dabei haben! Bis zum nächsten Mal, fröhliches Coden!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap-Sticky Footer Demo

Nächstes Tutorial:

Bootstrap-Anmelde-Demo