🍽️ Bootstrap-Lernseite: Cards & Navigation

In dieser Übung lernst du, wie man mit Bootstrap eine kleine Seite über Tägliche Essensgewohnheiten erstellt. Dabei kombinierst du mehrere Bootstrap-Elemente:

Header mit Hintergrundfarbe
Navbar mit Links
Cards für die Tagesbeiträge
Footer am Ende der Seite

1️⃣ Header erstellen

Ein Header zeigt den Titel der Seite. Mit .bg-primary erhält er eine blaue Hintergrundfarbe, mit .text-white weiße Schrift und mit .py-5 Abstand nach oben und unten.

<header class="bg-primary text-white text-center py-5">
  <h1>Tägliche Essensgewohnheiten</h1>
</header>

2️⃣ Navigation (Navbar) hinzufügen

Mit der Navbar können Besucher zwischen Seiten wechseln. Die Klasse .navbar-dark bg-dark sorgt für ein dunkles Design.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="index.html">Home</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="essensgewohnheiten.html">Tägliche Essensgewohnheiten</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="fitnessprogramm.html">Mein Fitness-Programm</a>
      </li>
    </ul>
  </div>
</nav>

3️⃣ Cards für jeden Tag erstellen

Eine Card ist ein praktisches Bootstrap-Element, um Inhalte in hübschen Boxen anzuzeigen. Du kannst Überschriften, Text und Bilder kombinieren.

<div class="card mb-4">
  <div class="card-body">
    <h4 class="card-title">Tag 1 - 08. Oktober 2024</h4>
    <p><strong>Uhrzeit:</strong> 08:00 Uhr</p>
    <p><strong>Rezept:</strong> Haferflocken mit Banane und Nüssen</p>
    <img src="bilder/banane-muesli.jfif" alt="Frühstück Bild" class="img-fluid">
  </div>
</div>

.card → Grundrahmen einer Karte
.card-body → Innenbereich der Karte
.card-title → Titel
.img-fluid → Bild passt sich automatisch der Breite an
.mb-4 → sorgt für Abstand zwischen den Cards

4️⃣ Mehrere Cards nebeneinander

Wiederhole den Card-Code einfach, um mehrere Tage hinzuzufügen – z. B. für Tag 2 und 3.

<!-- Tag 2 -->
<div class="card mb-4">
  <div class="card-body">
    <h4 class="card-title">Tag 2 - 09. Oktober 2024</h4>
    <p><strong>Uhrzeit:</strong> 12:30 Uhr</p>
    <p><strong>Rezept:</strong> Griechischer Salat mit Feta und Oliven</p>
    <img src="bilder/gireschichersalat.jfif" alt="Mittagessen Bild" class="img-fluid">
  </div>
</div>

5️⃣ Footer (Fußzeile)

Ein Footer steht am Ende der Seite und enthält z. B. Urheberrecht oder Links.

<footer class="bg-dark text-white text-center py-3">
  <p>&copy; 2023 Mein Blog. Alle Rechte vorbehalten.</p>
</footer>

6️⃣ Bootstrap-JavaScript einbinden

Damit die Navbar auf mobilen Geräten funktioniert, brauchst du jQuery, Popper.js und Bootstrap JS.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

✅ Aufgabe:

Baue jetzt selbst die Seite "Tägliche Essensgewohnheiten" nach. Verwende die Bootstrap-Elemente header, navbar, card und footer.