Navigation erstellen mit Bootstrap // Der Weg zur eigenen Webseite! - Guide.

Natürlich brauchen wir jetzt auch eine Navigation für unsere Seite. Durch Bootstrap ist dies auch viel schneller erledigt. Außerdem werden wir uns noch kurz mit einem dreispaltigen Design beschäftigen. +HTML5-Elemente mit Bootstrap. (Damit unsere Seiten auch "unter der Haube" sehr schön aussehen.)

Ich wünsche dir jetzt schon viel Spaß beim lesen/lernen und nachmachen.

Bootstrap mit HTML5.

Wir haben doch ganz zu Beginn unserer Internet-Basics über HTML5-Elemente gesprochen. Heute verwenden wir diese Elemente in unserem Bootstrap-Design. Unsere Inhalte sind dadurch viel schöner gegliedert als gestern mit unseren vielen DIV's.

https://www.w3schools.com/code/tryit.asp?filename=FP6EHDWYXHN7

Aber fangen wir mal Schritt für Schritt an.

1. header-TAG.
   ^{Zuerst haben wir die Überschrift und den Slogan mit dem header-TAG umhüllt.}

   

2. section-TAG
   ^{Hier kann auch der DIV-TAG ersetzt werden. Es ist einfach sehr viel übersichtlicher, wenn wir die HTML5-TAGS nutzen.}

   

3. article-TAG
   ^{Als nächsten Schritt tauschen wir bei den "col" = Spalten die DIV-TAGs gegen den article-TAG aus.}

   

4. aside-TAG
   ^{Die Seitenleiste bekommt aber den aside-TAG. Der Vorteil mit Bootstrap: Wir müssen uns keine Gedanken mehr machen, wie wir die Seitenleiste "seitlich" bekommen. Wir müssen uns nur überlegen, ob sie links oder rechts hinkommen soll und wie breit sie von einer Skala von 1 bis 12 sein soll.}

   

5. Nicht vergessen! Ende-TAGs auch umbenennen.
   ^{Wir haben alle TAGs umbenannt, um eine bessere lesbarere Struktur zu bekommen. Da dürfen wir nicht vergessen, dass wir alle TAGs auch beim "Schluss" oder End-TAG auch nochmal richtig benennen.}

   

6. footer-TAG
   ^{Den letzten Bereich der Seite nennen wir Footer (=Fußzeile).}

   

Zusätzliches.

So jetzt hätten wir alles umbenannt und HTML5 gerecht gestaltet. Für uns ist so viel leichter den Code später wieder zu verstehen.

Ich habe unser Design noch ein wenig aufgebessert, diese Schritte werde ich auch noch schnell erklären.

1. Einen zusätzlichen drei-spaltigen Bereich.
   ^{Wir sind jetzt aber an kein fixes Layout verbunden. Es ist sehr einfach ein dreispaltiges Layout zu erstellen. Mit Bootstrap ist das sehr einfach. Wenn wir diese Seite z.B. mit dem Smartphone ansehen, werden die jeweiligen Spalten untereinander angezeigt.}

   

2. Ein wenig CSS.
   ^{Damit unsere Seite ein wenig besser aussieht, habe ich sie mit CSS ein wenig erweitert. Ich hoffe, dass es dir auch gefällt.}

   

CSS.

Sehen wir uns den CSS-Code nochmal etwas genauer an. Was habe ich gemacht?

body

• padding-top: 5rem // Abstand von oben.
  ^{Ein aufmerksamer Leser machte mich aufmerksam: natürlich gibt es auch noch die Einheit rem. Wir können diese neben px und % auch verwenden.}
• background, background-color, background-size // Hintergrund
  ^{Ich habe einen CSS3-Hintergrund gewählt. Das sind Hintergrund-Muster/Bilder die ohne Grafik funktioniert, also nur mit wenigen Zeilen CSS. Eine Hilfreiche Seiten für weitere Hintergrundmuster: klick.}

  

  ^{Screenshot von der oben verlinkten Seite. Dies sind Beispiel-Hintergründe, die wir kostenlos übernehmen können. Der riesige Vorteil: Die Seiten werden extrem schnell geladen, da es nur wenige Zeilen Code sind. Sie sehen aber trotzdem super aus!}

---

.container

background-color:white // Damit der gesamte Inhaltsbereich weiß ist und nicht vom globalen Hintergrund bedeckt ist.

---

header, footer

Wenn wir "header, footer" mit Beistrich trennen, können wir beide HTML-TAGs zugleich bearbeiten.

padding: 15px // Damit der Bereich innerhalb von header und footer 15px eingerückt ist.
background-color:#efefef // Eine andere Hintergrundfarbe, damit es ein wenig hervorrückt.
margin-top:15px // Außenabstand oben von 15px.
margin-bottom:15px // Außenabstand unten von 15px.

---

Hier nochmal der Link zu unserer aktuellen Webseite:
https://www.w3schools.com/code/tryit.asp?filename=FP6EHDWYXHN7

Unsere erste richtige Navigation!

Bevor wir die Navigation erstellen, sollten wir die Struktur der Seite bereits im Kopf oder auf Papier stehen haben. Dies gibt auch für die Verzeichnisstruktur.

Ich habe mir da folgendes Überlegt:

1. Startseite
2. Themen
   • Thema 1
   • Thema 2
3. Portfolio
4. Rechtliches
• Impressum
• Kontakt
5. Sonstiges

Jetzt geht es los dem Erstellen:

1. Der Beginn.
   ^{Wir fügen unsere Navigation unter dem Slogan im header-TAG ein.}

   

   ^{Fangen wir ganz einfach mit dem nav-TAG an. Diesen kennen wir schon aus dem HTML5-Elemente-Beitrag}
2. Der nav-TAG bekommt viele Klassen.
   ^{Die Tabelle unter dem Bild gibt Auskunft, was die jeweiligen Klassen bewirken.}

   

   navbar	Diese Klasse gibt den Befehl, dass es sich grundsätzlich um eine Navigation handelt.
   navbar-expand-lg	Eine "größere Navigation".
   navbar-dark	Navigation, die dunkel ist.
   bg-dark	Wenn die Navigation dunkel sein soll, machen wir mit dieser Klasse den Hintergrund schwarz.

3. Mobile Navigation.
   ^{Damit die Navigation der Seite auch auf Tablet und Smartphones optimal angezeigt wird benötigen wir diesen Code innerhalb der nav. Was das Ganze bedeutet werden wir in späteren Beiträgen durchgehen.}

   

4. Navigationspunkte vorbereiten.
   ^{Damit wir unsere obige Liste als Navigation verwenden können, erstellen wir uns noch ein div-Element innerhalb des nav-TAGs. In diesem div-Element kommt jetzt endlich auch die Auflistung (ul-TAG). Beide TAGs bekommen noch einige Klassen.}

   

5. Erster Navigationspunkt.
   ^{Unser erster Navigationspunkt ist die Startseite, die index.html-Datei. Da wir gerade die Startseite erstellen, bekommt auch diese Seite die Klasse "nav-item active". Das active soll einfach für AKTIV stehen, also das wir grade auf dieser Seite sind.}

   

6. Dropdown.
   ^{Mithilfe eines DropDown-Menüpunktes können wir die Seite viel besser strukturieren. Dafür erstellen wir einfach eine "zweite Liste" in diesem Listenpunkt. Zusätzlich geben wir den beiden Elementen noch ein paar Klassen und zusätzliche Attribute.}

   

7. Einfache Menüpunkte.
   ^{Ein einfacher Menüpunkt ohne "schnick-schnack" wird so erstellt.}

   

8. Deaktivierter Menüpunkt.
   ^{Um einen Menüpunkt nicht "klickbar" zu machen und graulich abstufen wollen, müssen wir nur die Klasse disabled hinzufügen.}

   

9. Fertigstellen.
   ^{Nun wir haben es schon fast geschafft. Wir müssen nur mehr die restlichen Menüpunkte hinzufügen. Alle geöffneten TAGs müssen auch geschlossen werden. Dann ist die Navigation fertig!}

---

Fertige Navigation!

Juhuu! So sieht unsere fertige Navigation aus.

Die Navigation ist wie versprochen auch vor mobile Geräte (Smartphones und Tablets) optimiert.

Wenn wir in der mobilen Version bzw. bei kleinerer Bildschirmauflösung auf das Icon klicken, klappen die Navigationspunkte auf.

Dies ist das Ende des Beitrags. Ich hoffe ich konnte dir weiterhelfen und du weißt ab heute, wie wir wirklich eine Seite mit Bootstrap von Beginn an erstellen. Nächstes Mal werden wir uns noch ein wenig tiefer in Bootstrap einarbeiten und noch "coolere" Komponenten ausprobieren. Webdesignen ist für uns bald kein Problem mehr!

Hier nochmal der Link zum Quellcode unseres Designs:
https://www.w3schools.com/code/tryit.asp?filename=FP6J2J9MJN1Y

Mehr Wissen!

Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas Interessantes für dich dabei:

• Raster in Bootstrap - Internet-Basics #15
• Bootstrap: Einleitung - Internet-Basics #14
• Struktur in unsere Webseite - Internet-Bascis #13
• Planung und Zielgruppe. - Internet-Basics #12
• Farben: Was muss man dabei beachten? - Internet-Basics #11
• HTML&CSS: Bilder - Internet-Basics #10

^{Meine Schlussworte: Ich freue mich schon auf dein Feedback in einem Kommentar.
Wenn dir etwas unklar war, kannst du natürlich auch gerne Nachfragen.}

DANKE!