Bootstrap Projekt Europa: Teil 2: Navigation erstellen. 1)Zuerst eine <nav> mit der Klasse: class= navbar. Inhalt:

Transkript

1 Bootstrap Projekt Europa: Teil 2: Inhalt: Navigation erstellen Karussell erstellen Navigation erstellen Unter Components Nav bzw. Navbar Navbars haben auch wieder eine eigene Klasse wie z.b. class= navbar navbar-default Nun baue eine kleine erste eigenständige, ohne Kopie von der bootstrap-seite. 1)Zuerst eine <nav> mit der Klasse: class= navbar. Diese passt sich mit seiner Breite an den <container> an. a)blaue Farbe: navbar-dark bg-primary <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> Europa </nav> Ergebnis: b)hellere Farbe navbar-light bg-light Eberhart 3_b4_europa2.nav_und_carousel.docx 1

2 2)Company-Logo verwenden: Die Breite für ein optimales Brand-Logo wäre ca. 170 Pixel. Verwende daher folgendes brand -Bild aus dem img -Ordner: Füge folgende Zeile ein: <a class="navbar-brand" href="index.html"><img src="img/brand_hak.jpg" alt="hak Logo" width="40" height="auto" > href auf index bedeutet, dass ein Klick auf das Logo von jeder Seite (später) auf die index-site führen wird Das Bild wird durch <img src> eingebunden. Die Größe passt bei ca. 40 Pixel. Eberhart 3_b4_europa2.nav_und_carousel.docx 2

3 3)diverse Einträge Noch VOR dem Ende der </nav> folgen nun die verschiedenen Einträge, beginnend mit einer neuen <div>. Die Klasse ist einen collapse navbar-collapse mit einer id, die man später wieder benötigt. Darunter folgen der Start der <ul> (unumberd liste) mit der Klasse navbar-nav mit mr-auto für margin right auto. Das bedeutet, dass die Wörter links stehen. Ein ml-auto würde die Wörter rechtsbündig anordnen. Nun folgt die List-Item Info: <li class="nav-item active"> <a class="nav-link" href="index.html">home</a> </li> Füge noch zwei weitere Einträge ein, nämlich Impressum und Kontakt. Hier aber ohne korrekte Verlinkung zu einer Seite, daher nur # : Ergebnis: Eberhart 3_b4_europa2.nav_und_carousel.docx 3

4 Das active bedeutet, dass die aktive Seite erkennbar ist. Hier die index.html, da wir uns ja auf dieser befinden. Auf der jeweiligen Seite muss das active immer jeweils umgestellt werden! 4)Navigation mit Dropdown Erstelle einen weiteren Eintrag für Fotos. Dieser soll ein Dropdown-Menü erhalten. Der Listeneintrag erhält die Klasse dropdown dazugeschrieben und die Klasse nav-link den Zusatz dropdown-toggle im aktuellen Link, damit das Ereignis dropdown überhaupt ausgelöst werden kann. Und danach der direkte Anstoß durch data-toggle= dropdown : Danach, noch innerhalb dieser <li> folgt nun noch das Erstellen des Untermenüs. Eberhart 3_b4_europa2.nav_und_carousel.docx 4

5 5)Navigation mit Colapse die Navi löst sich bei kleinen Bildschirm auf in einen Button Erstelle dazu ganz oben, zwischen navbar-brand und dem Beginn der collapse navbar-collapse einen Button. Die Klasse lautet navbar-toggler. Der Type ist button. Mit Hilfe von data-toggle wird ermöglicht, dass mit einem Element etwas passieren kann. data-target gibt Auskunft, was mit dem Element passiert. Hier muss man die id ansprechen, die den Inhalt für diesen Button ausmacht und zwar mit einer vorangestellten Raute #. Auslöser ist Click und nicht Hover - wegen Smartphones (hier gibt es kein "hover") und datatarget="#inhalt" (hier befindet sich das eigentliche Menü) Das Icon im Button erstellt diese bekannten drei Striche im Button. Ohne dem wäre der Button leer und kaum sichtbar. Info: Die id kann natürlich auch anders und einfacher heißen, z.b. statt id="inhalt auch eberharts_bar und natürlich oben bei data-target="#inhalt" ebenfalls dann eberharts_bar. Damit aber der Nutzer der Website einen schönen Button zum Anklicken hat, sollen die bekannten drei Striche im Buttonrahmen angezeigt werden. Das wird durch dieses navbar-toggler-icon ermöglicht. Ergebnis: bei verkleinerter Bildschirmansicht Eberhart 3_b4_europa2.nav_und_carousel.docx 5

6 Beispiel: Eberhart 3_b4_europa2.nav_und_carousel.docx 6

7 Karussell einfügen Besuche die Seite unter Documentation und dann Components und Carousel. Scrolle zum Thema: with indicators Kopiere unter der Vorschau den Code durch Klick auf Copy. Füge den kopierten Code auf der Indexseite, im Bereich <article> nach der Überschrift Teilnahme ein. Am besten nach dem Paragraf dort. Noch vor dem Link. Das Carousel funktioniert aber erst, wenn die Bilder korrekt verlinkt sind. Dafür sind die Pfade auf den Ordner carousel im Ordner img. Die Bilder sind recht groß. Aber ok. Leider sind sie nicht gleich groß, dadurch kommt es zu hässlichen Verschiebungen, wenn man das Carousel durchlaufen lässt. Das darf in Zukunft nicht mehr passieren. Man muss nämlich die Bilder gleich hoch und breit machen. Eberhart 3_b4_europa2.nav_und_carousel.docx 7

8 Dieses class= active in Zeile 51 bedeutet, dass der Kreis ausgemalt ist. Ergebnis: Eberhart 3_b4_europa2.nav_und_carousel.docx 8