Bootstrap-Logo

Card mit Collapse-Funktion im Stil von Bootstrap

aus reinem HTMl und CSS, ohne JavaScript.

Für Bootstrap 5.3 optimiert. Damit ist der Dark-Mode einfach möglich.

Die technischen Beschreibungen folgen noch.

Card mit Collapse

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

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.72 kB).

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

Mehr zum Thema

Weitere Elemente

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     201


Titel-Bild von Thorsten Willert, basierend auf der Startseite von Bootstrap. Bootstrap-Logo von Simple-Icons.