Bootstrap und WordPress-Themes: No Tutorial needed?!
Veröffentlicht am 20.07.2023 von DomainFactory
Webpage-Design ist ein stetiger Prozess, der sich fortlaufend an neuen Techniken und Entwicklungen orientieren muss. Als mobile Endgeräte in Form von Handys und Tablets an Bedeutung gewannen, wurde so auch eine neue Ära des Webdesigns eingeläutet. Was zunächst lediglich als "Kür" verstanden wurde, wurde schon bald zur absoluten "Pflicht" moderner Seitenkonzepte.
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.
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
| Bildschirmgröße | Breite in Pixeln | CSS-Klasse |
| Extra small | < 576 | .col |
| Small | >= 576 | .col-sm |
| Medium | >= 768 | .col-md |
| Large | >= 992 | .col-lg |
| Extra large | >= 1200 | .col-xl |
| Extra extra large | >= 1400 | .col-xxl |
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
| CSS-Klasse | Verwendungszweck |
| .pt-1 | Innenabstand oben. Die 1 kann variiert werden (0-5). |
| .pb-1 | Innenabstand unten. Die 1 kann variiert werden (0-5). |
| .px-1 | Innenabstand links und rechts. Die 1 kann variiert werden (0-5). |
| .py-1 | Innenabstand oben und unten. Die 1 kann variiert werden (0-5). |
| .mt-1 .mb-1 .mx-1 .my-1 | Gleiche Klassen wie bei den Innenabständen - mit m statt p zu Beginn. Fügen Außenabstände (Margins) hinzu. |
| .text-left | Richtet Text linksbündig aus |
| .text-center | Richtet Text zentriert aus |
| .text-right | Richtet Text rechtsbündig aus |
| .btn | Verwandelt einen HTML-Link in einen Button |
| .mark | Stellt Text markiert (highlighted) dar |
| .jumbotron | Macht aus einem einfachen div-Container eine graue Hinweisbox, die den Text im Inneren vergrößert darstellt. Eignet sich, um Hinweise zu geben oder wichtige Mitteilungen zu machen. |
| .row | Leitet eine neue Zeile für nachfolgende Spalten ein. |
| .container | Definiert einen Darstellungsbereich in der horizontalen Mitte des Bildschirms, der bei hohen Auflösungen nicht die volle Breite, sondern eine vordefinierte Container-Breite einnimmt. |
| .container-fluid | Definiert einen Darstellungsbereich, der die volle Breite des Bildschirms ausschöpft. |
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
