Bootstrap - Sticky Footer Demo
Was ist ein Sticky Footer?
Hallo, zukünftige Web-Entwickler! Heute tauchen wir in die Welt der Sticky Footers mit Bootstrap ein. Aber bevor wir mit dem Code an die Arbeit gehen, lassen wir uns erst einmal anschauen, was ein Sticky Footer überhaupt ist.
Ein Sticky Footer ist ein Footer, der an der Unterseite des Browserfensters "klebt", selbst wenn nicht genug Inhalt vorhanden ist, um ihn natürlicherweise nach unten zu schieben. Es ist wie ein treuer Freund, der immer für dich da ist, egal was passiert!
Warum einen Sticky Footer verwenden?
Stelle dir vor, du baust eine Webseite mit minimalem Inhalt. Ohne einen Sticky Footer könnte deine Seite ein bisschen ... ja, leer aussehen. Ein Sticky Footer stellt sicher, dass dein Design vollständig und professionell aussieht, unabhängig von der Länge des Inhalts. Es ist wie die Kirsche auf dem Sahne-Sahne-Eis deines Webdesigns!
Erstellung eines Sticky Footers mit Bootstrap
Nun, da wir wissen, was wir anstreben, lassen uns die Ärmel hochkrempeln und unseren eigenen Sticky Footer mit Bootstrap erstellen. Keine Sorge, wenn du neu hier bist – wir gehen das Schritt für Schritt durch!
Schritt 1: Erstellung der HTML-Struktur
Zuerst müssen wir die grundlegende HTML-Struktur erstellen. So sieht sie aus:
<!DOCTYPE html>
<html lang="de" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sticky Footer Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Dein Header-Inhalt kommt hier hin -->
</header>
<main class="flex-shrink-0">
<!-- Dein Hauptinhalt kommt hier hin -->
</main>
<footer class="footer mt-auto py-3 bg-light">
<!-- Dein Footer-Inhalt kommt hier hin -->
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Lassen wir das auseinanderbrechen:
- Wir fügen
class="h-100"zum<html>-Tag hinzu, um es 100% der Viewport-Höhe einnehmen zu lassen. - Das
<body>hatclass="d-flex flex-column h-100", um einen Flexbox-Container zu erstellen, der die volle Höhe einnimmt. - Wir verwenden
<main class="flex-shrink-0">, um zu verhindern, dass der Hauptinhalt sich zusammenzieht. - Das
<footer>hatclass="footer mt-auto py-3 bg-light", um es nach unten zu schieben und etwas Styling hinzuzufügen.
Schritt 2: Hinzufügen von Inhalt
Nun fügen wir etwas Inhalt zu unserer Seite hinzu:
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Sticky Footer Demo</a>
</div>
</nav>
</header>
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Sticky Footer mit fixierter Navbar</h1>
<p class="lead">Pinne einen Footer an die Unterseite des Viewports in Desktop-Browsern mit diesem benutzerdefinierten HTML und CSS.</p>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Platziere hier den Inhalt deines Sticky Footers.</span>
</div>
</footer>Das gibt uns eine einfache Seite mit einem Header, etwas Hauptinhalt und einem Footer.
Schritt 3: Hinzufügen von benutzerdefiniertem CSS
Um alles perfekt aussehen zu lassen, brauchen wir einen Hauch von benutzerdefiniertem CSS. Füge dies in deinen <head>-Bereich ein:
<style>
main > .container {
padding: 60px 15px 0;
}
</style>Dies fügt etwas Abstand zur Oberseite unseres Hauptinhalts hinzu, um zu verhindern, dass es hinter der fixierten Navbar versteckt wird.
Das Ergebnis
Nachdem du diese Schritte befolgt hast, solltest du eine schöne Seite mit einem Sticky Footer haben! Der Footer bleibt an der Unterseite des Viewports, wenn nicht genug Inhalt vorhanden ist, und wird nach unten geschoben, wenn mehr Inhalt als auf dem Bildschirm Platz finden kann.
Häufige Probleme und Lösungen
| Problem | Lösung |
|---|---|
| Footer überlappt Inhalt | Stelle sicher, dass <main> die Klasse class="flex-shrink-0" hat |
| Footer ist nicht am Boden | Überprüfe, ob <body> die Klasse class="d-flex flex-column h-100" hat |
| Inhalt wird hinter der Navbar versteckt | Füge Abstand zum Hauptinhalt hinzu |
Schlussfolgerung
Und da hast du es, Leute! Du hast gerade deinen eigenen Sticky Footer mit Bootstrap erstellt. Es ist wie das Verschenken von Schuhen, die immer passen, egal wie hoch oder niedrig dein Inhalt ist.
Denke daran, Webentwicklung dreht sich alles um Übung und Experimentieren. Habe keine Angst, den Code anzupassen, verschiedene Stile auszuprobieren oder ihn甚至 mit anderen Bootstrap-Komponenten zu kombinieren. Wer weiß? Vielleicht erschaffst du das nächste große Ding im Webdesign!
Weiter codieren, weiter lernen und vor allem: Spaß haben! Bis zum nächsten Mal, dies ist dein freundlicher Nachbarschafts-Computerlehrer, der sich verabschiedet. Frohes Coden!
Credits: Image by storyset