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.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Die Navigation mit Bootstrap

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie holen sich hier eine der Beispielnavigationen von Bootstrap und passen deren Struktur an.
03:29

Transkript

Ich habe nun meine grundsätzlichste Indexseite erstellt und als nächstes werde ich mir von Bootstrap eine Navigation holen. Zumindest das Aussehen oder das Erscheinungsbild einer Navigation. Dazu gehe ich wieder auf die Bootstrap-Seite und wechsle hier auf die Beispiele und bei den Beispielen gibt es auch unterschiedliche Navbars. Und ich möchte eine fixierte Navbar, das heißt, da werde ich jetzt gar nicht sehr viel selber tun, sondern ich werde mir mit der rechten Maustaste den Seitenquelltext anzeigen lassen und werde mir hier die fixierte Navbar holen. Die ist jetzt etwas ausführlicher als ich sie brauchen werde, aber weggekürzt sind die Sachen schneller und wieder mit Steuerung+C kopiere ich es mir und wechsle dann in mein Aptana Studio und werde es hier gleich nach dem Body Tag mit Steuerung+V einfügen. So, was habe ich mir da jetzt alles geholt? Ich habe mir eine prinzipielle Navigation geholt, deren grundlegendste Eigenschaften hier mit diesen Klassen schon vordefiniert sind. Nämlich, dass es eine Navigation mit der Klasse "navbar" ist und zwar "navbar-default" und "navbar-fixed-top". Praktisch ist es, wenn man danach hier eine Container-Klasse hat, und dann habe ich einen Header-Bereich. Wir sehen uns das Ganze am Besten jetzt einmal von vorne an, das heißt, ich speichere mir mein frisch zusammenkopiertes Produkt und sehe es mir im Firefox an. Wunderbar. Das heißt, ich habe hier jetzt eine fertige Navigationsbar, muss sie allerdings noch ein wenig anpassen. Wie sie sehen, ist mein "Hello, world!" da jetzt unter meine Navigation gerutscht, weil diese ja fix ist und auch die Menüeinträge, so wie sie dastehen, brauche ich jetzt in der Weise eigentlich nicht, aber die prinzipielle Struktur ist schon mal da. Und als nächstes werde ich jetzt einfach nur mal meinen Projekttitel anpassen. Meine Seite soll nämlich eine kleine Seite von einer Person sein, die geführte Wanderungen anbietet und der Name der Seite ist "Weg". Das heißt, das werde ich auch hier heroben im Titel eintragen. Da ist die Seite. "Weg" heißt... Und von all den Navigationspunkten brauche ich nicht sehr viele, ich werde den Start lassen, ich lasse "Über" und ich lasse "Kontakt", aber zum Beispiel die ganze Dropdown-Liste brauche ich nicht. Das heißt, die entferne ich ebenso wie diese rechtsseitige Navigationsbar. Die brauche ich so auch nicht. Mit "Entfernen" habe ich jetzt meine kleine, schlanke Navigationsbar, die ich ja dann gegebenenfalls auch noch erweitern kann. Ich speichere das Ganze, sehe es mir noch mal an... Jep, das gefällt mir schon besser und habe damit meine grundlegende Navigation fertig.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 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!