Bootstrap5
Links
Zielsetzung
Bootstrap ist eine Sammlung von CSS-Definitionen, die die Gestaltung von Webseiten stark vereinfacht.
Die aktuelle Version ist 5.
Schnellkurs
- eine Beispieldatei bootstrap.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Start</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Impressum</a>
</li>
</ul>
<form class="d-flex">
<button class="btn btn-secondary" type="button">Settings</button>
<button class="btn btn-primary" type="button">Logout</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Meine erste Bootstrapseite</h1>
<p>Ändere die Fenstergröße, dann siehst du das Verhalten bei verschiedenen Größen!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
- Es gibt 3 Bereiche:
- Die schwarze Zeile mit dem Navigationsmenü. Im Quelltext ist das der Bereich
<nav> ... </nav> - Der blaue Bereich. Im Quelltext: <div class="container-fluid ...">...</div>
- Der weiße Bereich mit 3 Spalten. Im Quelltext: <div class="container mt-5">...</div>
- Die schwarze Zeile mit dem Navigationsmenü. Im Quelltext ist das der Bereich
Container
.container-fluiderzeugt einen Bereich, der die volle Breite einnimmt..containererzeugt einen Bereich, der mit Padding ausgestattet ist, je nach Anzeigegerät. Solche Bereiche werden meist mit weiteren Klassen (im Beispiel mt-5) genauer spezifiziert.mt-5bedeutet Top Margin Stufe 5, das ist ein großer Abstand oben- Es gibt auch responsive Bereiche:
.container-XX, wobei XX folgende Werte annehmen kann:- sm: small. Bei < 576px: volle Breite, >576px: 540px >768px:
- md: medium
- lg: large
- xl: extra large
- xxl: extreme large
| Klasse | Extra Small | Small | Medium | Large | Extra Large | XXL |
|---|---|---|---|---|---|---|
| <576px | >= 576py | >=768py | >=992px | >=1200px | >1320px | |
| .container-sm | 100% | 570px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
Spalten
- Der 3.te Bereich enthält 3 Spalten.
- Wenn ein Bereich Spalten enthält, so wird immer folgende Struktur benutzt:
<div class="row"> <div class="col-XX-YY">...</div> <div class="col-XX-YY">...</div> ... </div>
- Im Beispiel ist col-XX-YY die Klasse col-sm-4: sm steht für Small Medium, 4 für die Breite: Zwischen 1 und 12.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">Login</div>
<div class="col-md-6"><input type="text"></div>
<div class="col-md-3"><button>login</login></div>
</div>
</div>
- Es werden 3 Spalten erzeugt, wobei die 2.te doppelt so breit wie die anderen ist.
- Wenn das Fenster zu schmal wird, dann erscheinen die "Spalten" untereinander.