Smartphones, Tablets und Co verbreiten sich immer mehr. Der gute alte Desktop Rechner hat ausgedient. Das bringt einige Neuerungen und Probleme vor allem für Webdesigner mit sich. Internetseiten müssen sich automatisch an die Bildschirmgröße anpassen können (responsive Webdesign). Dazu muss man sich einiges überlegen und nach lösungen suchen. Hier möchten wir Twitter Bootstrap in Verbindung mit Joomla 2.5 vorstellen.
Bootstrap lässt sich sehr einfach und schnell auch ohne umfangreiche Tutorials nutzen. Alle Code-Beispiele und Erklärungen finden sich auf der Bootstrap-Seite.
- Bootstrap herunterladen
- lokal entpacken. Man findet einen Ordner "css" einen "img" und einen "js". Diese benötigen wir in unserem Tempalte-Ordner
- Um diese nun in unserem Joomla-Template anzusprechen öffnen wir die index.php und passen diese an das Bootstrap-Gerüst an.
- Grundlegen hierbei ist vorrangig die Einbindung der CSS und JS Dateien und der <div class=”container”>.
- Anschließend ist es empfehlenswert dich mit dem Bootstrap-Grid auseinanderzusetzen. Das System untergliedert die Webseite in verschiedene Spalten (bei Bootstrap sind es zwölf), die sich über eine Klasse (z.B. class=”span2”) verbinden lassen.
- Alles Weitere läuft wieder wie beim Joomla-Templating gewohnt. So lange alles auf dem Grid-System aufbaut übernimmt Bootstrap die automatische Anordnung.
- Nun kann man sich beliebig aus den Bootstrap Components bedienen und seine Webseite entwickeln.
- Auch zahlreiche Bootstrap JavaScripts stehen zu verfügung um die Webseiten etwas dymanischer zu machen.
- Um die neue Webseite zu testen brauchen wir keine Tablets und Smartphones. Mit Screenfly ist es einfach möglich Seiten mit den verschiedensten Auflösungen zu testen. So kann man bequem entwickeln und die Resultate prüfen.
Viel Erfolg!
