Thorsten H. Willert

Bootstrap-Bedienelemente ohne JavaScript: Card mit Collapse

Details
 
images/Allgemein/Bootstrap_Title.svg

Bootstrap-Card mit Collapse aus reinem HTMl und CSS

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

Die technischen Beschreibungen folgen noch.

Card mit Collapse

  • Eine Karte die sich einklappen (collapse) läßt.
  • Aufgebaut auf den HTML Elementen details und summary, gestylt mit Bootstrap und etwas zusäzlichem CSS.
  • Kann man allen Bootstrap-Card-Klassen umgestylt werden.

Zusammenfassung


Mit ein wenig CSS lassen sich Collapse-Bereiche 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

Weitere Elemente

Software

Weiterführende Informationen

Downloads

css.png 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
 04.02.2023  11.82 KB  MIT link_extern.gif     19

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