- Erstelle eine HTML-Grundstruktur für Deine Seite und füge ein
div-Element hinzu, um die Sidebar zu erstellen. wie beispielsweise den ersten Code - Füge der
sidebar-Klasse den CSS-Code hinzu, um sie zu formatieren und zu positionieren.
Dieser Code positioniert die Sidebar am linken Rand des Bildschirms und gibt ihr eine Breite von 200px. Die Hintergrundfarbe und der Abstand werden ebenfalls festgelegt.
- Optional kannst Du auch den Inhalt der Sidebar formatieren, indem Du weitere CSS-Regeln hinzufügst.
Jetzt hast Du eine einfache Sidebar in Bootstrap 5 erstellt.
Bootstrap 5 bietet viele Möglichkeiten zur Anpassung der Sidebars. Du kannst das Aussehen und die Position der Sidebar weiter anpassen, indem Du verschiedene CSS-Regeln hinzufügst, wie z.B. z-index, border, und box-shadow. Du kannst auch JavaScript verwenden, um eine interaktive Sidebar zu erstellen.
HTML:
<div class="sidebar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
CSS:
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 200px;
background-color: #f5f5f5;
padding: 20px;
}