Bootstrap 3 Grundkurs

Breadcrumbs

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Breadcrumbs funktionieren ähnlich wie Navigationen – sie erfüllen auch eine ähnliche Aufgabe. Auch solche Elemente sind rasch und einfach eingefügt.
05:51

Transkript

Im volgenden möchte ich ganz gerne den footer Bereich mit einer kleinen bread crumbs Eintrag-Geschichte ergänzen. Um Ihnen zu zeigen wie bread crumbs prinzipiell funktionieren und weil sie nun mal für große und eher unübersichtliche Seiten ein notwendiges kleines plus sind, dass die Ereichbarkeit der Seiten verbessert. Lange Rede kurzer Sinn. Wenn wir auf die Bootstrap Seite schauen, merken wir, dass auch die bread crumbs sehr schnell und einfach eingebunden werden können. Also, bauen wir sie einfach nach. Dieses mal als ordentliche Liste und weil ich mir die Arbeit nicht schwerer als notwendig machen möchte, gehe ich hinunter in den footer Bereich und werde hier als aller erstes einmal die Anzahl der Kolumnen verändern. Und zwar möchte ich, dass der footer Bereich dann über die ganze Kontent bis auf die Container Seite geht. D. h. das erste was ich hier mache ist, dass ich mal ein div erzeuge, mit 8 Spalten und da werde ich meine bread crumbs hineintun und für meinen copy Hinweis erzeuge ich ein weiteres div, mit der Klasse col col-md-4. So hätten wir diese kleinen Vorbereitungsarbeiten und hier herein werde ich mir meine Linkliste kopiren, nur das ich dann aus der ungeordneten Liste eine geordnete mache und eben eine andere Klasse vergebe. So, hier bin ich wieder. Füge sie ein und wie gesagt aus der ul wird eine ol, und aus der Klasse wird die Klasse breadcrumb. Und hier ist auch gleich die erste Eintragung aktiv, also schauen wir uns mal das Ergebnis an. Ich speicher mit Steuerung S und habe jetzt hier meine bread crumbs. Und hier daneben habe ich meinen Hinweis zu copyright, das gefällt mir jetzt gerade so nicht sehr gut. D. h. das werden wir noch ein bisschen anpassen müssen. Ich gehe wieder zurück in mein Aptana Studio und werde hier diesen Teil vorerst überhaupt entvernen und stattdessen hier erweitern auf 12 Spalten. Ja. Und jetzt sieht das ganze bedeutend einhaltlicher aus, weil wir hier nämlich den Balken jetzt zu wahnsinnig über die ganze Breite drüber haben, was den Gesamteindruck einfach besser tut. Gut. Schauen wir weiter. Das, was bread crumbs ausmacht, ist ja eigentlich, dass man an Hand dieser Einträge sehen kann wo man gerade ist. Diese Aufgabe erfüllen diese bread crumbs jetzt gerade noch nicht. Also lassen Sie uns anschauen warum die das nicht tun. Ja und da sehe ich's auch schon. Wir werden einfach bei der Klasse die gerade aktiv ist, natürlich den Link entvernen. Und da brauchen wir keinen Link, weil auf der Seite sind wir schon. Und dann müsste das active auch tatsächlich zum tragen kommen. Ich speicher das mal und schauen wir's uns nochmal an. Ja. Jetzt ist es offensichtlich. Hier bin ich gerade und hier könnte ich hinhüpfen wenn ich wollte. D. h. das ganze müssen wir jetzt nur noch übertragen auf die anderen Seiten, damit die Funktionalität wirklich gegeben ist. Also schauen wir uns die anderen Seiten noch an. Ich fange mit den Impressionen an. Die Impressionen brauchen überhaupt noch diesen footer Bereich. Den könnte ich mir als ganzes rüberkopieren. So. Dieser neue überholte footer Bereich, mit Steuerung C kopiere ich ihn mir. Hier habe ich jetzt die Impressionen geöffnet, gehe da zu meinem klassischen footer und tausche einfach mal den Fußbereich aus und dann tausche ich hier eben das aktive Element aus. Ich bin jetzt bei den Impressionen, d. h. jetzt kommt hier der Bereich weg und das a tue ich hier gleich wieder dazu und das werde ich auch hierher verschieben, wobei das ist index.html und dafür wandert das active Element nach unten. Steuerung X. Steuerung V. Gut. So, hier regt es sich auf. Da habe ich wohl irgendwas übersehen. List class Impress a ja. Da ist zuviel mitgehüpft. Fehlt das jetzt irgendwo? Ja, das fehlt hier. Gleich haben wir's geschaft. Gut. Letztendlich führen wir das dann für alle anderen Seiten aus. Jetzt schauen wir uns aber erstmal an wie das ganze dann bei den Impressionen funktioniert hat. Und es hat funktioniert. Wunderbar. Da sehen Sie, dass bread crumbs mindestens genauso leicht eingefügt werden können wie z. B. Navigationslemente. Es ist ja letztendlich auch nichts anderes als ein Navigationselement.

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)
Derzeit sind keine Feedbacks vorhanden...
 

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!