Lange ist es her, dass ich hier einige Grundlagen der responsiven Webentwicklung vorgestellt habe. Der bisherige Schwerpunkt der Reihe „RESPONSIVE“ thematisierte beispielsweise die Verwendung von Media Queries zum Definieren von Umbrüchen in verschiedenen Display-Größen oder Tipps zum Erstellen einer ganz einfachen responsiven Navigation oder auch, wie man für responsive Websites für die Displaygröße und Displayauflösung optimierte Images einbindet.
Sicher gäbe es in Bezug auf Grundlagen noch vieles zu sagen.
Doch dieses Mal möchten wir uns mit dem Thema „Responsive Frameworks“ beschäftigen. Das gängigste und wahrscheinlich meist genutzte ist Bootstrap.
(Hier kann man sich Bootstrap in der aktuellen Version herunterladen)

Was ist ein Framework?
In der Entwicklung, wie auch in der Webentwicklung, werden oft verschiedene Frameworks verwendet. Diese kann mal als „Gerüst“ verstehen mit Sammlungen von vordefinierten Elementen und Funktionen. Diese setzt man in der Programmierung ein, damit man diese nicht alle immer neu programmieren muss. Das gilt insbesondere für Standardprozeduren, die in vielen Anwendungen vorkommen.

Was ist ein Responsive Web Design – Framework?
Ganz ähnlich verhält es sich mit den Responsive – Frameworks. Hier sind in CSS und mit Hilfe von Media Queries und JavaScript-Funktionen viele Formatierungen und Umbrüche für ein responsives Raster, sowie für ein responsives „Verhalten“ bereits vordefiniert.
Ganz typisch ist die Verwendung eines Grid-Systems, also ein Layout, das auf einem Raster aufbaut. Dieses Raster kann man leicht im eigenen Webprojekt implementieren, indem man den entsprechenden HTML-Elementen bestimmte Klassen-Bezeichnungen zuweist, dessen Verhalten durch das Framework vordefiniert ist.

Wie funktioniert Bootstrap 3?
Ich gehe in diesem Tutorial zunächst nur auf die Verwendung des Grid-Systems von Bootstrap 3 ein und zeige, wie die HTML-Elemente mit den vordefinierten CSS-Klassen zu einem 12-spaltigen Grundlayout werden.
Bootstrap 3 teilt die Display-Breite grundsätzlich in 12 Spalten auf. Innerhalb dieses Rasters kann man verschiedene Anordnungen von Elementen vornehmen. Beispielsweise möchte man ganz oben im Layout eine Spalte, die die volle Breite einnimmt. Dadrunter einen Teaser-Bereich mit drei gleich großen Spalten.
Im 12-spaltigen würde man für große Displays die Klasse col-lg-12 verwenden, um dem Element die volle Breite zu geben. Für die drei gleich großen Teaser würde man für große Displays die Klasse col-lg-4 verwenden. Die Logik ist, dass 3 Teaser mal 4 zwölf ergibt, die Teaser also sich zusammen auf die ganze Fläche legen würden.
Genau so könnte man 12 Elemente nebeneinander legen, indem man die Klasse col-lg-1 verwendet.
Aus diesem 12-spaltigen Grid-System lassen sich viele Layouts erstellen. Man muss auch nicht immer die ganze Fläche ausfüllen.
Im folgenden Beispiel habe ich ein einfaches Layout mit Hilfe der Bootstrap – Klassen zusammen gepuzzelt.
In großen Monitoren fügen sich die Elemente entsprechend ihrer vordefinierten Klassen in das 12-spaltige Grundlayout ein.
Beispiel 1

Schiebt man das Browserfenster kleiner, sieht man, dass ab einer bestimmten Größe, sich die Elemente automatisch untereinander aufbauen und die ganze Breite einnehmen.
Das ist also schon ein responsives Layout.
Das einzige, was ich getan habe, war den DIV-Tags die entsprechende Klasse zu zu weisen.
z.B.

<div class=“col-lg-2″>B</div>
<div class=“col-lg-2″>O</div>
<div class=“col-lg-2″>O</div>
<div class=“col-lg-2″>T</div>
<div class=“col-lg-2″>S</div>
<div class=“col-lg-2″>T</div>

Hier sehen wir, sechs Elemente, die je 1/6 der Breite der Gesamtbreite des Displays einnehmen.
In kleineren Displays flutschen die Elemente automatisch untereinander und bekommen die gesamte Fläche.
So weit, so responsiv.

Das wäre die einfachste Möglichkeit ein Layout festzulegen. Allerdings wäre die Struktur in kleineren Displays etwas zu unflexibel, da hier alle Elemente die Gesamtfläche einnehmen. Um das Layout für verschiedene Display-Größen optimal und flexibel aufzubauen, kann man weitere vordefinierte Bootstrap-Klassen verwenden, um das Verhalten in Tablets und Smartphones unterschiedlich zu gestalten.
Beispielsweise möchte man im großen Monitoren 6 Elemente nebeneinander, in Tablets sollen diese Elemente in Dreier-Reihen umgewandelt werden und in Smartphone in 2er-Reihen.
Dafür verwendet man für große Monitore die Klasse col-lg-2, für Tablets col-md-4 und für Smartphones col-xs-6.
Auf diese Weise hat man flexible Gestaltungsmöglichkeiten und kann sein Layout in den verschiedenen Displays mehr oder minder frei konfigurieren.
Im nächsten Beispiel kann man das sehen. Schiebt man das Browserfenster kleiner, bauen sich die Elemente in den verschiedenen Größen unterschiedlich auf.
Beispiel 2

Die DIV-Tags haben hier lediglich weitere Bootstrap-Klassen erhalten.
Hier ein Beispiel:

<div class=“col-lg-2 col-md-3 col-xs-6″>B</div>

 

Sicher kann man noch viele Dinge zu Bootstrap und dem sehr durchdachten Grid-System sagen. Aber zum Kennenlernen und für einen allgemeineren Überblick mit Praxisbezug sollte das zunächst reichen.

Vor allem kann man sehen, wie der Einsatz von Bootstrap 3 oder anderen responsiven Frameworks die Arbeit erleichtert und man sich als Webdesigner und – Entwickler auf das Wesentliche konzentrieren kann.
Demnächst folgen hier weitere Tutorials zu responsive Design, sowie weitere Responsive Web Design – Frameworks. Denn auch wenn Bootstrap sehr weit verbreitet ist, gibt es durchaus weitere interessante Frameworks, die man sich mal anschauen sollte.
Also bis bald.