%%''-Element werden Elemente zu einem Block gruppiert. Für Bootstrap werden wir ''%%div%%''-Elemente recht oft verwenden, um Styles auf einen ganzen Abschnitt der Seite anzuwenden.
Eine zentrale CSS-Klasse in Bootstrap ist ''%%container%%''. Der ''%%container%%'' passt den Inhalt automatisch an die Seitenbreite an und sorgt für einen sinnvollen Abstand zum Rand. Sie sollten auf Ihrer Bootstrap-Seite immer ein ''%%div%%''-Element mit der ''%%container%%''-Klasse haben. Lesen Sie die [[https://getbootstrap.com/docs/4.1/layout/overview/#containers|Beschreibung von Container]] auf der Bootstrap-Webseite.
Wir packen nun den Hauptinhalt unserer Startseite zwischen ein ''%%
%%'' und ''%%
%%''. (Um die Navigation werden wir uns weiter unten noch speziell kümmern.)
Der ''%%body%%''-Teil Ihrer Hauptseite sollte nun wie folgt aussehen (achten Sie auf sauberes Einrücken der Elemente, damit der Code übersichtlich bleibt):
== index.html ==
<body>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/projekte/">Projekte</a></li>
<li><a href="/kontakt/">Kontakt</a></li>
</ul>
<div class="container">
<h1 class="title">Web Portfolio von Marco</h1>
<h2>Willkommen!</h2>
<p>Schön, dass Sie auf meiner Seite vorbeischauen.</p>
<p>Sie können sich ruhig etwas umsehen. Im Blog dokumentiere ich meine Erfahrungen beim Programmieren. Daneben können Sie auch meine Webprojekte anschauen. Viel Spass.</p>
<img src="marco.jpg" alt="Foto von mir">
<p>Marco :-)</p>
</div>
</body>
Im Browser beginnen die ''%%div%%''-Elemente **immer auf einer neuen Zeile**. Weil sie die ganze verfügbare Breite in Anspruch nehmen nennt man solche Elemente auch [[https://developer.mozilla.org/de/docs/Web/HTML/Block-level_elemente|Block-Elemente]].
===== span-Elemente =====
Im Gegensatz zu ''%%
%%''-Elementen beginnt ein ''%%
%%''-Element nicht auf einer neuen Zeile. Ein ''%%span%%''-Element ist nur so breit wie sein Inhalt. Man nennt solche Elemente auch [[https://developer.mozilla.org/de/docs/Web/HTML/Inline_elemente|Inline-Elemente]], weil sie sich innerhalb einer Zeile einbetten.
Hier ein Beispiel, wie man ein ''%%span%%''-Element einsetzen könnte:
Ich möchte <span class="text-warning">diese Worte</span> besonders hervorheben.
===== Navigation mit Bootstrap =====
Nun wollen wir endlich die Navigation schöner gestalten mit der Hilfe von Bootstrap. In der Bootstrap-Dokumentation wird eine [[https://getbootstrap.com/docs/4.1/components/navbar/|Navbar]] beschrieben. Das Beispiel dort ist jedoch sehr komplex und beinhaltet Menus, Textfelder und Knöpfe. Wir wählen eine etwas einfachere Variante.
Kopieren Sie den folgenden Code für die Navigation:
== index.html ==
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li><a class="nav-link active" href="/">Home</a></li>
<li><a class="nav-link" href="/blog/">Blog</a></li>
<li><a class="nav-link" href="/projects/">Projekte</a></li>
<li><a class="nav-link" href="/contact/">Kontakt</a></li>
</ul>
</div>
</div>
</nav>
=== Erklärung ===
- Das äusserste ''%%nav%%''-Element mit ''%%navbar%%'' als Klasse bewirkt, dass ein Balken oben am Rand dargestellt wird. Ein ''%%nav%%'' is eigentlich das genau Gleiche wie ein ''%%div%%'', ausser dass man an Suchmaschinen einen kleinen Hinweis gibt, dass da eine Navigation kommt.
- Das nächste ''%%div%%'' mit der Klasse ''%%container%%'' bewirkt, dass die Abstände vom Rand gleich sind wie bei unserem Hauptinhalt. Beachten Sie jeweils das schliessende Tag ''%%%%'', welches dazugehört.
- Das ''%%button%%''-Element mit Klasse ''%%navbar-toggler%%'' ist der Knopf in der mobilen Ansicht, um das Menu auszuklappen. Verkleinern Sie mal das Browser-Fenster in der Breite. Dann sollte der Knopf erscheinen.
- Im Gegensatz zur vorherigen Variante, haben wir bei jedem Link eine Klasse ''%%nav-link%%'' hinzugefügt. Diese bewirkt, dass der Link in der Navigation den entsprechenden Stil erhält.
- Beachte: Das **aktive** Navigationselement ist jeweils mit der zusätzlichen Klasse ''%%active%%'' markiert. Dieses erscheint dann hervorgehoben.
So ungefähr sollte es jetzt aussehen:
{{navbar-light.png?nolink|Navbar}}
==== Dunkle Variante ====
Es gibt weitere Varianten der Bootstrap-Navigation:
{{navbar-dark.png?nolink|Navbar Dark}}
Um diese zu aktivieren, ändern Sie die Klasse ''%%navbar-light%%'' in ''%%navbar-dark%%'' und ''%%bg-light%%'' in ''%%bg-dark%%'' um.
===== Optimieren für Mobile =====
Mit Bootstrap und der Navigation sieht die Webseite in einem Desktop-Browser schon recht ansprechend aus. Versuchen Sie mal, die Webseite auf einem Mobiltelefon aufzurufen (dazu müssen Sie die Seite [[de/library/html-css/part2/|veröffentlichen]]).
Sie werden feststellen, dass die Seite entweder abgeschnitten oder die Navigation viel zu klein dargestellt wird:
{{mobile-without-viewport.de.png?nolink|Mobile ohne Viewport}}
Mit einer ''%%meta%%''-Information im ''%%head%%''-Bereich können wir den mobilen Browsern mitteilen, dass sie die Seite vernünftig anzeigen sollen:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<title>Web Portfolio von Marco</title>
</head>
Nun sollte es etwa so aussehen:
{{mobile-with-viewport.de.png?nolink|Mobile mit Viewport}}
Bootstrap wurde so entworfen, dass es auf mobilen Bilschirmen gut funktioniert. Im Screenshot oben sehen Sie, wie die Navigation automatisch untereinander angezeigt wird, sobald die Bildschirmbreite zu klein wird. Dies können Sie auch ausprobieren, indem Sie einfach das Browserfenster verkleinern.
Ein Webdesign, welches auf die Bildschirmgrösse reagiert, nennt man [[http://de.wikipedia.org/wiki/Responsive_Webdesign|Responsive Webdesign]].
Hinweis: Bootstrap klappt die Navigation auch automatisch zusammen in der mobilen Ansicht. Dafür sind die JavaScript-Dateien zuständig, welche wir jeweils vor das schliessende </body>-Tag kopiert haben.
===== Bootstrap und Navigation auf allen Seiten =====
Bis jetzt haben wir Bootstrap und die Navigation nur auf unserer Startseite eingefügt. Das Ziel ist natürlich, dass diese auf allen Seiten eingebunden sind.
Mit kleinen Anpassung können wir den Code aus der Startseite in alle anderen Seiten (Blog, Blogeinträge, Kontakt, etc.) kopieren:
=== 1. Viewport und Bootstrap-CSS einfügen ===
Kopieren Sie aus dem ''%%head%%''-Bereich der Startseite die Zeile mit dem ''%%viewport%%'' und die Zeile mit dem Bootstrap CSS und fügen Sie diese in alle anderen Seiten ein:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
=== 2. JavaScript einfügen ===
Kopieren Sie aus vom Schluss vom ''%%body%%''-Bereich der Startseite die Links auf die JavaScript-Dateien und fügen Sie diese in alle anderen Seiten ein:
<body>
<!-- Hier steht irgend ein Inhalt -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>
=== 3. Navigation einfügen ===
Kopieren Sie den gesamten Navigationsbereich aus der Startseite und fügen Sie diese in alle anderen Seiten ein. Achten Sie darauf, dass Sie jeweils beim aktuellen Link die ''%%active%%''-Klasse hinzufügen:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav">
<li><a class="nav-link" href="/">Home</a></li>
<li><a class="nav-link active" href="/blog/">Blog</a></li>
<li><a class="nav-link" href="/projects/">Projekte</a></li>
<li><a class="nav-link" href="/contact/">Kontakt</a></li>
</ul>
</div>
</div>
</nav>
=== 4. Container-div einfügen ===
Wenn Sie die Unterseiten im Browser öffnen, werden Sie merken, dass die Seitenränder noch nicht korrekt sind. Um das zu korrigieren, müssen wir den gesamten Inhalt (alles unterhalb der Navigation) mit einem ''%%div%%'' umgeben. Dieses ''%%div%%'' muss die Klasse ''%%container%%'' haben. Korrigieren Sie das in allen Unterseiten:
[... Navigation ...]
<div class="container">
[... Seiteninhalt ...]
</div>
=== 5. Testen ===
Nun ist es wichtig, dass Sie alle Seiten aufrufen und die **Links sorgfältig testen**!
Schauen Sie als nächstes Ihren Code an und stellen Sie sicher, dass das **HTML schön aufgeräumt** ist. Immer, wenn ein HTML-Tag geöffnet wird, dann sollte die nächste Zeile eingerückt werden. Das schliessende Tag wird dann wieder nach links gerückt.
===== Wie weiter? =====
→ Erfahren Sie die nächsten Schritte.
----
Diese Seite ist abgeleitet von [[https://code.makery.ch/|code.makery]] von [[https://code.makery.ch/about/|Marco Jakob]], verwendet unter [[https://creativecommons.org/licenses/by/4.0/|CC BY]].\\
Sie ist lizenziert unter [[https://creativecommons.org/licenses/by-nc-sa/4.0/|CC BY-NC-SA]] von Daniel Fahrni
.