Um mit Bootstrap zu arbeiten, müssen wir zunächst das HTML-Dokument aufbauen und Bootstrap von einem CDN einbinden.
HTML-Struktur:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meine Webseite</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- Hier kommt dein Inhalt -->
</body>
</html>
Die Navbar (Navigationsleiste) enthält Links, die den Benutzer zu verschiedenen Seiten führen. Bootstrap hilft uns, eine moderne und responsive Navbar zu erstellen.
HTML-Code für die Navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Meine Webseite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
Schau dir diesen Code an, der das Layout für Bild und Text erstellt:
<div class="container mt-5">
<div class="row">
<!-- Bild Container -->
<div class="col-md-4">
<img src="bild.jpg" class="img-fluid" alt="Charakterbild">
</div>
<!-- Text Container -->
<div class="col-md-8">
<h2>Hallo, ich bin ein niedlicher Charakter!</h2>
<p>Ich bin ein kleiner, fröhlicher Charakter, der ein freundliches Wesen ausstrahlt...</p>
</div>
</div>
</div>
Nun erkläre ich dir Schritt für Schritt, was jeder Teil des Codes bedeutet:
<div class="container mt-5">Der div-Tag wird verwendet, um einen Container zu erstellen, der den Inhalt auf der Webseite einfasst. Die Klasse container sorgt dafür, dass der Inhalt mittig und mit einem festen Abstand zu den Seitenrändern angezeigt wird.
Zusätzlich sorgt mt-5 für einen Abstand von oben (Margin Top), sodass der Container nicht direkt am oberen Rand der Seite klebt.
<div class="row">Mit der Klasse row wird eine Reihe (Row) definiert, die später mehrere Spalten (Columns) enthält. In dieser Reihe wirst du das Bild und den Text nebeneinander anordnen.
<div class="col-md-4"> (Bild Container)Hier wird eine Spalte mit der Klasse col-md-4 erstellt. Das bedeutet, dass diese Spalte 4 von insgesamt 12 Spalten einnimmt. Das Bild befindet sich in dieser Spalte.
Durch die Klasse img-fluid wird das Bild responsiv, d.h., es passt sich an die Bildschirmgröße an, ohne über den Rand zu gehen. Das alt-Attribut gibt eine Beschreibung des Bildes, die bei Problemen mit der Anzeige des Bildes oder für Screenreader wichtig ist.
<div class="col-md-8"> (Text Container)Diese Spalte nimmt 8 von 12 Spalten auf der Seite ein, da sie mit col-md-8 definiert ist. Diese Spalte enthält den Text.
In diesem Container wird eine Überschrift (mit <h2>) und ein Absatz (mit <p>) angezeigt.
Das Layout kann einfach angepasst werden, indem du die Spaltenanzahl änderst:
col-md-4 zu col-md-6, um das Bild breiter zu machen.col-md-8 zu col-md-6, um den Text weniger Platz einzunehmen.Wenn du möchtest, kannst du auch das Bild durch ein anderes ersetzen oder den Text ändern!