Interaktive Komponenten mit JavaScript

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.

Seit Version 5 kommt das ohne jQuery aus. Die Komponenten liegen im Bundle, das auch Popper enthält; Dropdown, Tooltip und Popover brauchen es für die Positionierung.

Die mit Abstand häufigste Fehlerquelle sind doppelte IDs. Jedes Collapse, jedes Modal und jeder Tab verweist über data-bs-target auf ein Element mit einer bestimmten ID. Kommt dieselbe ID auf einer Seite zweimal vor, greift der Browser auf das erste Vorkommen zu – und der zweite Block reagiert nicht mehr oder klappt den falschen auf.

In t3sbootstrap werden die IDs aus der uid des Content-Elements gebildet und sind damit eindeutig. Wer eigenes Markup schreibt, muss selbst darauf achten – besonders, wenn ein Element per Copy-and-paste vervielfältigt wird.