Das wäre eine Einleitung, die natürlich eine beschreibende Aufgabe übernimmt!
- Und deshalb schön formatiert
- Im Kontext erkennbar als Übersicht
- und den Wunsch weckend, mehr darüber zu erfahren
Viel Spass beim vertiefen!
Was Bootstrap 5 in TYPO3 leistet
Bootstrap 5 ist ein CSS-Framework, das Layout, Komponenten und Utility-Klassen mitbringt. In Verbindung mit TYPO3 übernimmt es die Darstellungsebene, während die Inhalte redaktionell gepflegt bleiben. Diese Seite gibt einen Überblick über alle Bereiche, die dabei eine Rolle spielen – vom Raster über die interaktiven Komponenten bis zu Barrierefreiheit und Ladezeit.
Jeder der folgenden Abschnitte fasst ein Teilgebiet zusammen und verweist auf die vertiefenden Artikel. Wer sich zuerst orientieren will, nutzt die Liste „Auf einen Blick“ und springt direkt zum passenden Abschnitt.
Grid-System und Layout
Container, Rows und Columns richtig einsetzen
Das Grid ist das Fundament jedes Bootstrap-Layouts. Zwölf Spalten, fünf Breakpoints und drei Container-Varianten reichen aus, um praktisch jedes Seitenraster abzubilden. Entscheidend ist, Zeilen und Spalten sauber zu verschachteln und die Abstände über Gutter-Klassen statt über eigenes CSS zu steuern.
Ein Bootstrap-Layout besteht immer aus drei Ebenen: einem Container, darin Zeilen und darin Spalten. Der Container legt die maximale Breite fest, die Zeile setzt den negativen Außenabstand, die…
#Tag 1
Navigation und Menüs
Navbar, Dropdown und Offcanvas
Die Navbar ist die sichtbarste Komponente einer Website und zugleich die fehleranfälligste. Sie muss auf jedem Breakpoint bedienbar bleiben, den aktiven Zustand korrekt anzeigen und per Tastatur erreichbar sein. Bootstrap liefert dafür Navbar, Dropdown, Collapse und Offcanvas als aufeinander abgestimmte Bausteine.
Eine Navbar bündelt Logo, Hauptnavigation, Suche und Sprachumschalter in einer Leiste, die auf jedem Gerät funktionieren muss. Unterhalb des gewählten Breakpoints klappt sie zusammen – entweder als…
Interaktion#Tag 2
Cards und Teaser
Inhalte in gleichmäßigen Kästen anreißen
Cards sind der Standardbaustein für Teaser-Übersichten: Bild, Titel, Kurztext und ein Call-to-Action in einem Kasten. Damit ein Grid aus Cards ruhig wirkt, brauchen alle Karten dieselbe Höhe und ein einheitliches Bildseitenverhältnis – beides löst Bootstrap mit h-100 und einem festen Crop.
Eine Card besteht aus einem optionalen Bild, einem Körper mit Titel und Text und optional einer Fußzeile. Alle drei Teile sind eigenständige Klassen, die sich frei kombinieren lassen. Für…
LayoutGestaltung#Tag 2#Tag 3
Formulare gestalten
Eingabefelder, Validierung und Fehlermeldungen
Formulare entscheiden über Konversion. Bootstrap bringt fertige Klassen für Beschriftungen, Hilfetexte, Gruppierungen und Validierungszustände mit. Wichtig ist, dass jede Fehlermeldung dem Feld eindeutig zugeordnet ist und nicht allein über Farbe transportiert wird.
Ein Formular ist die Stelle, an der aus einem Besucher ein Kontakt wird. Entsprechend teuer ist jeder Abbruch – und die häufigsten Gründe dafür sind hausgemacht. Bootstrap bringt fertige Klassen für…
Interaktion#Tag 2
Bilder und Medien
Responsive Bilder, Seitenverhältnisse und Galerien
Bilder machen den größten Teil des übertragenen Datenvolumens aus. Mit responsiven Bildquellen, festen Seitenverhältnissen und Lazy Loading bleibt das Layout stabil und die Seite schnell. TYPO3 liefert die passenden Bildvarianten über die Bildbearbeitung automatisch mit.
Bilder machen in den meisten Projekten den größten Teil des übertragenen Datenvolumens aus. Sie sind damit die erste Stellschraube, wenn eine Seite langsam wirkt. TYPO3 erzeugt aus einem hochgeladenen…
Gestaltung#Tag 3
Farben, Themes und Dark Mode
CSS-Variablen statt fester Farbwerte
Seit Bootstrap 5.3 laufen alle Farben über CSS-Variablen. Damit lässt sich ein Theme zentral umstellen und ein Dark Mode ohne zweites Stylesheet abbilden. Eigene Farben gehören in die Variablen-Ebene, nicht in einzelne Komponenten.
Seit Bootstrap 5.3 laufen alle Farben über CSS-Variablen. Das klingt nach einer Kleinigkeit, ändert aber, wie ein Theme gebaut wird. Früher wurden Farben beim Kompilieren in jede einzelne Regel…
Gestaltung#Tag 3
Typografie und Lesbarkeit
Schriftgrößen, Zeilenlänge und Hierarchie
Eine klare Überschriftenhierarchie hilft Lesern und Suchmaschinen gleichermaßen. Bootstrap liefert eine abgestufte Typo-Skala; entscheidend sind die richtige Zeilenlänge, ausreichender Zeilenabstand und der Verzicht darauf, Überschriftenebenen nur wegen ihrer Optik zu wählen.
Die häufigste Verwechslung im Redaktionsalltag: eine Überschriftenebene wird gewählt, weil die Schrift dann die richtige Größe hat. Damit zerfällt die Gliederung, auf die sich Screenreader und…
GestaltungQualität#Tag 3
Interaktive Komponenten mit JavaScript
Modal, Collapse, Tabs, Toast und Carousel
Die interaktiven Komponenten von Bootstrap kommen ohne jQuery aus und werden über data-bs-Attribute gesteuert. Wer sie mehrfach auf einer Seite einsetzt, muss auf eindeutige IDs achten – doppelte Ziel-IDs sind die häufigste Ursache dafür, dass ein Accordion oder Modal nicht reagiert.
Modal, Collapse, Tabs, Toast, Carousel und Dropdown bringt Bootstrap fertig mit. Gesteuert werden sie über data-bs-Attribute im Markup – eigener JavaScript-Code ist für den Normalfall nicht nötig.…
Interaktion#Tag 2
Barrierefreiheit
Kontraste, Fokus und Tastaturbedienung
Barrierefreiheit ist keine nachträgliche Prüfung, sondern eine Entscheidung im Markup. Sichtbare Fokuszustände, ausreichende Kontraste, sinnvolle Alternativtexte und korrekte ARIA-Attribute an den interaktiven Komponenten decken den größten Teil der WCAG-Anforderungen ab.
Barrierefreiheit lässt sich nicht am Ende prüfen und nachtragen. Sie entsteht bei jeder Entscheidung, welches Element für welchen Zweck verwendet wird. Vier Punkte decken den größten Teil der…
Qualität#Tag 2#Tag 3
Performance und Ladezeit
CSS reduzieren, Bilder ausliefern, Assets bündeln
Das komplette Bootstrap-CSS ist selten nötig. Wer nur die verwendeten Komponenten kompiliert, Bilder in passenden Größen ausliefert und Skripte am Seitenende bündelt, kommt bei den Core Web Vitals deutlich weiter als mit nachträglicher Optimierung.
Performance-Optimierung beginnt gern beim Minifizieren von CSS und übersieht dabei die großen Posten. Die Reihenfolge sollte umgekehrt sein. Der größte Hebel sind fast immer die Bilder – richtige…
Qualität#Tag 3
Container und Utilities
Abstände, Ausrichtung und Sichtbarkeit ohne eigenes CSS
Die Utility-Klassen sind der Grund, warum bei einem Bootstrap-Projekt so wenig eigenes CSS anfällt. Abstände, Flex-Ausrichtung, Rahmen, Schatten und Sichtbarkeit je Breakpoint lassen sich direkt im Markup setzen – solange man sich an die Namenslogik hält.
Der Grund, warum bei einem Bootstrap-Projekt so wenig eigenes CSS anfällt, sind die Utility-Klassen. Abstände, Ausrichtung, Rahmen, Schatten, Sichtbarkeit – alles direkt im Markup. Die Benennung folgt…
GrundlagenLayout#Tag 1