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

Basis-Hauptnavigation erzeugen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unter den Bootstrap-Komponenten finden sich auch fertige Navigationsmenüs. Sie werden über CSS-Klassen eingebunden und ermöglichen flottes Arbeiten.
05:51

Transkript

Was hier eindeutig noch fehlt ist eine Navigation. Und wenn Sie jemals so wie ich eine menge Zeit damit verbracht haben, eine Navigation so hinzubiegen, dass sie gut zu einer Seite passt, dann werden Sie begeistert sein, von der Möglichkeiten die Bootstrap Ihnen bieten kann. Schauen wir uns mal die Möglichkeiten an. Ich wechsele auf die Bootstrap Seite und unter dem Menüpunkt Komponenten, haben Sie einerseit kleinere Navigationsmöglichkeiten und nav-tabs, also einfach unterschiedliche Gestaltungen. Oder Sie können auf fertige Navigationsbalken quasi zurückgreifen. Die Vorgehensweise ist denkbar einfach. Sie haben wieder eine spezielle Klasse die Sie einführen und mit dieser Klasse definieren Sie automatisch, dass was Sie erreichen wollen. Also, bauen wir das ganze selbst nach. Ich möchte meine Navigation nach dem clearfix im header anbringen und habe hier einen Fehler, den tue ich mal weg. So, jetzt passt's wieder. Ich werde also eine Sektion erstellen und dieser Sektion gebe ich die Klasse navbar mit und zwar navbar-default. Das ist das, was ich jetzt auf der Vorlage gesehen habe und das möchte ich jetzt mal nachbauen. Auserdem glaube ich, dass das ganz gut zu meinem Design dazu passen könnte. Und das ist schon die Ummantelung für meine unsortierte Liste, die jetzt ebenfalls als Klasse nav navbar-nav mitbekommt. Mehr muss gar nicht sein. Und das, was ich jetzt noch brauche ist, einfach meine Listenelemente und d. h. ich fange hier mit der ersten Liste an, innerhalb derer möchte ich gerne ein href haben und in dem href soll meine index.html zu legen kommen und das ganze bekommt den Titel home. So, dann kopiere ich mir das ganze und werde versuchen das vorgehend zu beschleunigen. 4 Seiten brauche ich und das zweite wird eine ueberuns.html und da steht dann hier natürlich ueberuns, dann haben wir hier eine impressionen.html mit der Überschrift impressionen und zu guter Letzt eine impressum.html, wo im Text ebenfalls impressum steht. So, sehen wir uns das Ergebnis doch einfach einmal an. Und Sie sehen schon hier mit ein, zwei Klassenspezifiker dazu, bekommen wir eine fix fertige Navigationsleiste geboten. Wenn ich jetzt z. B. meine aktive Seite auch als aktive Seite sichtbar machen möchte, dann ist das von der Vorgehensweise her, so wie Sie's eh schon kennen, Sie geben einfach dem aktiven Element die Klasse active mit. Ich speicher's und wir schauen's uns wieder an. Und habe ab dem Moment meine aktiv-gekenzeichnete Abteilung. So habe ich jetzt ein einfaches Navigationselement geschaffen, ohne das ich mich anstrengen müsste. Bin dem aber nicht einfach nur schutzlos ausgeliefert, sondern das Verändern der Klasse, verändert auch gleichzeitig dann wieder das Aussehen und so haben Sie z. B. die Möglichkeit, wenn Sie keinen navbar-default haben wollen, dass Sie z. B. sagen Sie möchten eine navbar-inverse. Schauen wir das mal an, was dann rauskommt dabei. Genau. Dann ist einfach die Farbkvalität umgekehrt und umgedreht. Ist im Moment sehr beliebt. Ob wir das jetzt so haben wollen, ist wieder eine andere Frage. Ich glaube ich werde es wieder umstellen, oder was Sie noch machen können, ist, warten Sie, ich schaue mal auf der Seite nach, damit ich keinen Fehler mache. Es ist durchaus möglich, dass Sie die Navigationsbar mit einer fixen Position vergeben. Jetzt ist es bei uns, in meinem Beispiel zwar so, dass sie sowieso ganz an der obersten Kante liegt. Ich könnte sie aber auch da oben fixieren. Und welche Möglichkeiten Sie eben prinzipiell hätten, mit der Navigation umzugehen. Hier haben Sie z. B. das Beispiel mit navbar-fixed-top. Damit würde die Navigation auf jeden Fall immer ganz oben fixiert bleiben. Und das selbe gilt aber z. B. hier für navbar-fixed-bottom. Also werden wir das mal kopiern. Und uns anschauen wie das ausschaut, wenn wir's bei uns einsetzen. Und ich füge es hier wieder ein. Speicher das ganze und habe ab dem Moment eben hier herunten meine Navigationsleiste. Musste mich also selber nicht quälen, musste nicht viel herumturnen so zu sagen mit meinem CSS, sondern konnte einfach das Vorgefertigte nehmen und damit war's gut. Und Sie merken schon, es ist einmal mehr sehr einfach diese einzelnen Versatzstücke und Elemente zu nehmen und einzubauen, um sie dann an den eigenen Bedürfnissen anzupassen.

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)
Sehr zu empfehlen
Jens H.

Ein sehr guter Einstieg in Bootstrap - der motiviert, sich mit diesem Framework zu beschäftigen. Didaktisch gut aufbereitet in einem angenehmen Tempo. Ich warte geduldig auf "Bootstrap für Profis...." :-)

 

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!