Webdesign mit Bootstrap

Bootstrap ist ein kostenloses Framework zur Gestaltung von responsiven Websites. Auf Basis von HTML und CSS stellt das Framework das Grundgerüst für eine Website dar, die sowohl im Browser, als auch mobil problemlos aufrufbar ist. Das 2011 erschienene Open-Source-Projekt, aus der Entwicklung von Twitter, hat sich mittlerweile zu einem der meist genutzten Frameworks entwickelt.

Aufbau von Bootstrap

Die grundlegenden Komponenten von Bootstrap sind ein sogenanntes Grid-System, ein grundlegendes CSS-Stylesheet, wiederverwendbare Komponenten, sowie erweiterbare Javascript-Plugins.

Das Grid-System ist standardmäßig ein 12-spaltiges Layout mit einer Breite von 940 Pixeln. Je nach Anforderung kann das Layout aber auch individuell mit einer variablen Breite angepasst werden. Entscheidender Vorteil des Grid-Systems ist die automatische Anpassung der Spalten an die Auflösung des entsprechenden Gerätetyps. Die Breite der Spalten richtet sich dabei nach der zur Verfügung stehenden Fensterbreite des Smartphones, Tablets oder Desktop-PCs.

Bootstrap enthält zudem eine Reihe von CSS-Stylesheets, die dem Layout ein grundlegendes Design mitgeben. Buttons, Tabellen, Texte und sonstige Elemente erhalten somit ein einheitliches Erscheinungsbild. Dabei sind der eigenen Gestaltung aber weiterhin so gut wie keine Grenzen gesetzt. Die verschiedenen Stylesheets sind mit den unterschiedlichen Auflösungen der Endgeräte zu erklären. So ist es möglich browser- und geräteübergreifend ein einheitliches Design darzustellen.

Häufig verwendete Elemente wie beispielsweise die Navigation samt Dropdown-Möglichkeiten sind in Bootstrap ebenfalls enthalten. Diese Komponenten basieren grundlegend auf dem JavaScript Framework jQuery und können dementsprechenden mit zusätzlichen Elementen erweitert werden.

Vorteile von Bootstrap

• Bootstrap liefert einen klaren Leitfaden und ein solides Grundgerüst für jede Website. Das erspart Entwicklern und Designern Zeit für die Gestaltung.
• Umfassendes Paket an fertigen Elementen wie Buttons etc., Plugins und Erweiterungen durch die Integration von jQuery.
• Durch den Mobile-First-Ansatz ist das Design von Anfang an für mobile Geräte ausgelegt und muss nicht durch ein zusätzliches Stylesheet hinzugefügt werden.
• Einheitliche Gestaltung sämtlicher Komponenten und dennoch beliebig anpassbar oder erweiterbar

Nachteile von Bootstrap

• Bootstrap enthält sehr viel CSS und JavaScript, das sich negativ auf die Ladezeit der Website auswirkt. Skripte und Klassen für nicht genutzte Element sollten daher entsprechend angepasst bzw. ausgeschlossen werden.
• Die einheitliche Gestaltung von Elementen wie Navigation und Buttons ist zum einen sehr vorteilhaft, zum anderen lässt es verschiedene Website auch schnell ähnlich und wenig individuell aussehen.
• Das Layout weist bestimmte gestalterische Grenzen auf, da es dem Framework angepasst werden muss.

Fazit

Frameworks wie Bootstrap können die Entwicklung und Gestaltung von Websites enorm beschleunigen und vereinfachen. Das Gerüst der Seite ist schnell aufgebaut und kann mit zusätzlichen Funktionen erweitert und verändert werden. Größtes Plus ist der Mobile-First-Ansatz, wodurch sich die Webseite flexibel der Auflösung des Endgeräts anpasst. Dennoch ist das Open-Source-Framework nicht für die Umsetzung jeder Website geeignet.

Das Design ist zwar individualisierbar, allerdings finden sich Komponenten wie Buttons, Textstrukturen oder die Navigation häufig wieder. Werden diese Elemente nicht abgeändert, wirken selbst verschiedene Seiten oft ähnlich. Daher verzichten sehr individuell gestaltete Seiten in der Regel auf sämtliche Front-End-Frameworks. Durch das viele CSS und JavaScript sind Bootstrap-basierte Webseiten zudem von Haus aus recht langsam. Da so gut wie nie alle Skripte benötigt werden, gibt es hier einige Optimierungsmöglichkeiten.