Demo

Weiterführende Artikel 10

• Navigation und MenüsNavigation und MenüsDie 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.…
• Cards und TeaserCards und TeaserCards 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…
• Formulare gestaltenFormulare gestaltenFormulare 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…
• Bilder und MedienBilder und MedienBilder 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…
• Farben, Themes und Dark ModeFarben, Themes und Dark ModeSeit 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…
• Typografie und LesbarkeitTypografie und LesbarkeitEine 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…
• Interaktive Komponenten mit JavaScriptInteraktive Komponenten mit JavaScriptDie 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…
• BarrierefreiheitBarrierefreiheitBarrierefreiheit 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…
• Performance und LadezeitPerformance und LadezeitDas 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…
• Container und UtilitiesContainer und UtilitiesDie 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 –…

Weiterführende Artikel 9

• test
• Buttons - newButtons - newBeispielseite zu den Button-Varianten – gefüllt und mit Rahmen, in allen Theme-Farben und Größen.
• CardsCardsBeispielseite zu den Card-Varianten: mit Bild oben, horizontal, im Raster und als Card-Group.
• SliderSliderBeispielseite zum Slider – mit und ohne Beschriftung, mit Indikatoren und unterschiedlichen Überblendungen.
• CollapseCollapseBeispielseite zu Collapse und Accordion – inklusive der Frage, wann sich Einklappen lohnt und wann es Inhalte versteckt.
• Media ObjectMedia ObjectBeispielseite zum Media Object: Bild links oder rechts, mit unterschiedlichen Ausrichtungen.
• ModalModalBeispielseite zum Modal – Größen, zentrierte Darstellung, scrollbarer Inhalt und die Frage, wann ein Dialog angemessen ist.
• TabsTabsBeispielseite zu Tabs: waagerecht und senkrecht, als Reiter oder Pills, mit Tastaturbedienung über die Pfeiltasten.
• ToastsToastsBeispielseite zu Toasts – Position, Stapelung, automatisches Ausblenden und Abgrenzung zum Modal.

Weiterführende Artikel 1

• Grid SystemGrid SystemAusführliche Beispielseite zum Grid: Aufteilungen, automatische Breiten, Offsets, Umbrüche und verschachtelte Raster.

Weiterführende Artikel 7

• Text & MedienText & MedienBeispielseite zu Text & Medien – alle Kombinationen aus Bildposition und Textfluss auf einen Blick.
• Image GalleryImage GalleryBeispielseite zu den Bildergalerien – unterschiedliche Raster, Vergrößerung im Überlagerungsfenster und Umgang mit gemischten Seitenverhältnissen.
• TabellenTabellenBeispielseite zu Tabellen – Varianten der Darstellung und die Frage, wie breite Tabellen auf dem Telefon bedienbar bleiben.
• Background WrapperBackground WrapperBeispielseite zum Background Wrapper: Hintergrundfarben und -bilder für ganze Abschnitte, mit Abständen und Randverläufen.
• Parallax WrapperParallax WrapperBeispielseite zum Parallax-Effekt, samt Hinweis auf prefers-reduced-motion und die Wirkung auf die Ladezeit.
• Background ImageBackground ImageBeispielseite zum Hintergrundbild – mit dem wichtigsten Punkt: genug Kontrast, damit der Text auf dem Bild lesbar bleibt.
• List Group & MasonryList Group & MasonryBeispielseite zu List Group und Masonry – wann eine Liste die bessere Wahl ist und wann ein Kachelraster.