Bootstrap 3 Grundkurs

Foto-Karussell für die Startseite

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ausgesprochen beliebt auf modernen Web-Seiten: Der Einbau eines Bilder-Karussells. Dafür liefert Bootstrap eine Komponente, die auch mit geringen Vorkenntnissen eingesetzt werden kann.
05:07

Transkript

Ein Detail was im Moment auf Web Seiten sehr beliebt ist, vor allem auf der Startseite, sind so genannte Bilder Karussels. Und Bootstrap bring eine eigene kleine fertige Portion von so einem Karussel mit und wir werden jetzt ein vergleichbares Karussel einfach mit dem generierten Code, der sich hier befindet, erzeugen und noch ein bisschen optimieren. So, d. h. wir holen uns hier den Code mit Steuerung C und werden ihn in unserer Index-Seite wieder einbauen und zwar von der Position her nach dem Branding, aber noch vor Ende des headers. Mit Steuereung V füge ich das ganze mal ein als Text und sehe mir das dann aus der Nähe an. Hier habe ich mal ein sich öffnendes div und ich gehe mal das Ende suchen. Das ist ungefär hier. Gut. Das holen wir vielleicht ein Stückel rauf, tun's noch hierher und sagen das ist das ende carousel. Gut. Und dann müssen wir jetzt eigentlich nur noch unsere eigenen Daten einfügen. Nämlich die Quelle der Bilder die da jetzt irgendwie zum Einsatz kommen sollen. Und der saurce code ist bei mir in meinem image Ordner. Da habe ich eine eigene Abteilung für das Karussel und dann nehme ich als erstes gleich die Hängematte und hier kann ich noch den alternativ Text eintragen. Und das ist Hängematte. So. Das schließe ich hier, weil wir werden hier keine Bildschrift verwenden, also kann ich das mal zumachen und füge jetz aber noch die anderen Bilder ebenfalls hinzu. Als div mit der Klasse item und da drinnen ist nachher mein Bild mit der entsprechenden Quelle und das ist mein image Folder, darin ist mein carousel Folder und darin habe ich jetzt noch ein Bild, nämlich die Hängebrücke. Und hier auch gibt's einen alt Text dazu und der heißt Hängebrücke und da hier hinten, das brauchen wir nicht. Das ganze kopieren wir uns noch einmal für das dritte Bild was ich habe, nur das es nicht Hängebrücke heißt, sondern Wald. Ist gleich. Ist gleich. So. Ich habe jetzt diese 3 Bilder und hier sind jetzt noch die kleinen Pfeilchen nach links und nach rechts. Das sind wieder Glyphicons, die hier eingefügt worden sind. Ja, und jetzt müsste eigntlich schon ein ganz hübsches Bild auftauchen. Hoppla, ich glaube da habe ich mich ein ganz klein wenig vertan, da schieße ich etwas über's Ziel hinaus. Ich ahne auch schon wo das passiert. D. h. wir machen das ganze hier noch ein bisschen in Ordnung. Ich glaube ich habe hier auf jeden Fall noch ein div zuviel, weil da ist es, das öffnet sich, öffnet sich, öffnet sich... Schauen wir's uns jetzt an. Jetzt sollte es eigentlich so sein, wie sich's gehört. Ja, das ist richtig. Und es funktioniert auch, dass Weiterleiten des Bildes. Das einzige was jetzt eben noch fählt, ist dieses automatische Weiterreichen der Slides und das ist aber eine kleine JavaScript Geschichte, die aber ebenfalls hier augeboten wird. Und zwar ist es eine Methode. Und diese JavaScript Methode können wir uns eins zu eins rüberkopieren mit Steuereung C und zwar in unseren persönlichen JavaScript Ordner. D. h. ich habe hier mein JavaScript und da kann ich hier unten diese Methode einfügen. Hopla, ich werde hier noch einen Strichpunkt brauchen. Und speichern wir uns das und sehen uns das ganze dann an ob's funtioniert hat. Wahrscheinlich müssen wir die Seite auch von hier aus nochmal neu laden, damit der Effekt dann eintreten kann. Yup, jetzt läuft's. Und weiter geht's. Vielleicht ist der Zeitpunkt noch ein bisschen zu weitläufig gewählt, nein, aber es sieht ganz gut aus. Sie merken, dass es wunderbar vor sich hingleitet.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 Videos)
Umfassende Einführung in das Framework Bootstrap
Simone H.
Sehr gut erklärt, in flüssigem und leicht verständlichem Stil.
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!