Explorercreate account

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

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
deutsch·@domii.net·
0.000 HBD
Navigation erstellen mit Bootstrap // Der Weg zur eigenen Webseite! - Guide.
<html>

<p><b>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.)</b></p>

<p><a href="https://steemitimages.com/DQmPyvuSJXXaAphuV3z6q3Ei4eQnk7SxZCVQByw6FH2Enyz/titelbild.jpg"><img src="https://steemitimages.com/DQmPyvuSJXXaAphuV3z6q3Ei4eQnk7SxZCVQByw6FH2Enyz/titelbild.jpg"/></a></p>

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

<p><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg"/></p>


<h2>Bootstrap mit HTML5.</h2>

<p>Wir haben doch ganz zu Beginn unserer <i>Internet-Basics</i> über <a href="https://steemit.com/deutsch/@domii.net/html5-elemente-header-nav-footer-uvm-der-weg-zur-eigenen-webseite-guide-3">HTML5-Elemente</a> 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.</p>

<p><a href="https://www.w3schools.com/code/tryit.asp?filename=FP6EHDWYXHN7">https://www.w3schools.com/code/tryit.asp?filename=FP6EHDWYXHN7</a></p>

<p><a href="https://steemitimages.com/DQmWVudL233Z4uz9D3ZNBwUMgcZUkQpihmej14ewtmpnjy1/bild1.jpg"><img src="https://steemitimages.com/DQmWVudL233Z4uz9D3ZNBwUMgcZUkQpihmej14ewtmpnjy1/bild1.jpg"/></a></p>

<p>Aber fangen wir mal Schritt für Schritt an.</p>

<ol>

<li>header-TAG.<br>
<sup>Zuerst haben wir die Überschrift und den Slogan mit dem header-TAG umhüllt.</sup>
<p><a href="https://steemitimages.com/DQmWGbCg1cQG2yt2Qgt71vFVFCmF9aAaiJJ4joG92xksVP5/bild2.jpg"><img src="https://steemitimages.com/DQmWGbCg1cQG2yt2Qgt71vFVFCmF9aAaiJJ4joG92xksVP5/bild2.jpg"></a></p>
</li>

<li>section-TAG<br>
<sup>Hier kann auch der DIV-TAG ersetzt werden. Es ist einfach sehr viel übersichtlicher, wenn wir die HTML5-TAGS nutzen.</sup>
<p><a href="https://steemitimages.com/DQmYcDg6L4rRsqnZUZoSDnAzTePahHyEYtsYVSFFb8yB5vF/bild3.jpg"><img src="https://steemitimages.com/DQmYcDg6L4rRsqnZUZoSDnAzTePahHyEYtsYVSFFb8yB5vF/bild3.jpg"></a></p>
</li>

<li>article-TAG<br>
<sup>Als nächsten Schritt tauschen wir bei den "col" = Spalten die DIV-TAGs gegen den article-TAG aus.</sup>
<p><a href="https://steemitimages.com/DQmT6gzaUGEJuMyY3iVR6PPHdkfVmtrgX1fFj7knxvLywM2/bild4.jpg"><img src="https://steemitimages.com/DQmT6gzaUGEJuMyY3iVR6PPHdkfVmtrgX1fFj7knxvLywM2/bild4.jpg"></a></p>
</li>

<li>aside-TAG<br>
<sup>Die Seitenleiste bekommt aber den <i>aside-TAG</i>. 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 <b>Skala von 1 bis 12</b> sein soll. </sup>
<p><a href="https://steemitimages.com/DQmP3WnYn7LNv2iAUrZJZoMnxHxmQGpZYzunwSrWYHCrYsg/bild5.jpg"><img src="https://steemitimages.com/DQmP3WnYn7LNv2iAUrZJZoMnxHxmQGpZYzunwSrWYHCrYsg/bild5.jpg"></a></p>
</li>

<li>Nicht vergessen! Ende-TAGs auch umbenennen.<br>
<sup>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.</sup>
<p><a href="https://steemitimages.com/DQmUYXKwHYZpMxK76hEFgyb9AhRmiuhB8XB174MagD8fwkG/bild6.jpg"><img src="https://steemitimages.com/DQmUYXKwHYZpMxK76hEFgyb9AhRmiuhB8XB174MagD8fwkG/bild6.jpg"/></a></p>
</li>

<li>footer-TAG<br>
<sup>Den letzten Bereich der Seite nennen wir Footer (=Fußzeile).</sup>
<p><a href="https://steemitimages.com/DQmb1GutrhtBnJGyLrejTohTDBQbF1QnLDT8XjG3eeujRYH/bild8.jpg"><img src="https://steemitimages.com/DQmb1GutrhtBnJGyLrejTohTDBQbF1QnLDT8XjG3eeujRYH/bild8.jpg"/></a></p>
</li>

</ol>

<p><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg"/></p>

<h2>Zusätzliches.</h2>

<p>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.</p>

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

<ol>

<li>Einen zusätzlichen drei-spaltigen Bereich.<br>
<sup>Wir sind jetzt aber an kein fixes Layout verbunden. Es ist sehr einfach ein <b>dreispaltiges Layout</b> zu erstellen. Mit Bootstrap ist das sehr einfach. Wenn wir diese Seite z.B. mit dem Smartphone ansehen, werden die jeweiligen Spalten untereinander angezeigt.</sup>
<p><a href="https://steemitimages.com/DQmNn7AawarLPSEY3KiAuSVpj8XG2jFvEo7dq7oxSYo7X8u/bild7.jpg"><img src="https://steemitimages.com/DQmNn7AawarLPSEY3KiAuSVpj8XG2jFvEo7dq7oxSYo7X8u/bild7.jpg"/></a></p>
</li>

<li>Ein wenig CSS.<br>
<sup>Damit unsere Seite ein wenig besser aussieht, habe ich sie mit CSS ein wenig erweitert. Ich hoffe, dass es dir auch gefällt.</sup>
<p><a href="https://steemitimages.com/DQmXmfWyRztX18eP9rycQvtPhKTc7GsBrVkbhVFtJ6uQWzu/bild9.jpg"><img src="https://steemitimages.com/DQmXmfWyRztX18eP9rycQvtPhKTc7GsBrVkbhVFtJ6uQWzu/bild9.jpg"/></a></p>
</li>

</ol>


<p><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg"/></p>

<h2>CSS.</h2>

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


<h4>body</h4>

<p><a href="https://steemitimages.com/DQmPjLhWAz4xw2cyZgUqwFP9aouX9ZACyDG9fmteq61WcPw/image.png"><img src="https://steemitimages.com/DQmPjLhWAz4xw2cyZgUqwFP9aouX9ZACyDG9fmteq61WcPw/image.png"/></a></p>

<ul>
<li>padding-top: 5rem // Abstand von oben.<br>
<sup>Ein aufmerksamer Leser machte mich aufmerksam: natürlich gibt es auch noch die Einheit rem. Wir können diese neben px und % auch verwenden.</sup>
</li>

<li>background, background-color, background-size // Hintergrund<br>
<sup>Ich habe einen CSS3-Hintergrund gewählt. Das sind Hintergrund-Muster/Bilder die ohne Grafik funktioniert, also nur mit wenigen Zeilen CSS.</sup>
<sup>Eine Hilfreiche Seiten für weitere Hintergrundmuster: <a href="http://lea.verou.me/css3patterns">klick</a>.</sup>
<p><a href="https://steemitimages.com/DQma1VV8WbLdcvVSTZNUG3CQVw5b3RJff1B9hZc55qrpf9u/image.png"><img src="https://steemitimages.com/DQma1VV8WbLdcvVSTZNUG3CQVw5b3RJff1B9hZc55qrpf9u/image.png"/></a></p>
<sup>Screenshot von der oben verlinkten Seite. Dies sind Beispiel-Hintergründe, die wir kostenlos übernehmen können. <b>Der riesige Vorteil: Die Seiten werden extrem schnell geladen, da es nur wenige Zeilen Code sind. Sie sehen aber trotzdem super aus!</b></sup>
</li>

</ul>

<p><hr></p>

<h4>.container</h4>

<p><a href="https://steemitimages.com/DQmZyoBhNdbTncne38J3wCHEUTJmPwS5EAYyQtwHHs3bTDN/image.png"><img src="https://steemitimages.com/DQmZyoBhNdbTncne38J3wCHEUTJmPwS5EAYyQtwHHs3bTDN/image.png"/></a></p>

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

<p><hr></p>

<h4>header, footer</h4>

<p>Wenn wir <b>"header, footer"</b> mit Beistrich trennen, können wir beide HTML-TAGs zugleich bearbeiten.</p>

<p><a href="https://steemitimages.com/DQmQGQRT7AgBunAY8pZ9FMjMKfZyayakibqRudze2dtsavt/image.png"><img src="https://steemitimages.com/DQmQGQRT7AgBunAY8pZ9FMjMKfZyayakibqRudze2dtsavt/image.png"/></a></p>

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

<hr>

<p>Hier nochmal der Link zu unserer aktuellen Webseite:<br>
<a href="https://www.w3schools.com/code/tryit.asp?filename=FP6EHDWYXHN7">https://www.w3schools.com/code/tryit.asp?filename=FP6EHDWYXHN7</a></p>

<p><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg"/></p>

<h2>Unsere erste richtige Navigation!</h2>

<p>Bevor wir die Navigation erstellen, sollten wir die <a href="https://steemit.com/deutsch/@domii.net/planung-and-zielgruppe-der-weg-zur-eigenen-webseite-guide">Struktur der Seite</a> bereits im Kopf oder auf Papier stehen haben. Dies gibt auch für die <a href="https://steemit.com/deutsch/@domii.net/struktur-in-unserer-webseite-der-weg-zur-eigenen-webseite-guide">Verzeichnisstruktur</a>.</p>

<p>Ich habe mir da folgendes Überlegt:</p>

<ol>
<li>Startseite</li>
<li>Themen
<ul>
<li>Thema 1</li>
<li>Thema 2</li>
</ul>
</li>
<li>Portfolio</li>
<li>Rechtliches</li>
<ul>
<li>Impressum</li>
<li>Kontakt</li>
</ul>
<li>Sonstiges</li>
</ol>

<p>Jetzt geht es los dem Erstellen:</p>

<ol>

<li>Der Beginn.<br>
<sup>Wir fügen unsere Navigation unter dem <i>Slogan</i> <b>im header-TAG</b> ein. </sup>
<p><a href="https://steemitimages.com/DQmZitNzYD9gQ31o7eupuRTCrXXqhy88v8pQzCLZQyTq1N6/image.png"><img src="https://steemitimages.com/DQmZitNzYD9gQ31o7eupuRTCrXXqhy88v8pQzCLZQyTq1N6/image.png"/></a></p>
<sup>Fangen wir ganz einfach mit dem nav-TAG an. Diesen kennen wir schon aus dem <a href="https://steemit.com/deutsch/@domii.net/html5-elemente-header-nav-footer-uvm-der-weg-zur-eigenen-webseite-guide-3">HTML5-Elemente-Beitrag</a></sup>
</li>

<li>Der nav-TAG bekommt viele Klassen.<br>
<sup>Die Tabelle unter dem Bild gibt Auskunft, was die jeweiligen Klassen bewirken.</sup>
<p><a href="https://steemitimages.com/DQmcvEJEkLa6WYpEd3uD4D4H2pB1AVhk5nJtL7Sn67Hjr2x/image.png"><img src="https://steemitimages.com/DQmcvEJEkLa6WYpEd3uD4D4H2pB1AVhk5nJtL7Sn67Hjr2x/image.png"/></a></p>
<sup><table>
  <tr>
    <td>navbar </td>
    <td>Diese Klasse gibt den Befehl, dass es sich grundsätzlich um eine Navigation handelt.</td>
  </tr>
  <tr>
    <td>navbar-expand-lg </td>
    <td>Eine "größere Navigation".</td>
  </tr>
  <tr>
    <td>navbar-dark</td>
    <td>Navigation, die dunkel ist.</td>
  </tr>
  <tr>
    <td>bg-dark</td>
    <td>Wenn die Navigation dunkel sein soll, machen wir mit dieser Klasse den Hintergrund schwarz.</td>
  </tr>
</table>
</sup>
</li>


<li>Mobile Navigation.<br>
<sup>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.</sup>

<p><a href="https://steemitimages.com/DQmVarCGhxHdUc67jqPfH7UcTfQhXiHhsRmr4ywBghettBR/image.png"><img src="https://steemitimages.com/DQmVarCGhxHdUc67jqPfH7UcTfQhXiHhsRmr4ywBghettBR/image.png"/></a></p>
</li>

<li>Navigationspunkte vorbereiten.</br>
<sup>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.</sup>
<p><a href="https://steemitimages.com/DQmV6ManrSSy5yq6BUsPdsDWGZVguVFF2RCrmUJuwZUwN5b/image.png"><img src="https://steemitimages.com/DQmV6ManrSSy5yq6BUsPdsDWGZVguVFF2RCrmUJuwZUwN5b/image.png"/></a></p>
</li>

<li>Erster Navigationspunkt.<br>
<sup>Unser erster Navigationspunkt ist die Startseite, die <b>index.html-Datei</b>. 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.</sup> 
<p><a href="https://steemitimages.com/DQmVN7XiiheWptm4VjjHx9DHGbkosos6QroQSM9Tcstswxg/image.png"><img src="https://steemitimages.com/DQmVN7XiiheWptm4VjjHx9DHGbkosos6QroQSM9Tcstswxg/image.png"/></a></p>
</li>

<li>Dropdown.<br>
<sup>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.</sup>
<p><a href="https://steemitimages.com/DQmPsfUHrvmDYC5nvZVbRirxRPdM95NYut59ep8yDcPa1cA/image.png"><img src="https://steemitimages.com/DQmPsfUHrvmDYC5nvZVbRirxRPdM95NYut59ep8yDcPa1cA/image.png"/></a></p>
</li>

<li>Einfache Menüpunkte.<br>
<sup>Ein einfacher Menüpunkt ohne <i>"schnick-schnack"</i> wird so erstellt.</sup>
<p><a href="https://steemitimages.com/DQmQWFDxgTSjQ9dRH996CDALWsRms5VxRhQZS9TqxaGpK5j/image.png"><img src="https://steemitimages.com/DQmQWFDxgTSjQ9dRH996CDALWsRms5VxRhQZS9TqxaGpK5j/image.png"/></a></p>
</li>

<li>Deaktivierter Menüpunkt.<br>
<sup>Um einen Menüpunkt nicht "klickbar" zu machen und graulich abstufen wollen, müssen wir nur die Klasse <i>disabled</i> hinzufügen.</sup>
<p><a href="https://steemitimages.com/DQmXG7d833xsw48PFkFfDDGvMKELU5zHk3EVAt7e9BvxhHy/image.png"><img src="https://steemitimages.com/DQmXG7d833xsw48PFkFfDDGvMKELU5zHk3EVAt7e9BvxhHy/image.png"/></a></p>
</li>

<li>Fertigstellen.<br>
<sup>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!</sup>
</li>

</ol>

<hr>

<h4>Fertige Navigation!</h4>

<p>Juhuu! So sieht unsere fertige Navigation aus.</p>

<p><a href="https://steemitimages.com/DQmPcYriZ19CrAEif3ho4hgaqXNJouEMV8NpPFVGNMJ7BnK/image.png"><img src="https://steemitimages.com/DQmPcYriZ19CrAEif3ho4hgaqXNJouEMV8NpPFVGNMJ7BnK/image.png"/></a></p>

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

<p><a href="https://steemitimages.com/DQmRUEPUrLY1SsnN5A5X4d6Vq8X5kgQfwWnJAN1YCjPNGUe/image.png"><img src="https://steemitimages.com/DQmRUEPUrLY1SsnN5A5X4d6Vq8X5kgQfwWnJAN1YCjPNGUe/image.png"/></a></p>

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

<p><a href="https://steemitimages.com/DQmYze2ydahaumzyLx46sg48V4wV1v2fQqSjRwpcGHe9dtR/image.png"><img src="https://steemitimages.com/DQmYze2ydahaumzyLx46sg48V4wV1v2fQqSjRwpcGHe9dtR/image.png"/></a></p>

<p><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg"/></p>

<h4>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!</h4>

<p><br>Hier nochmal der Link zum Quellcode unseres Designs: <br><a href="https://www.w3schools.com/code/tryit.asp?filename=FP6J2J9MJN1Y
">https://www.w3schools.com/code/tryit.asp?filename=FP6J2J9MJN1Y</a></p>

<p><img src="https://steemitimages.com/0x0/https://steemitimages.com/DQmVKYPhMkzYRx5mCmWVe7tbYtvbQZyXrojoXYGrooqyDAS/trenner.jpg"/></p>


<h2>Mehr Wissen!</h2>
<p>Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas Interessantes für dich dabei:</p>

<ul>
<li><a href="https://steemit.com/deutsch/@domii.net/raster-in-bootstrap-der-weg-zur-eigenen-webseite-guide">Raster in Bootstrap</a> - Internet-Basics #15</li>
<li><a href="https://steemit.com/deutsch/@domii.net/bootstrap-der-weg-zur-eigenen-webseite-guide">Bootstrap: Einleitung</a> - Internet-Basics #14</li>
  <li><a href="https://steemit.com/deutsch/@domii.net/struktur-in-unserer-webseite-der-weg-zur-eigenen-webseite-guide">Struktur in unsere Webseite</a> - Internet-Bascis #13</li>
  <li><a href="https://steemit.com/deutsch/@domii.net/planung-and-zielgruppe-der-weg-zur-eigenen-webseite-guide">Planung und Zielgruppe.</a> - Internet-Basics #12</li>
  <li><a href="https://steemit.com/deutsch/@domii.net/farben-was-muss-man-dabei-beachten-der-weg-zur-eigenen-webseite-guide">Farben: Was muss man dabei beachten?</a> - Internet-Basics #11</li>
  <li><a href="https://steemit.com/deutsch/@domii.net/html-and-css-bilder-der-weg-zur-eigenen-webseite-guide">HTML&amp;CSS: Bilder</a> - Internet-Basics #10</li>
</ul>

<p><br></p>
<p><img src="https://steemitimages.com/DQmeCckejeGavvf2XqS6AHAfhmRmPVuaEivscesyxHQiEgo/signatur.jpg" width="1600" height="795"/></p>
<sup><i>Meine Schlussworte:</i> Ich freue mich schon auf dein <b> Feedback in einem Kommentar</b>.<br>Wenn dir etwas unklar war, kannst du natürlich auch gerne Nachfragen.</sup>
<p><strong>DANKE!</strong></p>



</html>
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
properties (23)vote details (294)