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.

Datenschutz­einstellungen
Auf unserer Website verwenden wir Cookies. Einige davon sind unerlässlich, andere helfen uns, unsere Online-Services zu verbessern. Hier können Sie individuelle Einstellungen vornehmen, welche Cookies sie akzeptieren möchten. Sie können diese Auswahl jederzeit ändern. Nähere Informationen finden Sie in unserer Datenschutzerklärung.
Datenschutz­einstellungen

Hier finden Sie eine Übersicht über alle verwendeten Cookies. Sie können Ihre Zustimmung zu ganzen Kategorien geben oder sich weitere Informationen anzeigen lassen und so nur bestimmte Cookies auswählen.

Essenziell (2)

Essenzielle Cookies ermöglichen grundlegende Funktionen und sind für die einwandfreie Funktion der Website erforderlich.

Cookie-Informationen anzeigen Cookie-Informationen ausblenden
Name Cookie Consent
Anbieter Eigentümer dieser Website
Zweck Speichert, ob der Besucher bereits Cookie-Einstellungen vorgenommen hat und die Cookie-Box nicht mehr angezeigt werden muss.
Cookie Name bmd-ccb
Cookie Laufzeit 1 Jahr
Name Cookie Consent Settings
Anbieter Eigentümer dieser Website
Zweck Speichert die Cookie-Einstellungen des Benutzers. "..." entspricht dem jeweiligen Cookie (z.B. "google-tag-manager" oder "facebook")
Cookie Namen bmd-cc[...]
Cookie Laufzeit 1 Jahr
Marketing (1)
An Aus

Marketing-Cookies werden von Drittanbietern oder Publishern verwendet, um personalisierte Werbung anzuzeigen. Sie tun dies, indem sie Besucher über Websites hinweg verfolgen.

Cookie-Informationen anzeigen Cookie-Informationen ausblenden
Name Google Tag Manager
Anbieter Google LLC
Zweck
Datenschutzerklärung des Anbieters https://policies.google.com/privacy
Cookie Namen _ga,_gat,_gid
Cookie Laufzeit 2 Jahre
Akzeptieren An Aus