Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Bootstrap 3 Grundkurs

Vor- und Zurück-Verweise

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Kleine Hinweise auf frühere oder spätere Einträge, wie sie vor allem in Blogs zu finden sind, setzen ebenfalls auf eigene Komponenten.
04:41

Transkript

Sie kennen das sicher aus Blogs, nämlich die Möglichkeit, dass man am Ende einer sehr langen Blog Seite, entweder auf frühere Einträge zugreifen kann, oder auf spätere Einträge. Und natürlich gibt's in Bootstrap ebenfalls die Möglichkeit diese vor und zurück Punkte zu setzen. Das ganze findet sich bei Bootstrap eben unter der Abteilung Pagination auf der Komponenten Seite und da unter dem Begriff Pager. Pager ist etwas sehr leicht einsetzbares, um genau zu sein brauchen wir nur eine Klasse und die Klasse heißt eben Pager. Ich habe eine kleine rudimentäre Seite vorbereitet, auf der ich schon eine unsortierte Liste mit vor und zurück gesetzt habe und die werden wir uns jetzt mit Hilfe von Bootstrap in der richtigen Art und Weise stylen. D. h. ich nehme zuerst mal meine unsortierte Liste und die bekommt die Klasse die sie braucht, nämlich pager. Mehr ist es nicht. Also, speichern wir's uns und schauen's uns mal an. Und hier haben wir's schon. Das einzige Problem ist nur, dass das gerade zu richtig toll ausschaut, weil die packen's so in der Mitte, schöner wär's wenn sich an den Rand bewegen täten. Aber keine Sorge, auch das ist nicht wirklich ein großes Problem. Sie müssen nur den entsprechenden Listen-Elementen ebenfalls noch Klassen mitgeben. Und die Klassen sind selbstredend. Bei den wo es zurück geht, heißt natürlich die Klasse previous und bei der Klasse wo es in die andere Richtung geht, heißt es natürlich next. Und das ist es. Mehr ist da nicht. Schauen wir uns das ganze nochmal an. Und jetzt passt das wunderbar. Aber damit noch nicht genug. Denn, natürlich gibt's die Situationen, dass es kein weiter nach vor mehr geben kann, oder auch kein weiter zurük mehr geben kann, und auch dafür gibt's passende Einstellungsmöglichkeiten. Sehr klassisch innerhalb von Bootstrap, wann immer so etwas passiert oder so etwas zum Thema werden könnte, ist die Lösung dafür, dass Sie eine Klasse erweitern um den Klassenbegriff disabled. Disabled. Und mit disabled setzen Sie diesen Link auf nicht funktionierend. Das ist auch optisch ganz gut erkennbar. Schauen wir's uns wieder an. So. Hier habe ich den Link Zurück. Der funktioniert nach wie vor wunderbar, aber der nach vor, den gibt's einfach nicht mehr und es ist sogar so gestalltet, dass Sie ein Verkehrszeichen angezeigt bekommen. Wenn Sie jetzt Ihre 2 Buttons auch noch ein bisschen ausgestallten wollen, dann können Sie natürlich auf Glyphicons zugreifen und auch das schauen wir uns noch schnell an. Wir wechseln also wieder auf die Glyphicons. Sehen uns an welche Glyphicons uns da gefallen könnten, und ich werde wohl die beiden nehmen. D. h. ich hole mir da schon mal die eine Klassenbezeichnung. Kopiere sie mir und werde mir jetzt hier noch ein span Element hineinsetzen, denn wie Sie wissen, kommen Glyphicons ja als Klasse in spans zu uns und da füge ich jetzt mal das eine Glyphicon ein und das zweite wird ja nach der Schrift vor sein müssen, also füge ich auch den span als Element mit seiner Klasse nachher ein. Nach Adam Riese müsste es jetz eigentlich nur drum gehen, hier left zu rigth zu tauschen, und natürlich werde ich hier das disabled wieder wegnehmen. Ich speicher das ganze und sehen wir's uns an. A ok, da habe ich jetzt was vergessen. Ich weiß schon was ich vergessen hab'. Das sollten wir beim Kopieren immer bedenken, dass wir da diese Punkte, die das Symbol für die Klassen sind, wegnehmen. Ich speicher das neuerlich. Wir probieren's nochmal. A, und schon hat's funktioniert. Schon bekommen wir unsere passenden Symbole zu diesen kleinen Buttons. Und ein weiteres mal ist es so, dass man in sehr zügiger Zeit zu optisch reizvollen Ergebnisen kommen kann.

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!