Bootstrap - Cover Demo
Willkommen, ambitionierte Web-Entwickler! Heute tauchen wir ein in die aufregende Welt von Bootstrap und erkunden eine wunderschöne Komponente namens "Cover." Als Ihr freundlicher Nachbarschafts-Computerlehrer bin ich begeistert, Sie auf dieser Reise zu führen. Also, holen Sie sich Ihr lieblings Getränk, machen Sie es sich bequem und lassen Sie uns gemeinsam dieses Coding-Abenteuer beginnen!
Was ist ein Cover?
Bevor wir uns dem Code widmen, lassen Sie uns verstehen, was ein "Cover" im Kontext des Webdesigns ist. Ein Cover, oft als "Hero-Sektion" oder "Jumbotron" bezeichnet, ist ein großes, auffälliges Bereich oben auf einer Webseite. Es ist wie das Cover eines Buches – darauf ausgelegt, Aufmerksamkeit zu erregen und Besuchern einen schnellen Überblick darüber zu geben, worum es auf Ihrer Website geht.
Stellen Sie sich vor, Sie gehen in ein schickes Restaurant. Das Erste, was Sie sehen, ist der wunderschön dekorierte Eingang, der die Stimmung für Ihr Esserlebnis setzt. Genau das tut ein Cover für Ihre Website!
Einrichten unseres Projekts
Um loszulegen, müssen wir unser Projekt mit Bootstrap einrichten. Machen Sie sich keine Sorgen, wenn Sie das noch nie zuvor getan haben – ich werde Sie durch jeden Schritt führen!
Schritt 1: Erstellen der HTML-Struktur
Zuerst erstellen wir eine grundlegende HTML-Datei:
<!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 Cover-Seite</title>
<!-- Hier fügen wir Bootstrap CSS hinzu -->
</head>
<body>
<!-- Hier kommt unser Cover hin -->
</body>
</html>Das ist wie das Aufstellen unseres Leinwands, bevor wir anfangen zu malen. Wir haben ein leeres HTML-Dokument mit Kopf und Körper erstellt.
Schritt 2: Hinzufügen von Bootstrap CSS
Nun, fügen wir etwas Bootstrap-Zauber hinzu! Fügen Sie diese Zeile in den <head>-Bereich ein:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">Diese Zeile verlinkt zur Bootstrap-CSS-Datei. Es ist, als würde Ihre Webseite sich ein schickes Outfit auswählen!
Erstellen des Covers
Nun, da wir unsere Grundlage haben, bauen wir unser Cover!
Schritt 3: Hinzufügen der Cover-Struktur
Innerhalb des <body>-Tags fügen wir den folgenden Code hinzu:
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Startseite</a>
<a class="nav-link" href="#">Funktionen</a>
<a class="nav-link" href="#">Kontakt</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Decke deine Seite.</h1>
<p class="lead">Cover ist eine einseitige Vorlage zum Erstellen einfacher und schöner Startseiten. Laden Sie sie herunter, bearbeiten Sie den Text und fügen Sie Ihr eigenes Vollbild-Hintergrundfoto hinzu, um sie zu Ihrer eigenen zu machen.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Mehr erfahren</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Cover-Vorlage für <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, von <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>Wow, das ist eine Menge Code! Lassen Sie uns das herunterbrechen:
- Das äußere
<div>erstellt einen flexiblen Container für unser Cover. - Innen haben wir drei Hauptabschnitte:
<header>,<main>und<footer>. - Der
<header>enthält einen Titel und Navigationslinks. - Der
<main>-Abschnitt hat unseren Hauptinhalt - einen Titel, eine Beschreibung und eine Schaltfläche. - Das
<footer>bietet einige Credits (die Sie anpassen können).
Schritt 4: Hinzufügen einiger benutzerdefinierter CSS
Um unser Cover noch besser aussehen zu lassen, fügen wir einige benutzerdefinierte CSS hinzu. In den <head>-Bereich fügen wir:
<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>Diese CSS macht mehrere Dinge:
- Setzt eine maximale Breite für unser Cover
- Gibt dem Körper eine dunkle背景 und weißen Text
- Fügt einige subtile Schatten für Tiefenwirkung hinzu
- Stylt unsere Navigationslinks
Alles zusammenfügen
Nun, da wir alle Teile haben, sehen wir unser schönes Cover in Aktion! Hier ist der vollständige Code:
<!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 Cover-Seite</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.cover-container {
max-width: 42em;
}
body {
height: 100vh;
background-color: #333;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.nav-masthead .nav-link {
color: rgba(255, 255, 255, .5);
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
</style>
</head>
<body class="d-flex text-center text-white bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<div>
<h3 class="float-md-start mb-0">Cover</h3>
<nav class="nav nav-masthead justify-content-center float-md-end">
<a class="nav-link active" aria-current="page" href="#">Startseite</a>
<a class="nav-link" href="#">Funktionen</a>
<a class="nav-link" href="#">Kontakt</a>
</nav>
</div>
</header>
<main class="px-3">
<h1>Decke deine Seite.</h1>
<p class="lead">Cover ist eine einseitige Vorlage zum Erstellen einfacher und schöner Startseiten. Laden Sie sie herunter, bearbeiten Sie den Text und fügen Sie Ihr eigenes Vollbild-Hintergrundfoto hinzu, um sie zu Ihrer eigenen zu machen.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Mehr erfahren</a>
</p>
</main>
<footer class="mt-auto text-white-50">
<p>Cover-Vorlage für <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, von <a href="https://twitter.com/mdo" class="text-white">@mdo</a>.</p>
</footer>
</div>
</body>
</html>Fazit
Glückwunsch! Sie haben gerade Ihre erste Bootstrap-Cover-Seite erstellt. Ist es nicht erstaunlich, wie wenige Zeilen HTML und CSS ein so professionell aussehendes Design erstellen können?
Denken Sie daran, das ist nur der Anfang. Experimentieren Sie gerne mit verschiedenen Farben, fügen Sie Ihren eigenen Inhalt hinzu oder sogar ein Hintergrundbild ein, um es wirklich zu Ihrer eigenen zu machen. Die Welt der Webentwicklung ist voller Möglichkeiten, und Sie haben gerade Ihren ersten Schritt in diese aufregende Reise gemacht!
Als wir schließen, hier ist eine schnelle Tabelle der wichtigsten Bootstrap-Klassen, die wir verwendet haben:
| Klasse | Zweck |
|---|---|
| cover-container | Erstellt einen flexiblen Container für das Cover |
| d-flex | Wendet das Flexbox-Layout an |
| w-100, h-100 | Setzt Breite und Höhe auf 100% |
| p-3 | Fügt Abstand hinzu |
| mx-auto | Zentriert den Container horizontal |
| flex-column | Setzt die Flex-Richtung auf Spalte |
| mb-auto, mt-auto | Fügt Abstand zur oberen oder unteren Kante hinzu |
| nav-masthead | Benutzerdefinierte Klasse zur Styling der Navigation |
| btn btn-lg btn-secondary | Stylt die Schaltfläche |
Bleiben Sie am Üben, bleiben Sie neugierig und vor allem, haben Sie Spaß beim Coden! Bis zum nächsten Mal, happy Webdesign!
Credits: Image by storyset