Einstieg ins Layout mit Bootstrap

[Matthias Scharwies]

Servus!

... ich bin gerade erst dabei, mich in die Materie einzuarbeiten. Ich möchte auf der Website (siehe URL) meiner Schwester responsives Webdesign umsetzen und habe mir dazu Bootstrap heruntergeladen.

Responsives Webdesign ist gut und erstrebenswert.

Bootstrap ist ein "Framework", das dazu fertige Layouts und Strukturen bietet. Dazu muss man aber das HTML-Markup mit vielen präsentationsbezogenen Klassen „vollmüllen“. Hier im Forum wirst Du wsl. den Tipp kriegen, dir …

1. das Markup sauber zu erstellen (hast du schon; die ü können aber ruhig ü bleiben)

2. ein mobiles Layout (alles untereinander) mit den passenden Farben zu erstellen

3. dann zu schauen, ob Elemente bei breiteren Viewports nebeneinander positioniert werden können, was mittels media queries relativ einfach geht.

Ich bin auch gerade erst dabei, mich in HTML5 einzuarbeiten. Ich habe nun einmal als ersten Schritt eine Eingangsseite in HTML5 geschrieben und nach den Vorgaben auf der Bootstrap-Seite CSS und JavaScript eingebunden.

Die Grundstruktur ist gut, das ist imho aber Overkill und nicht best practice:

<div id="button_startseite"><a href="index.html" onmouseover="change1.src='images/button_startseite_01b.svg'" onmouseout="change1.src='images/button_startseite_01a.svg'"><img src="images/button_startseite_01a.svg" id="change1" width="160" height="43" title="Startseite" alt="Startseite" /></a></div>

<nav>
  <ul>
    <li><a href="index.html">Startseite</a></li>

Anstelle von JavaScript kann man dies auch mit CSS (und dann auch für Tastaturbedienung) erreichen.

nav a {
  color: white;
  background: blue;
}

nav a:hover,
nav a:focus {
  background: darkblue;
}

Hier einige Links:

• CSS/fertige_Layouts (Vergleich mal das HTML-Markup mit dem Deiner Seite.)
• HTML/Tutorials/HTML-Einstieg
• HTML/Tutorials/Links_richtig_gestalten

Herzliche Grüße

Matthias Scharwies