Kritiker sagen: jede Bootstrap-Seite sieht gleich aus. Das stimmt aber nicht, denn Bootstrap ist erstaunlich flexibel. Mit einigen Tipps ist das Zusammenspiel mit Contao ganz einfach. Im ersten Teil dieser Serie schauen wir uns den Grundaufbau genauer an.
Twitter-Bootstrap besteht aus vielen Komponenten, die von einem responsiven Layoutgerüst über vorgefertigte Komponenten bis hin zu erweiterten JavaScript-Bibliotheken reichen. Bootstrap verlässt sich dabei im Regelfall auf CSS-Klassen, die dann eine entsprechende Darstellung steuern. Zentral ist dabei das Grid-Layout, das mit wenigen Basisklassen bereits ein responsives Seitenlayout ermöglicht.
Mit .row gibt es Reihen, mit .container zentrierte Inhaltsbereiche, und die Breite von Elementen steuert man mit .col-xx-yy. Das klingt nicht schwer und ist erstaunlich mächtig. Darüber hinaus kann man mit den Kürzeln für Viewport-Breiten xs, sm, md und lg steuern, wie sich Elemente auf welchem Bildschirm verhalten. Den Spaltenumfang bestimmt eine Zahl. So ist ein Element mit den Klassen col-md-6 und col-sm-9 auf einem mittleren Desktop 6 Spalten breit - auf einem Smartphone mit grösserem Bildschirm hingegen 9 Spalten.
Soweit schaut das übersichtlich aus. Berücksichtigt man noch, dass die .col-Spalten einen .container benötigen, dann hat man das Prinzip schon gut verstanden. Mit folgendem Markup erzeugt man das erste Spaltenset:
<div class="container">
<div class="col-md-3">Seitenbereich A mit 3 Spalten</div>
<div class="col-md-6">Haupbereich mit 6 Spalten</div>
<div class="col-md-3">Seitenbereich B mit 3 Spalten</div>
</div>
Es gibt - wie erwähnt - eine ganze Reihe an vorgefertigten CSS-Komponenten. Diese beziehen sich auf Formulare, Buttons, Tabellen oder Bilder. Darüber hinaus gibt es noch einige Hilfsklassen und responsive Utilities. Das ganze ist erstaunlich durchdacht und umfangreich. Ich kenne einige, die nur mal schnell in der Doku lesen wollten und erst nach Tagen wieder sichtbar wurden.
Die gesamte Dokumentation gibt es selbstverständlich aktuell auch im englischsprachigen Original.
Allerdings: Baut man eine Seite, indem man die von Bootstrap als Download gelieferte Vorlage benutzt, dann sieht die Seite in der Tat aus wie jede andere. Das reicht von dem hellen Hintergrundlook über das hellgraue 'Hero'-Element und die Typografie bis hin zu den immer gleiche Farben für Buttons. Ich gebe zu: Das ist öde und fühlt sich an wie Webdesign vom Fastfood-Laden. Das machen wir also nicht - oder nur ein einziges Mal, um das Ergebnis zu sezieren. Es gibt - das schon mal vorweg - auch andere Möglichkeiten.
Dazu aber mehr im nächsten Teil, in dem wir ein Bootstrap-Basislayout herunterladen (bzw. die benötigten Dateien) und ein paar Überlegungen anstellen, wie man damit in unserem Lieblings-CMS arbeiten können. Bis dahin sei geraten, selbsttätig einen Blick in die Bootstrap-Komponenten und die JavaScripts zu tun. Um Lust auf mehr zu bekommen, kann man übrigens auch durch die Expo stöbern. Seiten wie Spotify, die Nasa oder FrogDesign zeigen die ganze Vielfalt von Bootstrap-Layouts.
Einen Kommentar schreiben
Hast Du Fragen oder Anregungen? Dann nutze die Kommentarfunktion.