Thorsten H. Willert

Bootstrap-Bedienelemente ohne JavaScript

Bootstrap-Bedienelemente aus reinem HTMl und CSS

Einige Bedienelemente wie z. B. Tooltips, Collapse, Tabs, Carousel usw. erfordern bei Bootstrap eine zusätzliche JavaScript-Datei (bootstrap.bundle.min.js) mit einer Größe von 80.42 kB.

Hier einige Beispiele mit CSS, so dass JavaScript nicht immer benötigt wird. Damit sparen Sie Übertragungsvolumen und Speicherplatz.

Die Beispiele sind für Bootstrap 5.3 optimiert. Damit ist auch ein Dark-Mode möglich.

Übersicht

Eine Sammlung an Bootstrap-Bedienelementen / Komponenten, bei denen ich JavaScript durch CSS ersetzt habe.
Card mit Collapse
Card mit Collapse
Tabs
Tabs
Carousel (beta)
Carousel
Tooltips
Tooltips

Kompatibel mit Themes

(Bootswatch: Sketchy-Theme)

Zusammenfassung


Mit ein wenig CSS lassen sich einige Bedienelemente komplett ohne JavaScript erzeugen.
Damit sparen Sie sich, für diese Fälle, die zusätzliche Übertragung der Datei bootstrap.bundle.min.js ( 80.42 kB).

Das spart Energie, Übertragungsvolumen, Speicherplatz und Ihre Seite wird schneller geladen.

Mehr zum Thema

Software

Weiterführende Informationen

Downloads

css Bootstrap-Bedienelemente ohne JavaScript        
Beispiele und CSS-Dateien.
Für jedes Element ist eine einzelne CSS-Datei vorhanden.
  • Card-Collapse
  • Tabs
  • Tooltips
  • Carousel (Beta)
 		   Download
 11.82 KB  MIT link_extern     158

Titel-Bild von Thorsten Willert, basierend auf der Startseite von Bootstrap.
Bootstrap-Icon aus simple-icons.
Details