Tutorials 8Web 4 /

Am Anfang war das CSS3

Wenn CSS3 und HTML5 zusammenkommen, kann ein Bootstrap entstehen

Bootstrap ist eines der bekannten und erfolgreiches CSS Frameworks, dass zuerst für mobile Geräte entwickelt wurde (mobile first). Durch sein responsives Design eignet es sich eigentlich für alle Geräte. Werfen wir einen Blick rein.

Ganz am Anfang

Wenn wir Bootstrap verstehen wollen, müssen wir zunächst den Kopf um ca. 90° drehen und einen Blick auf CSS werfen. CSS steht für "cascading style sheet" und beinhaltet Definitionen darüber, wie eine HTML-Dokumente vom Layout und Format aussehen soll. Die Dokumente enthalten dagegen nur die Struktur und den Aufbau der Seite.

Vor CSS enthielten HTML-Dokumente Layout- und Formatierungs-Informationen, wodurch die Pflege dieser Seiten stets eine Herausforderung war. Heutzutage wird eher strikt zwischen Aufbau und Fassade getrennt.

Eine weitere Stärke dieses Ansatzes ist es, für unterschiedliche Zielgeräte, also z.B. Drucker, Smartwatch und Bildschirm, die passenden Layout zur Verfügung zu stellen, ohne die HTML-Dokument dafür bearbeiten zu müssen. Das war ein Alptraum für uns Webdesigner.

Sprich HTML oder schweig

Wir hatten die HTML-Dokumente schon erwähnt. Dokument sollte nach heutigen Good-Practices nur die Dokumentenstruktur und semantische Information beinhalten. Also oben ist die Kopfzeile, unten ist die Fusszeile und dazwischen ein Haufen Artikel, nur so als Beispiel. HTML-Dokumente beinhalten oft auch Verweise auf andere Dokumente oder Bereich im eigenen Dokument.

Web Heroes

Wenn wir also im Internet gemütlich surfen und so von Seite zu Seite wechseln, sehen wir eigentlich mindestens zwei Dateien auf einmal, nämlich HTML und CSS (In Wirklichkeit besteht die angezeigte Seite aus viel mehr Inhalten, wie Bilder oder Videos, aber dass habt Ihr Euch sicher schon gedacht). Dieses Dreamteam wird im Cache des Browsers zwischengespeichert und je oft ihr die Datei benötigt, desto schneller erfolgt die Anzeige. Und - Ihr habt es geahnt - die CSS Dateien werden in der Regel besonders oft auf einer Website angefragt. Daher ist es auch Good Practice möglichst viel in die CSS zu verlagern, damit der Seitenaufbau rasend schnell sein kann

JavaScript

Bootstrap ist ein CSS-Framework, d.h. es liefert für die Gestaltung einer modernen, für mobile Geräte geeigneten Website genau das richtige, schicke Aussehen. Aber seinen wir ehrlich zu unseren Lesern, Bootstrap geht noch einen Schritt weiter und liefert JavaScript Funktionen mit, damit die Interaktion auf Eurer Webseite nicht langweilig wird. Zu einer Webseite gehören noch eine dritte Date hinzu, die auf Javascript aufbaut und für die Dynamik der Seiten sorgt. Bootstrap ist also ein CSS-Framework mit einem Schuß Javascript im Cocktail, damit es bei der Darstellung der Webseiten klein wenig zum prickeln kommt.

Fazit

Bootstrap ist toll, aber wir wissen noch nicht warum. Keine Sorge, erzählen wir Euch im nächsten Teil.