Bootstrap ist ein kostenloses, Open-Source-Frontend-Framework, das Entwicklern dabei hilft, schnell und einfach responsive, mobile-first Websites und Anwendungen zu erstellen. Es wurde ursprünglich von Twitter entwickelt und im Jahr 2011 veröffentlicht.
Bootstrap besteht aus einer Sammlung von HTML-, CSS– und JavaScript-Komponenten. Es enthält eine Vielzahl von vorgefertigten Komponenten wie Navigationsleisten, Formulare, Schaltflächen, Tabellen, Modale, Dropdowns, Bildlaufleisten, responsive Grid-System und vieles mehr.
Dies ermöglicht es Entwicklern, eine ansprechende und benutzerfreundliche Benutzeroberfläche vergleichsweise schnell zu erstellen, ohne dass responsive-rules erneut programmiert werden müssen. Der Einsatz von Bootstrap erfordert auch keine vertieften Kenntnisse in HTML, CSS und JavaScript, da die viele Komponenten bereits vorgefertigt sind und nur in das Projekt eingebunden werden müssen.
Bootstrap macht aus einer mittelmässigen Webseite eine grossartige Webseite und aus einer grossartigen Webseite ein Kundenmagnet.
Mobile-First-Konzept
Ein wichtiger Aspekt von Bootstrap ist das “Mobile-First“-Konzept, was bedeutet, dass die Webseite zunächst für die Darstellung auf kleineren Bildschirmen optimiert wird und man sich erst dann um die Darstellung auf grösseren Bildschirmen kümmert. Dies ermöglicht, dass die Webseite auf praktisch allen mobilen Geräten gut aussieht und benutzerfreundlich ist.
Die Basis einer Bootstrap-Webseite
Wenn eine neue Bootstrap-Website erstellt wird, fängt man normalerweise damit an, die Struktur der Seite mit HTML zu definieren. Diese könnte wie folgt aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>--- Bootstrap Beispiel ---</title>
<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">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css" rel="stylesheet">
</head>
<body>
<!-- TODO: Hier kommt der Webseiten Inhalt! -->
<!-- Bootstrap JS damit die dynamischen Komponenten funktionieren -->
<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>
Mit der Zeile “9”, werden die CSS-Komponenten von Bootstrap eingebunden, um das Layout und das Design der Seite zu definieren. Hierbei wird am einfachsten der CDN von Bootstrap verwendet:
<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">
Bei Zeile “19” wird auch noch die JavaScript-Komponente von Bootstrap hinzugefügt, um interaktive Funktionen wie Modal- oder Slider-Funktionen zu gewährleisten.
<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>
Wichtig hierbei zu erwähnen ist, dass wenn nicht Bootstrap 5+ verwendet wird, gerade bei Modal auch noch jQuery zur korrekten Funktion benötigt würde. Dies würde dann korrekterweise direkt oberhalb des JS-includes von Bootstrap (Zeile 19) inkludiert.
Beispiel einer Menu-Struktur
Ein grundlegendes Beispiel für die Verwendung von Bootstrap wäre die Erstellung einer Navigationsleiste. Mit Bootstrap kann diese schnell und einfach mit folgendem Code erstellt werden:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Swissmakers GmbH</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über Uns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>
Dieser HTML-Code stellt eine Navigationsleiste mit Links zu “Home”, “About” und “Contact” zur Verfügung. Durch die Verwendung der Bootstrap-Klassen “navbar“, “navbar-expand-lg“, “navbar-light” und “bg-light” wird die Navigationsleiste automatisch formatiert und auch gleich responsive und auf die verschiedenen Bildschirmgrössen angepasst.
Durch die Verwendung des Navbar-Togglers und der Klasse “collapse navbar-collapse” wird die Navigationsleiste auf kleinen Bildschirmen zusätzlich automatisch in ein Dropdown-Menü umgewandelt.
Gute Anlaufstellen für Bootstrap-Wissen
- Die offizielle Website von Bootstrap (getbootstrap.com) bietet eine umfangreiche Dokumentation, Beispiele und Templates, die man verwenden kann.
- Auf w3schools.com gibt es eine sehr gute Einführung in Bootstrap, die Schritt für Schritt erklärt, wie man Bootstrap verwendet.
- Auf tutorialrepublic.com gibt es eine Vielzahl von Tutorials zu Bootstrap, die verschiedene Aspekte von Bootstrap erklären.
Komplette und fertige Beispiele finden sich hier: https://getbootstrap.com/docs/5.3/examples/
