Thorsten H. Willert

Bootstrap-Bedienelemente ohne JavaScript: Tabs

Details
 
images/Allgemein/Bootstrap_Title.svg

Bootstrap-Tabs 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.

Tabs

die auf kleinen Bildschirmen zu einem Accordion werden

  • Aufgebaut auf HTML-Radio-Buttons, gestylt mit Bootstrap und zusätzlichem CSS.
  • Auf schmalen Bildschirmen werden aus den Tabs ein Accordion (einfach diese Fensterbreite ändern).
  • Ist das Element aktiviert können die Tabs mit dem Tastatur-Cursor angesteuert werden.
  • Die Tab-Elemente können mit justify-content und mit weiteren Bootstrap-Flex-Klassen angeordnet werden.
  • Bootstrap-Klassen wie fade, shadow usw. sind wirksam.

Beispiele für mögliche Tab-Anordnungen

Justify Content Start
justify-content-start
Justify Content Around
justify-content-around

Zusätzliche Klassen

tab-marker
Zeigt eine Linie (primary color) am oberen Rand des aktiven Tabs.
tab-panel-bordered
Umrandet den Inhalt der Tabs.

Zusammenfassung


Mit ein wenig CSS lassen Tabs 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     20

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