Nicht jedes Element auf der Website muss von Grund auf neu programmiert werden. Mit Bootstrap erhalten Sie kostenfreien Zugriff auf eine Bibliothek unterschiedlicher Elemente, die sich hervorragend in der Praxis einsetzen lassen und für responsive Webdesign eignen. Bootstrap hat die Arbeit bereits für Sie erledigt.

Bootstrap erleichtert die Arbeit für Webentwickler und Webdesigner mit einem umfangreichen Baukasten an vorgefertigten Elementen.

Twitter Bootstrap wurde von Twitter entwickelt und wird als Freeware zur Verfügung gestellt. Im Umfang befinden sich Gestaltungselemente für die Website wie Buttons oder Container. Auf diese Weise muss nicht jeder Website-Programmierer seinen eigenen Fundus an Buttons, Containern, Menüs, Headern und Footern programmieren, sondern greift komfortabel auf vorgefertigte Elemente zurück. Die Zeit wird stattdessen für die Entwicklung der Website genutzt, um Logik, Struktur, SEO und die Marketingziele der Website in der Programmierung umzusetzen. 

Die vorhandenen Elemente sind von Profis für den Einsatz in der Praxis entwickelt und optisch ansprechend. Zusätzlich enthält Bootstrap Javascript-Funktionen und Animationen, Kalender und Popups.

Twitter hatte die Idee, für sich selbst einen Baukasten mit vorhandenen Bausteinen zu entwickeln. Ziel war die Einheitlichkeit im Auftritt und eine Arbeitsersparnis für die Programmierer. Intern wurde die Umsetzung sehr gut aufgenommen und man entscheid sich, die Ergebnisse als Open Source zur Verfügung zu stellen.

Wenn die Elemente in Bootstrap ursprünglich für Twitter genutzt wurden und Sie diese Elemente verwenden, sieht Ihr Webdesign dann wie Twitter aus? Nein, Bootstrap wird häufiger eingesetzt, als man denkt.

Die grafischen Oberflächen aus Bootstrap können für die Erstellung von Webprojekten kostenlos genutzt werden. Grafische Elemente brauchen nicht mehr selbst entwickelt zu werden, sondern werden einfach von Bootstrap heruntergeladen und vor dem Einsatz ggf. angepasst. Die gestalterischen Elemente bedienen mit einer breiten Palette eine Vielzahl von Anwendungen.

Bootstrap enthält Designvorlagen für HTML, CSS und Javascript. Prominent hervorgehoben werden in Beschreibungen von Bootstrap meist die Buttons und Schaltflächen. Bootstrap beinhaltet aber mehr. Sehr praktisch ist eine Navigationsleiste für das Menü. Weniger bekannt ist, dass Bootstrap auch Typographie und Vorlagen für Formulare liefert. Ebenfalls Elemente als Cards, Panels, Alerts und Badges.

Die Elemente sind bereits für verschiedene Browsern optimiert, so dass sich beim Besuch der Website trotz unterschiedlicher Browser ein einheitliches Erscheinungsbild ergibt. Die einzelnen Vorlagen können in der Größe verändert und auf Spaltenbreite gebracht werden. Auf diese Weise lassen sich die vorgefertigten Bootstrap-Definitionen an das Corporate Design der Website anpassen.

Großflächige Gestaltungselemente wie Slideshows für Bilder lassen sich ebenfalls mit Bootstrap gestalten. Um Kundenkommentare zu ermöglichen, werden Dialogboxen angeboten. Die Navigation über Tabs wird unterstützt. Bootstrap bietet ebenfalls vertikale Akkordeons an.

Als Webdesigner wissen wir alle um die Bedeutung von responsive Webdesign für die Usability und das SEO. Die Gestaltungselemente von Bootstrap lassen sich in ein responsive Webdesign einbinden und werden auf den Endgeräten passend dargestellt.

• Durch die Nutzung vorbereiteter Elemente geht die Arbeit schneller von der Hand.
• Die Gestaltungselemente lassen sich problemlos in TYPO3 und viele andere Systeme einbinden.
• Bootstrap ist hervorragend dokumentiert. Bei Fragen erhält man Unterstützung durch eine große Community.
• Als Open Source-Angebot ist Bootstrap kostenfrei.

• Der Quellcode ist recht umfangreich.
• Für die Nutzung von Bootstrap sind trotzdem CSS-Kenntnisse erforderlich.
• Falls die vorhandenen Elemente individualisiert werden sollen, müssen die CSS-Eigenschaften meist überschrieben werden. Der Aufwand muss ins Verhältnis gesetzt werden zu der Arbeitsersparnis beim Verwenden vorgefertigter Elemente. Kommt darauf an, wie fit Sie in CSS sind und wie routiniert Sie im Umschreiben werden.

Bootstrap ist u.a. für Icons bekannt geworden. 1.200 Icons stellt Bootstrap bereit, die sich als SVGs, SVG Sprite oder Web Fonts einbinden lassen, bereichert um 250 Glyphicon Halflings im Font Format.

Mit Dropdown-Menüs lassen sich Untermenüpunkte aufklappen, um eine Auswahl von Links anzuzeigen. Durch das Java-Script Plugin werden sie interaktiv. Dropdown-Menüs müssen gezielt angeklickt werden. Das Menü wird nicht durch ein Mouseover angezeigt. Das bringt mehr Ruhe auf die Website.

Mehrere Buttons können seitlich oder vertikal über JavaScript bündig aneinandergereiht werden. Ein schönes Gestaltungselement für die Website.

Die Buttons selbst können wiederum als Ausklappmenü verwendet werden. Durch den farbigen Button mit den abgerundeten Ecken und dem darunter befindlichen Aufklappmenu ist das Menü nicht nur sehr übersichtlich, sondern schaut auch hochwertig aus.

Formulare zur Steuerung von Eingaben lassen sich flexibel gestalten: Text, Schaltflächen oder Schaltflächengruppen können auf beiden Seiten der Eingabemaske platziert werden.

Fertige Navigationsleisten, die die Einbindung eines Logos erlauben und ausklappbare Akkordeons unterstützen.

Die aktuelle Position, an der sich der Besucher der Website befindet, wird inkl. Navigationshierarchie und automatisch über CSS eingefügte Trennzeichen angezeigt.

Über die Paginierung hinaus kann auch der Inhalt verwandter Seiten angezeigt werden.

Die in den Text eingebundenen Labels erreichen hohe Aufmerksamkeit und sind im gleichen Design wie die Buttons gestaltet. So ergibt sich ein harmonisches Gesamtbild.

Die von Bootstrap bereitgestellten Badges können an die Größe des übergeordneten Elementes, zum Beispiel des Textes, angepasst werden.

Die Größe zählt, dachten sich wohl die Bootstrap-Entwickler und nannten die plakative Komponente prompt Jumbotron. Wenn Sie gern das Produkt als einen Star inszenieren, finden Sie hier die passende grafische Plattform für den Hauptdarsteller.

Kleine aber auch großflächige Tabellen können mit Bootstrap abgebildet werden. Die Tabellenköpfe können als Kopfzeile und auch in der ersten Spalte angeorndet und gegenüber dem eigentlichen Inhalten der Tabelle (den Zellen) optisch hervorgehoben werden. Jede zweite Zeile kann mit einer Hintergrundfarbe versehen werden und so eine Steifenoptik für die Tabelle gewählt werden. Auch bunte Darstellungen sind geeignet, um über die Auswahl der Farbe einen Zusammenhäng mit anderen Inhalten herzustellen. Feine senkrechte oder waagerechte Trennlinien und Hervorhebungen innerhalb der Tabelle sind möglich.

Für prägnante Überschriften bietet Bootstrap die passende Typographie an.

Thumbnails lassen sich komfortabel in eine Umgebung einbetten und ragen in der Größe und Breite nicht über ihr Umfeld hinaus. Besonders angenehm im Hinblick auf responsive Design.

Mit im Programm sind bei Bootstrap vorgefertigte kontextbezogene Alerts, die zu bestimmten User-Aktionen passen. Selten sah eine Warnung besser aus.

Die Progress Bars/Fortschrittsbalken lassen sich stapeln, beschriften und die Hintergründe animieren.

Vorlagen für Komponenten wie Blog-Kommentare und – natürlich – Tweets.

Manchmal werden Aufzählungen umfangreicher und sind mit einer einfachen Liste nicht mehr zu bewältigen. Mit Bootsrap lassen sich Listengruppen - also mehrere Listen nebeneinander - anlegen. Gut, um verschiedene Aspekte eines Themas in Kurzform zu beleuchten oder Varianten übersichtlich zu vergleichen.

Vereinfach gesagt beschriftete Felder mit Rahmen ringsherum. Interessant, um Content zu strukturieren. Verschiedene Aspekte eines Themas können mit Panels in gut verdauliche kleinere Häppchen zerlegt werden. Zudem bietet der Header des Panels die Möglichkeit einer Farbkodierung. Die Variante als Footer ist ebenfalls möglich.

Mit Bootstrap lassen sich Inhalte wie Videos und Diashows elegant einbetten. Das Format orientiert sich an der Breite des übergeordneten Elements – wichtig für responsive Webdesign.

Mit diesem Element wird ein Panel inkl. grauem Hintergrund erzeugt. Dies soll im Layout den Eindruck von etwas mehr Tiefe erzeugen.

Bootstrap ist bereits von hausaus sehr auf die Anforderungen der BITV orientiert. Mit geringem Aufwand lassen sich die Bootstrap Elemente so anpassen, dass die Website barrierefrei ist.

Navigation überspringen: Blinde Besucher der Website lassen sich die Website von einem Screenreader vorlesen und bedienen die Website über Tasten. Deshalb muss auch die Navigation über Tasten bedienbar sein. Am Anfang der Website sollte deshalb ein „skip navigation link“ angeboten werden, damit der Hauptinhalt sofort angesprungen werden kann.

Farbkontraste: Personen mit Farbsehschwäche können einige Farben nicht wahrnehmen oder von anderen unterscheiden. Beispiel: Pink wird als Grau wahrgenommen. Wenn Sie sichergehen wollen, verwenden Sie bei Ihrem Webdesign Elemente mit hohem Kontrast wie schwarz/weiß.

Verschachtelte Überschriften: Hier gilt das, was Sie grundsätzlich berücksichtigen sollten: Die Hauptüberschrift sollte als H1 bezeichnet werden, Subheads als H2 usw. Die Ebenen sollten nicht zu tief führen. Was tief verschachtelt ist, wird von der Suchmaschine als weniger wichtig interpretiert.

Bootstrap stellt eine solide Grundlage an Elementen dar, die von einem engagierten Team direkt für die Anwendung in der Praxis entwickelt wurde und als Open Source kostenfrei bereitgestellt wird.

Die Elemente haben ihre Erprobungsphase hinter sich. Bootstrap hat sich als ein gern eingesetzter Standard etabliert. Läuft man dadurch als Webentwickler Gefahr, dass die programmierten Seiten alle gleich aussehen?

Diese Gefahr besteht nicht. Bootstrap bietet lediglich einen Teil der Gestaltungselemente an, die einer Website Gesicht geben, aber nicht alle. Das geübte Auge des Webentwicklers erkennt die Buttons, die nach Bootstrap aussehen, der Auftritt einer Website wird jedoch noch von anderen Gestaltungselementen bestimmt. In der industriellen Fertigung ist es völlig OK, bewährte Standards anderer Hersteller zu nutzen. Für die Fertigung eines Pkws werden die Teile von Tausenden Lieferanten verbaut.

Gibt es Alternativen zu Bootstrap? Ja, googeln Sie bitte mit den Suchbegriffen „bootstrap alternatives“.  

Welche Erfahrungen haben wir mit Bootstrap und TYPO3 gemacht? Wir entwickeln Webseiten bevorzugt mit dem CMS TYPO3 von der Konzeption über die Struktur bis hin zur fertigen Website inkl. Anbindung an das Hosting. Wir bauen Webseiten komplett neu auf, erweitern und optimieren sie. Von daher sehen wir ein breites Spektrum in der täglichen Praxis. Bootstrap lässt sich prima in eine TYPO Umgebung einbetten und ist für dieses CMS empfehlenswert.

Bootstrap stellt eine solide Grundlage für das Frontend selbst entwickelter Webseiten dar: Viele Komponenten wie Tables, Grids und Modals, mit denen sich Webseiten leicht erstellen lassen, sind bereits im Baukasten vorhanden. Sie sind flexibel einsetzbar und brauchen nicht erst selbst geschrieben zu werden.

Die Elemente von Bootstrap passen sich in der Größe dem übergeordneten Umfeld an: ein großer Vorteil für responsive Design. 

Die Gestaltung der Elemente von Bootstrap ergibt ein einheitliches Erscheinungsbild auf der Website. Weitere Funktionen für die Website können auf dem Gerüst von Bootstrap aufgebaut werden.

Weitere Informationen zu Bootstrap. Dem beliebtesten Framework mit HTML, CSS und Javascript für die Entwicklung von anpassungsfähigen und moderne Websites.

• Bootstrap 4.6 Introduction
• Bootstrap (Framework) auf Wikipedia
• Code twbs/boostrap auf github