W
e
b
d
e
s
i
g
n

wordpress logo 32 blue

Der Pepp der Website ist oft eine Summe von Details.
Axel Tüting

Bootstrap ist mittlerweile in vielerlei Munde und hat sich zu einem Standard in Sachen responisve Webseiten entwickelt. Somit gehört es eigentlich zu dem Menüverweis zuvor, wo ich responsives Webdesign ein wenig erkläre. Aber da Bootstrap durchaus auch als feststehender Begriff zu betrachten ist und ohnehin in vielen Munden ist, bekommt es hier einen eigenen Menüverweis.

christmann responsivBootstrap ist nichts weiter als ein CSS-Framework. Es bietet diverse fertige HTML und CSS Formate an, um damit insbesodnere responsives Webdesign umzusetzen. Dabei bezieht sich Bootstrap auf ein Gridsystem, welches maximal 12 Spalten hat. Diese maximalen 12 Spalten passen sich jeweils der Bildschirmauflösung des Browsers, bzw. verwendeten Gerätes, an. Grundsätzlich hat Bootstrap eine Gesamtbreite von 960 Pixel. Wird die Website mit einem Gerät/Browser mit geringerer Breite betrachtet, dann "rutschen" die einzelnen Spalten automatisch nach unten. Nebeneinander werden dann nur noch soviele Spalten angezeigt, wie tatsächlicher Platz auf dem Bildschirm vorhanden ist. Wird es also schmal bei der Betrachtungsweise, kann es sein, dass alle 12 Spalten untereinander angezeigt werden.

Natürlich müssen nicht alle 12 Spalten benutzt werden. Soll ein einspaltiger Beitrag angezeigt werden, reicht eine Spalte im Template aus. Diese einzelne Spalte passt sich genauso der vorhandenen Breite an. Also sowohl der Inhalt der einzelnen Spalte, als auch alle Spalten zusammen passen sich der vorhandenen Größe an. In einem Template seiner Wahl, bzw. einem Individualtemplate müssen lediglich die Bootstrap-Klassen entsprechend vergeben werden.

Das geht in Joomla auf unterschiedlicher Art. Zum einen natürlich direkt im Template, aber auch entsprechender Klassensetzung im Modul. Dazu gibt es noch das ein oder andere Grafikelement oder beipsielweise einen Button der gezielt formatiert werden kann, so dass Bootstrap hier einige interessante Möglichkeiten bietet. Das Menü passt sich so beispielsweise auch von selbst an und erstellt das mittlerweile oft gesehende Icon mit den drei Strichen, das angeklickt werden kann und dann das Menü öffnet. Im Screenshot ein kleiner Ausschnitt aus einer responsiven Seite mit Bootstrap.

Bootstrap ist seit Joomla 3 fester Bestandteil in Joomla und kann somit (fast) direkt benutzt werden. Wobei Bootstrap selber kostenlos ist und auch kommerziell eingesetzt werden darf.

Ich selber entwickel mit beiden Methoden: also zum einen alles per Hand und zum anderen mit Bootstrap. Bei kleinen Seiten, die überschaubar sind, bietet es sich an, auf ein Framework wie Bootstrap zu verzichten, da hier natürlich auch vieles mit an Bord ist, was meist nicht benötigt wird. Andererseits kann aber auch schnell nach heutigem Standard entwickelt werden. Das kommt auch oft alten Templates zu gute, die in neuen Joomlas laufen sollen und noch ansehnlich genug sind, um sie nicht einfach zu ersetzen. Oder auch neueren Templates, die nicht responsive gestaltet sind.