WordPress-Themes mit Bootstrap

Navigationsleisten einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bootstrap stellt mehrere vorgefertigte Navigationsleisten zur Auswahl, welche über eigens für kleine Bildschirme gestaltete Ansichten verfügen.
03:58

Transkript

Wenn ein Web Auftritt aus mehr als nur einer einzigen Seite besteht, dann brauchen wir eine Navigation, und das ist mit Bootstrap relativ einfach. Ich zeige es Ihnen mal. Ich gehe zu getbootstrap.com, gehe ganz nach oben auf "Getting started", das ist das Einfachste, und wenn ich hier runtergehe, dann habe ich hier verschiedene Examples und diese Examples, die haben auch verschiedene Navigationsmenüs schon vorgefertigt. Ich habe hier, wenn ich hier draufgehe, hier oben schon ein Menü. Dieses Menü, das bleibt auch immer stehen, egal ob ich hoch oder runter scrolle. Und wenn ich jetzt zum Beispiel hier die Seite kleiner mache, dann sehen Sie, verschwindet dieses Menü in diesem Dropdown Bereich und wenn ich wieder größer ziehe, dann ist das Menü wieder ganz zu sehen. Das ist zum Beispiel etwas, was ich gerne auf meiner kleinen Seite hier verwenden möchte, wie mache ich das? Ich habe jetzt dieses Beispiel hier, gehe auf den Quelltext und wenn ich hier jetzt mal reingehe, dann habe ich hier meine fixed navbar und genau diesen Bereich, den nehme ich jetzt mal in die Zwischenablage, muss ein bisschen aufpassen, dass ich nicht zu viel nehme, Strg+C und dann habe ich ihn bei mir in meiner Zwischenablage und füge den jetzt einfach mal hier direkt nach dem Bodytag ein und hoffe, dass ich hier weder zu viel noch zu wenig mitgenommen habe. Hier meckert er ganz kurz nochmal, dass es hier ein Fehler geben sollte, aber ich bin da mal ganz guter Dinge. Speichere das Ganze ab und jetzt schauen wir mal, was passiert ist. Jawohl, hier habe ich meine Navigation und wenn ich das jetzt kleiner mache, dann sehen Sie, ist hier auch automatisch diese Navigation anders. Jetzt fehlt mir hier natürlich dieser Bereich, weil diese Navigation oben ist ja fix, also ich muss den ganzen Inhalt meiner Seite nach unten packen. Das kann ich entweder per Hand machen oder ich schaue mal, wie das in dem Beispiel hier gelöst worden ist. Und da haben wir einen theme class-container theme-showcase und das hole ich mir jetzt auch mal her und hoffe mal, dass das automatisch dafür sorgt, dass der obere Bereich hier nicht verschwindet. Wenn ich das Ganze nochmal neu starte dann sehe ich, hat sich hier noch nichts getan. Jetzt gehe ich mal in den DOM Inspector hinein und hole mir nochmal den ersten Bereich, diesen container und jetzt kann ich hier natürlich sagen: ich möchte, dass der container also nach oben zum Beispiel 100px, das ist ein bisschen viel, machen wir es ein bisschen kleiner, Wie wäre es mit 55px? Und jetzt ist hier die Größe auch so eingestellt, dass der Inhalt der Seite immer zu sehen ist standardmäßig. Ich nehme jetzt einfach mal diesen Wert margin-top 55px, packe ihn in meine Zwischenablage und lege ihn jetzt auf diesen container zusätzlich per Hand drauf. Ich habe hier einen kleinen style Bereich und da schreibe ich jetzt einfach "mein container". Klammer auf, Klammer zu. Das definiere ich hier oben in meinem eigenen style sheet, was ich hier vorbereitet habe und sage hier margin-top 55px. Und wenn ich jetzt die Seite neu aufrufe, dann habe ich hier automatisch schon diesen Abstand eingebaut und kann damit weiterarbeiten. Das Schöne ist, Sie können innerhalb von Bootstrap sich einfach verschiedene Beispiele anschauen, können sagen: "Mensch, ich möchte eine Navigation." So wie hier beispielsweise mit Dropdown und so weiter. Gehen Sie einfach in den Quelltext und kopieren sich diesen entsprechenden Bereich raus und wenn das nicht ganz zu Ihrer momentanen Seite passt, dann ist es auch kein Problem. Sie können dann einfach beliebige Klassennamen hinzuschreiben, solange Sie keine vorgefertigten Klassennamen wegnehmen ist alles in Ordnung. und dann können Sie diesen neuen, von Ihnen hinzugefügten Klassen natürlich eigene Werte geben und die Seite so einrichten, dass es für Ihre Bedürfnisse passt.

WordPress-Themes mit Bootstrap

Verwirklichen Sie Ihre eigenen Designvorstellungen bei Ihrem Webauftritt und sehen Sie, wie Sie WordPress-Seiten über Plug-ins und Themes wie z.B. Bootstrap erweitern können.

2 Std. 33 min (39 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!