Aus dem Kurs: Bootstrap 5 Grundkurs
So erhalten Sie Zugriff auf diesen Kurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.
Karussell steuern – Tutorial zu Bootstrap
Aus dem Kurs: Bootstrap 5 Grundkurs
Karussell steuern
Bootstrap bietet mehrere, interaktive Komponenten, die JavaScript brauchen, diese können Sie steuern im HTML-Code oder auch per JavaScript. Wie das funktioniert, sehen wir uns am Beispiel eines Karussells an. Das ist das Karussell, d. h., wir haben Bilder, die dann immer durchgewechselt werden. Im HTML-Code gibt es ein umfassendes Element mit dem Klassen carousel und slide. Da drin steht ein Element mit der Klasse carousel-inner und dieses beinhaltet dann mehrere Elemente mit den Klassen carousel-item, wobei das Bild, was direkt zu sehen sein soll, noch zusätzlich die Klasse active erhält. Soweit ist alles ganz klassisches Bootstrap, nun gibt es eine Besonderheit und das ist diese Angabe hier: data-bs-ride. Über data können Sie eigene Attribute definieren in HTML5, diese sind bei Bootstrap mit dem Präfix "bs" versehen und über data-bs-ride mit dem Wert "carousel" sorgen sie dafür, dass das Karussell automatisch startet und durchläuft. D. h., Sie brauchen keine Zeile…
Inhalt
-
-
-
-
-
-
(Gesperrt)
Bilder anpassen2 Min. 22 Sek.
-
(Gesperrt)
Cards nutzen3 Min. 54 Sek.
-
Formulare erstellen3 Min. 48 Sek.
-
(Gesperrt)
Karussell steuern3 Min. 34 Sek.
-
(Gesperrt)
Karussell mit Buttons4 Min. 33 Sek.
-
(Gesperrt)
collapse – ein-/ausklappen2 Min. 4 Sek.
-
(Gesperrt)
Responsive Klappnavigation4 Min. 53 Sek.
-
(Gesperrt)
Challenge – Navi im Layout ergänzen1 Min. 14 Sek.
-
(Gesperrt)
Solution – Navi im Layout3 Min. 42 Sek.
-
(Gesperrt)
KI-Unterstützung5 Min. 25 Sek.
-
(Gesperrt)
-