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,shadowusw. sind wirksam.
Beispiele für mögliche Tab-Anordnungen
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.
Weitere Elemente
Software
Weiterführende Informationen
Downloads
 | Bootstrap-Bedienelemente ohne JavaScript | ||
| Beispiele und CSS-Dateien. Für jedes Element ist eine einzelne CSS-Datei vorhanden.
| Download | ||
11.82 KB MIT  | 66 | ||
Titel-Bild von Thorsten Willert, basierend auf der Startseite von Bootstrap. Bootstrap-Icon aus simple-icons.