Bootstrap - Sidebar Demo
Hallo, angehende Web-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der Bootstrap-Sidebar. Als Ihr freundlicher Nachbarschaftsinformatiklehrer freue ich mich, Sie durch dieses Thema zu führen. Also holen Sie sich Ihr Lieblingsgetränk, machen Sie es sich gemütlich und tauchen wir ein!
Was ist eine Sidebar?
Bevor wir mit dem Coden beginnen, lassen Sie uns verstehen, was eine Sidebar eigentlich ist. Stellen Sie sich vor, Sie lesen ein Buch und auf der Seite gibt es eine schmale Spalte mit zusätzlichen Informationen oder schnellen Links. Das ist im Webdesign im Grunde genommen eine Sidebar!
Eine Sidebar ist eine vertikale Spalte, die typischerweise auf der linken oder rechten Seite einer Webseite platziert ist. Sie enthält oft Navigationslinks, zusätzliche Informationen oder anderes Inhalt, das die Hauptinhaltszone ergänzt. Sidebars helfen dabei, Informationen zu organisieren und die Benutzererfahrung zu verbessern, indem sie schnellen Zugriff auf wichtige Elemente bieten.
Erstellen einer einfachen Sidebar mit Bootstrap
Jetzt, wo wir wissen, was eine Sidebar ist, erstellen wir eine mit Bootstrap. Wir beginnen mit einem einfachen Beispiel und bauen es schrittweise aus.
Schritt 1: Einrichten der HTML-Struktur
Zuerst müssen wir unsere HTML-Struktur einrichten. Hier ist ein einfaches Template:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sidebar Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 sidebar">
<!-- Hier kommt der Sidebar-Inhalt hin -->
</div>
<!-- Hauptinhalt -->
<div class="col-md-9 main-content">
<!-- Hier kommt der Hauptinhalt hin -->
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>In diesem Template haben wir einen Container mit zwei Spalten erstellt: eine für die Sidebar (3 Einheiten breit) und eine für den Hauptinhalt (9 Einheiten breit). Bootstrap verwendet ein 12-Spalten-Raster-System, daher addieren sich diese Zahlen auf 12.
Schritt 2: Hinzufügen von Inhalt zur Sidebar
Fügen wir jetzt etwas Inhalt zu unserer Sidebar hinzu:
<!-- Sidebar -->
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Sidebar-Menü</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dienste</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>Hier haben wir eine Überschrift und eine Liste von Navigationslinks zu unserer Sidebar hinzugefügt. Die Klasse bg-light gibt ihr eine helle Hintergrundfarbe.
Schritt 3: Hinzufügen von Hauptinhalt
Fügen wir jetzt etwas Inhalt zum Hauptbereich hinzu:
<!-- Hauptinhalt -->
<div class="col-md-9 main-content">
<h1 class="mt-3">Willkommen auf unserer Webseite</h1>
<p>Dies ist der Hauptinhaltbereich. Hier wird die primäre Information Ihrer Seite angezeigt.</p>
</div>Verbessern der Sidebar
Jetzt, wo wir eine grundlegende Sidebar haben, lassen Sie uns sie mit einigen zusätzlichen Funktionen erweitern.
Hinzufügen einer Suchbox
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Sidebar-Menü</h3>
<form class="d-flex mb-3">
<input class="form-control me-2" type="search" placeholder="Suchen" aria-label="Suchen">
<button class="btn btn-outline-success" type="submit">Suchen</button>
</form>
<!-- ... der Rest des Sidebar-Inhaltes ... -->
</div>Dies fügt eine Suchbox oben in unsere Sidebar ein, die Benutzern eine schnelle Möglichkeit bietet, Inhalte zu finden.
Hinzufügen von Dropdown-Menüs
Fügen wir eine Dropdown-Leiste zu unserer Sidebar hinzu:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Produkte
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Produkt 1</a></li>
<li><a class="dropdown-item" href="#">Produkt 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sonderangebot</a></li>
</ul>
</li>Fügen Sie diesen Code innerhalb von <ul class="nav flex-column"> in Ihrer Sidebar ein. Dies erstellt ein Dropdown-Menü für "Produkte".
Machen der Sidebar responsive
Eine der Herausforderungen bei Sidebars ist es, sie auf mobilen Geräten gut funktionieren zu lassen. Lassen Sie uns unsere Sidebar responsive gestalten:
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 sidebar bg-light" id="sidebar">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent">
Sidebar umschalten
</button>
<div class="collapse d-md-block" id="sidebarContent">
<!-- ... Sidebar-Inhalt ... -->
</div>
</div>
<!-- Hauptinhalt -->
<div class="col-md-9 main-content">
<!-- ... Hauptinhalt ... -->
</div>
</div>
</div>Wir haben eine Schaltfläche hinzugefügt, die nur auf kleinen Bildschirmen angezeigt wird (d-md-none), und unseren Sidebar-Inhalt in einen einziehbaren Div eingeschlossen. Auf größeren Bildschirmen wird die Sidebar immer sichtbar sein (d-md-block).
Styling der Sidebar
Schließlich fügen wir einige benutzerdefinierte CSS-Styles hinzu, um unsere Sidebar noch besser aussehen zu lassen:
<style>
.sidebar {
min-height: 100vh;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
</style>Fügen Sie dies in den <head> Ihres HTML ein. Dieses CSS macht die Sidebar auf ganzer Höhe, fügt einen subtilen Schatten hinzu und stylt die Navigationslinks.
Schlussfolgerung
Glückwunsch! Sie haben gerade eine voll funktionsfähige, responsive Bootstrap-Sidebar erstellt. Denken Sie daran, Übung macht den Meister, also Scheuen Sie sich nicht, mit verschiedenen Layouts und Stilen zu experimentieren.
Hier ist eine Tabelle, die die wichtigsten Bootstrap-Klassen zusammenfasst, die wir verwendet haben:
| Klasse | Zweck |
|---|---|
| container-fluid | Erzeugt einen container mit voller Breite |
| row | Erzeugt eine horizontale Gruppe von Spalten |
| col-md-3 | Erzeugt eine Spalte, die 3 Einheiten breit ist auf mittleren Bildschirmen und größer |
| bg-light | Fügt eine helle Hintergrundfarbe hinzu |
| nav | Gibt an, dass es sich um ein Navigationskomponente handelt |
| nav-item | Stylt ein Navigationsitem |
| nav-link | Stylt einen Navigationslink |
| dropdown | Erzeugt ein Dropdown-Menü |
| btn | Stylt eine Schaltfläche |
| form-control | Stylt Formularfelder |
Weiterschreiben, weiterlernen und vor allem: Spaß haben! Denken Sie daran, jeder Meister war einmal ein Anfänger. Ihre Reise im Webdesign hat gerade erst begonnen, und ich bin gespannt, wo sie Sie hinführt!
Credits: Image by storyset