Bootstrap ist ein CSS-Framework, mit dem man leicht und schnell ein professionelles Layout für eine Webseite erstellen kann.
Ein einfaches Layout besteht aus einem Content-Bereich (rechts) und einer Sidebar (links). Der Content-Bereich ist das Herzstück einer Webseite. Hier können Text, Bilder und andere Inhalte angezeigt werden. Die Sidebar ist ein Bereich, der normalerweise auf der linken Seite einer Webseite angezeigt wird. In einem Bootstrap-Layout kann die Sidebar ebenfalls leicht strukturiert werden. Sie kann zum Beispiel Links, Kontaktinformationen, Suche oder andere Inhalte enthalten.
In jedem Bootstrap Layout müssen folgende Dateien eingebunden werden:
- bootstrap.min.css
- bootstrap.min.js
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mein Bootstrap 5 Layout</title>
<!-- Link zur Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<p>Sidebar</p>
</div>
<div class="col-md-9">
<h1>Hallo Welt!</h1>
<p>Dies ist mein erstes Bootstrap 5 Layout.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>