Bootstrap - Heroes Demo

Was ist ein Hero-Bereich?

Hallo, ambitionierte Web-Entwickler! Heute tauchen wir ein in die aufregende Welt von Bootstrap und erstellen einen beeindruckenden Hero-Bereich. Aber zuerst beantworte ich die brennende Frage: Was genau ist ein Hero-Bereich?

Ein Hero-Bereich, meine lieben Schüler, ist wie das Cover eines Buches für deine Webseite. Es ist das erste, was Besucher sehen, wenn sie auf deine Seite kommen, und es ist deine Chance, einen großartigen ersten Eindruck zu hinterlassen. Stell dir vor, es ist der Superheld deiner Webseite, der hereinschwebt, um die Aufmerksamkeit der Besucher zu erregen und sie vor dem gefürchteten Zurück-Button zu retten!

Schlüsselkomponenten eines Hero-Bereichs

Element	Beschreibung
Überschrift	Eine einprägsame, fette Aussage
Unterüberschrift	Supporting Text, der die Überschrift erläutert
Call-to-Action (CTA)	Ein Button oder Link, der zur Benutzerinteraktion auffordert
Hintergrundbild	Ein ansprechendes, relevantes Bild oder Video
Überlagerung	Eine halbtransparente Schicht, um die Lesbarkeit des Textes zu verbessern

Nun, da wir wissen, was wir bauen, rollen wir die Ärmel hoch und fangen an zu codieren!

Einrichtung der Bootstrap-Umgebung

Bevor wir unser heldenhaftes Meisterwerk erstellen, müssen wir den Rahmen setzen. Fangen wir mit einer grundlegenden HTML-Struktur an und includieren Bootstrap:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine großartige Hero-Sektion</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Unser Hero-Bereich wird hier kommen -->

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

Dieser Code richtet unser HTML-Dokument ein und inkludiert Bootstrap's CSS- und JavaScript-Dateien. Es ist, als ob wir ein leeres Leinwand für unsere heldenhafte Kreation vorbereiten!

Erstellung des Hero-Bereichs

Nun fügen wir unseren Hero-Bereich innerhalb der <body>-Tags hinzu:

<section class="hero vh-100 d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-7">
<h1 class="display-4 fw-bold mb-3">Willkommen auf unserer großartigen Webseite</h1>
<p class="lead mb-4">Entdecke erstaunliche Dinge und entfalte dein Potenzial mit unseren neuesten Lösungen.</p>
<a href="#" class="btn btn-primary btn-lg">Los geht's</a>
</div>
</div>
</div>
</section>

Lassen wir das auseinanderbrechen:

Wir erstellen ein <section> mit Klassen:

hero: Unsere benutzerdefinierte Klasse für das Styling
vh-100: Macht den Bereich die volle Viewport-Höhe
d-flex align-items-center: Zentriert den Inhalt vertikal

Innen haben wir eine Bootstrap container und row.
Unser Inhalt ist in einer col-lg-7, die auf großen Bildschirmen 7 Spalten einnimmt.
Wir verwenden Bootstrap-Klassen für die Typografie:

display-4: Große, auffällige Schrift
fw-bold: Macht den Text fett
lead: Etwas größere Absatzschrift

Der "Los geht's" Button verwendet btn btn-primary btn-lg für das Styling.

Hinzufügen eines Hintergrundbildes

Um unseren Hero wirklich heldenhaft zu machen, fügen wir ein Hintergrundbild hinzu:

<style>
.hero {
background: url('https://source.unsplash.com/random/1920x1080') no-repeat center center;
background-size: cover;
position: relative;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.hero * {
position: relative;
color: white;
}
</style>

Diese CSS macht einige Dinge:

Setzt ein zufälliges Hintergrundbild von Unsplash.
Erstellt eine halbtransparente Überlagerung für bessere Textlesbarkeit.
Stellt sicher, dass alle Texte weiß sind und über der Überlagerung positioniert sind.

Responsivität Anpassungen

Um unseren Hero-Bereich auf allen Geräten großartig aussehen zu lassen, fügen wir einige responsive Klassen hinzu:

<section class="hero vh-100 d-flex align-items-center text-center text-lg-start">
<div class="container">
<div class="row">
<div class="col-lg-7 mx-auto mx-lg-0">
<h1 class="display-4 fw-bold mb-3">Willkommen auf unserer großartigen Webseite</h1>
<p class="lead mb-4">Entdecke erstaunliche Dinge und entfalte dein Potenzial mit unseren neuesten Lösungen.</p>
<a href="#" class="btn btn-primary btn-lg px-5 py-3 fs-6">Los geht's</a>
</div>
</div>
</div>
</section>

Hier ist, was sich geändert hat:

Hinzugefügt text-center text-lg-start, um den Text auf kleinen Bildschirmen zu zentrieren und auf großen Bildschirmen linksbündig auszurichten.
Hinzugefügt mx-auto mx-lg-0, um die Spalte auf kleinen Bildschirmen zu zentrieren.
Button-Polsterung erhöht mit px-5 py-3 und Schriftgröße gesetzt mit fs-6.

Der letzte Schliff: Animation

Fügen wir eine einfache Animation hinzu, um unseren Hero-Bereich ansprechender zu gestalten:

<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero h1, .hero p, .hero .btn {
animation: fadeIn 1s ease-out forwards;
opacity: 0;
}
.hero h1 { animation-delay: 0.5s; }
.hero p { animation-delay: 1s; }
.hero .btn { animation-delay: 1.5s; }
</style>

Dieses CSS erstellt eine Einblend- und Slide-Up-Effekt für unseren Inhalt, wobei jedes Element leicht nach dem anderen erscheint.

Und da hast du es, zukünftige Web-Zauberer! Du hast gerade einen beeindruckenden, responsiven und animierten Hero-Bereich mit Bootstrap erstellt. Denke daran, Übung macht den Meister, also hab keine Angst, verschiedene Layouts, Farben und Animationen auszuprobieren. Wer weiß? Dein nächster Hero-Bereich könnte den Tag für eine Kundenwebseite retten!

Frohes Coden und möge deine Pixel immer perfekt ausgerichtet sein!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Fußzeilen-Demo

Nächstes Tutorial:

Bootstrap - Ausgewählte Demo