Deutsch

Bootstrap-Tutorial

Bootstrap Layouts

Bootstrap-Inhalt

Bootstrap Komponenten

Bootstrap Formulare

Bootstrap-Hilfsfunktionen

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Sticky Footer Navbar Demo

Hallo da draußen, ambitionierte Web-Entwickler! Heute machen wir uns auf eine aufregende Reise, um eine Sticky Footer Navbar mit Bootstrap zu erstellen. Als dein freundlicher Nachbarschafts-Computerlehrer werde ich dich durch diesen Prozess Schritt für Schritt führen und sicherstellen, dass du jeden Bit von Code, den wir schreiben, verstehst. Also hol dir dein Lieblingsgetränk, setz dich zurück und tauchen wir ein!

Bootstrap-Sticky footer navbar Demo

Was ist eine Sticky Footer Navbar?

Bevor wir mit dem Coden beginnen, lassen wir uns klar machen, was wir erreichen wollen. Eine Sticky Footer Navbar ist eine Navigationsleiste, die am unteren Ende der Seite bleibt, unabhängig davon, wie viel Inhalt auf der Seite ist oder wie weit du scrollst. Es ist wie ein treuer Freund, der immer bei dir bleibt!

Warum eine Sticky Footer Navbar verwenden?

  1. Sie bietet einfachen Zugriff auf wichtige Links oder Aktionen.
  2. Sie spart Bildschirmplatz, insbesondere auf mobilen Geräten.
  3. Sie verbessert das Benutzererlebnis, indem die Navigationsoptionen immer sichtbar bleiben.

Nun, da wir wissen, was wir bauen und warum es nützlich ist, lassen wir uns mit ein bisschen Code die Hände schmutzig machen!

Einrichten unserer HTML-Struktur

Zuerst müssen wir die grundlegende Struktur unseres HTML-Dokuments einrichten. Mach dir keine Sorgen, wenn du neu in HTML bist; ich werde jeden Teil erklären, während wir vorankommen.

<!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>Sticky Footer Navbar 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">
<!-- Hier fügen wir unseren Inhalt hinzu -->

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

Lassen wir das auseinandernehmen:

  1. <!DOCTYPE html>: Dasteilt dem Browser mit, dass wir HTML5 verwenden.
  2. <html lang="de" class="h-100">: Das Wurzelelement unserer Seite. Wir haben die Klasse h-100 hinzugefügt, um es 100% der Height des Viewports einnehmen zu lassen.
  3. Innerhalb des <head>-Tags:
  • Wir setzen die Zeichencodierung und die Viewport-Eigenschaften.
  • Wir geben unserer Seite einen Titel.
  • Wir verlinken die Bootstrap CSS-Datei.
  1. <body class="d-flex flex-column h-100">: Wir verwenden Bootstrap-Klassen, um den Body zu einem Flex-Container zu machen, der 100% der Height des Viewports einnimmt.
  2. Am Ende des <body>-Tags fügen wir die Bootstrap JavaScript-Datei hinzu.

Erstellen der Kopfzeile

Jetzt fügen wir eine Kopfzeile 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="#">Feste Navigationsleiste</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Navigation umschalten">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deaktiviert</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Suche" aria-label="Suche">
<button class="btn btn-outline-success" type="submit">Suche</button>
</form>
</div>
</div>
</nav>
</header>

Dieser Code erstellt eine responsive Navigationsleiste, die an der Oberseite der Seite haftet. Sie enthält einen Markenname, Navigationslinks und ein Suchformular. Die Navigationsleiste kollabiert in ein Hamburger-Menü auf kleineren Bildschirmen.

Hinzufügen des Hauptinhalts

Als nächstes fügen wir etwas Hauptinhalt zu unserer Seite hinzu:

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Sticky Footer mit fester Navigationsleiste</h1>
<p class="lead">Pin ein Footer an die untere Kante des Viewports in Desktop-Browsern mit diesem benutzerdefinierten HTML und CSS.</p>
<p>Verwende <a href="#">den Sticky Footer mit einer festen Navigationsleiste</a>, falls nötig, auch.</p>
</div>
</main>

Die Klasse flex-shrink-0 auf dem <main>-Element stellt sicher, dass es nicht schrumpft, wenn nicht genügend Platz ist, und drückt unseren Footer nach unten.

Erstellen des Sticky Footers

Nun zu unserem Highlight, dem Sticky Footer:

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Platziere hier den Sticky Footer-Inhalt.</span>
</div>
</footer>

Die Klasse mt-auto drückt den Footer nach unten, wenn nicht genug Inhalt vorhanden ist, um den Viewport zu füllen.

Hinzufügen von benutzerdefiniertem CSS

Um alles perfekt funktionieren zu lassen, müssen wir ein bisschen benutzerdefiniertes CSS hinzufügen. Füge dies innerhalb eines <style>-Tags in den <head>-Teil deines Dokuments ein:

<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>

Dieses CSS fügt etwas Abstand zur Oberseite unseres Hauptinhaltes hinzu (um zu verhindern, dass es von der festen Navigationsleiste verdeckt wird) und setzt eine Hintergrundfarbe für den Footer.

Alles zusammenfügen

Hier ist unser vollständiger Code:

<!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>Sticky Footer Navbar Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Feste Navigationsleiste</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Navigation umschalten">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deaktiviert</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Suche" aria-label="Suche">
<button class="btn btn-outline-success" type="submit">Suche</button>
</form>
</div>
</div>
</nav>
</header>

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Sticky Footer mit fester Navigationsleiste</h1>
<p class="lead">Pin ein Footer an die untere Kante des Viewports in Desktop-Browsern mit diesem benutzerdefinierten HTML und CSS.</p>
<p>Verwende <a href="#">den Sticky Footer mit einer festen Navigationsleiste</a>, falls nötig, auch.</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Platziere hier den Sticky Footer-Inhalt.</span>
</div>
</footer>

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

Schlussfolgerung

Und da habt ihr es, Leute! Wir haben erfolgreich eine Webseite mit einer Sticky Footer Navbar using Bootstrap erstellt. Denkt daran, Webentwicklung ist wie Kochen - es braucht Übung, um es genau richtig zu machen. Also lasst euch nicht entmutigen, wenn es beim ersten Versuch nicht perfekt aussieht. Bleibt experimentierfreudig, und bevor ihr es wisst, werdet ihr wie ein Meisterkoch beautiful web pages zaubern können!

Hier ist eine schnelle Zusammenfassung dessen, was wir gelernt haben:

Komponente Zweck
HTML-Struktur Stellt die grundlegende Struktur unserer Webseite dar
Bootstrap CSS Gibt uns vorgestylte Komponenten und Hilfsklassen
Benutzerdefiniertes CSS Lässt uns das Erscheinungsbild unserer Seite feinabstimmen
Kopfzeile Enthält unsere Navigationsleiste
Hauptinhalt Haltert den primären Inhalt unserer Seite
Footer Bleibt am unteren Ende der Seite, auch wenn der Inhalt kurz ist
Bootstrap JS Aktiviert interaktive Komponenten wie die kollabierende Navigationsleiste

Denkt daran, der Schlüssel zum Meistern der Webentwicklung ist Übung und Neugier. Also weiter coden, weiter lernen und vor allem: Spaß haben! Bis zum nächsten Mal, fröhliches Coden!

Credits: Image by storyset

Vorheriges Tutorial:
Bootstrap-Dashboard-Demo
Nächstes Tutorial:
Bootstrap-Masonry-Demo