Bootstrap und WordPress-Themes: No Tutorial needed?!

Der Grund dafür liegt nicht nur in den stetig wachsenden Zugriffszahlen über mobile Endgeräte, sondern auch in den damit verbundenen "neuen" Denkansätzen. Was sich dahinter verbirgt und welche Rolle Bootstrap dabei spielt, ist heute unser Thema.

“Mobile first” haben viele Webentwickler sicher schon oft gehört. Doch was steckt eigentlich hinter diesem Konzept? Spiegelt es nur die Reaktion auf einen offensichtlichen Trend - weg von stationären PCs hin zum mobilen Internetkonsum - wider? Weit gefehlt: Mobile first ist vielmehr ein konzeptioneller Ansatz, der systembedingte Einschränkungen zum Anlass nimmt, Benutzeroberflächen neu zu denken.

Responsivität, Mobile First und Bootstrap 

Webdesign war speziell in den Jahren zuvor ein Prozess, der von innovativen technischen Möglichkeiten getrieben wurde. Gestalterisch eröffneten sich mit neuen CSS-Standards, leistungsstärkeren Systemen, höheren Auflösungen und Animationstechniken ungeahnte Möglichkeiten. Das führte schnell dazu, dass Webseiten zunehmend überladen und aufgebläht wirkten. Gleichzeitig nahmen aber Geduld und Bereitschaft seitens der Besucher ab, sich unnötig lange mit einem Internetangebot zu beschäftigen, um dessen Sinn und Botschaft zu erfassen. Eine Revolution der Usability war unausweichlich.

Mobilgeräte früherer Generationen stellten Designer vor große Schwierigkeiten. Die zur Verfügung stehenden Display-Größen waren damals noch weitaus kleiner als man es von aktuellen Geräte-Generationen gewohnt ist. Es galt Wege zu finden, die Kernaussage einer Webseite und die gesamte Bedienbarkeit an diese schwierigen Gegebenheiten anzupassen. Diese Anforderung führte jedoch dazu, die wirklich wichtigen Aspekte herauszufiltern. Letztlich war die mobile Version einer Webseite die Essenz des Webauftritts. Sich dieser Essenz bewusst zu sein, gilt bis heute als Fundament für einen gelungenen Webauftritt.

Bootstrap-Themes als Unterbau moderner Webseiten

Neben der konzeptionellen Herausforderung war die parallele Entwicklung einer Webseite für unterschiedliche Endgeräte jedoch auch technisch sehr anspruchsvoll. Mit dem Wunsch nach einer einheitlichen Benutzeroberfläche sah sich auch die Entwicklungsabteilung von Twitter konfrontiert. Bei der Programmierung interner Analyse- und Verwaltungswerkzeuge wurde eine konsistente Gestaltung zunehmend komplexer. Daraus entstand die Idee ein Framework zu entwickeln, mit dessen Hilfe sich GUIs (Graphical User Interfaces) standardisiert, einfach und flexibel programmieren ließen.

Das Ergebnis: 2011 erschien Bootstrap in der Version 1.0.

Bereits ein halbes Jahr später vereinfachte und revolutionierte das Framework mit der Version 2.0 die Internetwelt. Ab der zweiten Version etablierte Bootstrap das Grid-System, mit dem eine einheitliche Gestaltung für unterschiedliche Bildschirmauflösungen ermöglicht wurde. Die Tatsache, dass Bootstrap lediglich auf CSS3 und HTML5 basierte – Technologien die ohnehin fester Bestandteil eines jeden Webprojekts waren – machte es zum Schweizer Taschenmesser der Layoutgestaltung.

Bootstrap Grid-System – geniale Struktur für die responsive Darstellung

Vordergründig war es vor allem das Bootstrap Grid-System, das starre Elemente in dynamisch responsive Benutzeroberflächen verwandelte. Doch wie funktioniert das eigentlich genau? Im Kern ist Bootstrap eine Sammlung von CSS-Klassen, die viele Darstellungsoptionen standardisiert. Das Grid-System basiert dabei auf den in CSS3 eingeführten Media Queries. Über Media Queries lassen sich unterschiedliche CSS-Definitionen in Abhängigkeit von der Bildschirmauflösung definieren.

Genau hier setzt Bootstrap mit dem Grid-System an. Konzeptionell rastert es zunächst den Viewport (dargestellter Bildschirmbereich) horizontal in zwölf gleiche Teile. Basierend darauf stellt es CSS-Klassen zur Verfügung, mit denen sich das gesamte Layout in Spalten aufteilen lässt. Und deren Breite wird später nicht etwa in "starren" Pixeln, sondern in relativen Zwölfteln angegeben. Klingt kompliziert? Ist es aber gar nicht.

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

Vordefinierte CSS-Klassen: Der Bootstrap "Generalschlüssel" für responsive Layouts und Themes

Nehmen wir an, wir möchten mit Bootstrap sechs Bilder nebeneinander in einer Zeile positionieren. Dazu erstellen wir sechs Spalten und vergeben jeweils die Klasse “col-2”. Das bewirkt nun, dass jeder unserer Spalten zwei Zwölftel des Bildschirmrasters zugeteilt werden. Die sechs Bilder erscheinen also schön angeordnet nebeneinander. So weit so gut, doch was ist jetzt so besonders daran?

Die Besonderheit liegt darin, dass man jeder Spalte nicht nur die Standard “col”-Klasse, sondern darüber hinaus auch auflösungsabhängige Klassen, zuteilen kann. Weist man nun jeder unserer sechs Spalten die Klassen “col-12 col-md-6 col-xl-2" zu, ist das Layout bereits responsiv.

Es bewirkt, dass bei einer niedrigen Bildschirmauflösung jeder Spalte die volle Breite von zwölf Zwölfteln eingeräumt wird:

• Überschreitet die Auflösung eine Breite von 768 Pixeln (col-md), erstreckt sich jede Spalte über sechs Zwölftel. Es stehen also jeweils zwei Bilder in einer Reihe nebeneinander.
• Erst ab einer Auflösung von 1.200 Pixeln in der Breite (col-xl), stehen wieder sechs Bilder in einer Reihe.

Bootstrap CSS-Klassen für verschiedene Bildschirmauflösungen

Neben dem Grid-System und den dafür erforderlichen Klassen, stellt Bootstrap auch noch viele weitere Möglichkeiten bereit. So lassen sich beispielsweise auch Außen- (Margins) und Innenabstände (Paddings) über CSS-Klassen steuern.

Horizontale und vertikale Ausrichtungen, abgerundete Ecken und vieles mehr erleichtern die Gestaltung durch die Einbindung des Frameworks. Kleiner Tipp: Am Ende des Textes finden Sie eine Übersicht über praktische Bootstrap-Klassen und deren Verwendung.

Formulare, Menüs, Buttons, Sidebars: Bootstrap vereinheitlicht das User-Interface ganzer Themes

Neben den Klassen für die genannten Grundeigenschaften bietet Bootstrap komplett vorgefertigte HTM-Elemente. Formularfelder, Buttons, Menüs - alles wird von Bootstrap ausgestaltet und bereitgestellt. Auch hier reicht es, Standard-HTML-Elementen ein paar zusätzliche CSS-Klassen zu geben und schon verwandelt sich beispielsweise ein minimalistisches HTML-Auswahlfeld in sein deutlich hübscheres Bootstrap-Pendant.

Ein gutes Beispiel ist auch die Klasse .btn, die aus jedem simplen HTML-Link (A-Tag) auf Wunsch eine ansehnliche Schaltfläche macht.

Bootstrap in Themes einbinden? Nichts leichter als das!

Die Einbindung von Bootstrap in ein beliebiges Webprojekt ist denkbar einfach. Prinzipiell reicht es bereits, das Bootstrap CSS-File im Header der Website oder Page einzubinden. Durch diese minimal-invasive Methode lässt sich Bootstrap in so ziemlich jedes Webprojekt, vom Onlineshop über verschiedene CMS bis hin zur Eigenentwicklung mühelos einbinden.

Kein Wunder also, dass die meisten WordPress-Themes mittlerweile ohnehin auf Bootstrap basieren. Bootstrap unterliegt übrigens der MIT-Lizenz und ist somit kostenfrei nutzbar.

JavaScript-Einbindung: Noch mehr Bootstrap-Funktion für tolle Themes

Neben dem Bootstrap CSS-File gibt es auch ein Bootstrap Javascript-File, das je nach Bedarf zusätzlich eingebunden werden kann. Das ermöglicht Zusatzfunktionen wie Dialogfenster, Tooltips, Karussell-Slider und vieles mehr. Im Grunde liefert Bootstrap die Ausgestaltung und reine Funktionalität dieser Elemente. Um sie beispielsweise in WordPress mit sinnvollen Inhalten zu befüllen, werden entsprechende Plugins benötigt, die auf den Bootstrap-Vorgaben basieren.

Welche Funktionalitäten Bootstrap sonst noch alles bietet, ist auf der folgenden offiziellen Webseite umfassend dokumentiert:  https://getbootstrap.com/

Eine deutsche Dokumentation findet sich hier: https://holdirbootstrap.de/

Wichtig: Bootstrap DSGVO-konform einbinden

Um den Anforderungen der DSGVO zu entsprechen, empfehlen wir dringend Bootstrap herunterzuladen, auf dem eigenen Server zu speichern und von dort aus einzubinden!

Nützliche und häufig genutzte Bootstrap CSS-Klassen

QUELLEN:

• https://de.wikipedia.org/wiki/Bootstrap_(Framework)
• https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)#Early_beginnings

Titelmotiv: Photo by Sigmund on Unsplash