Was ist Bootstrap?

Bootstrap

Thema: 
Open Source, Tools

Bootstrap ist ein OpenSource Framework welches von Mark Otto und Jacob Thornton aus dem Twitter Team entwickelt wurde. Es ist eine Kombination aus HTML, CSS und JavaScript und wird zur Darstellung von Benutzeroberflächen im Browser verwendet

Für Designer ist Bootstrap ein Leitfaden welcher die Komponenten einer Website absteckt und dabei die technischen Anforderungen von verschiedenen Geräten berücksichtigt (Smartphones, Desktops, Tablets). Entwicklern gibt das Framework eine solide Grundlage für verschiedene Browseranwendungen.

Die Idee hinter dem Framework ist die Designer und Entwickler auf einen gemeinsamen Nenner zusammenzubringen: „From whiteboarding ideas to coding rough prototypes, collaborating across disciplines is what made Bootstrap successful for internal use at Twitter." (aus dem Blog von Mark Otto), („Vom Skizzieren von Ideen bis hin zur Programmierung grober Prototypen war es die interdisziplinäre Zusammenarbeit, die Bootstrap für die interne Nutzung bei Twitter so erfolgreich gemacht hat“).

Im August 2011 hat Twitter diese Framework als OpenSource Software veröffentlicht, im Februar 2012 war es das am häufigsten heruntergeladene Framework auf der GitHub Entwicklerplatform.

Eigenschaften

Bootstrap wurde mit Augenmerk auf HTML5 und CSS3 entwickelt, um so von den aktuellsten Funktionsweisen profitieren zu können. Die im August 2013 veröffentlichte Version 3 von Bootstrap unterstützt weder den Firefox 3.6 noch den Internet Explorer 7 vollumfänglich. Aus diesem Grund wird die Version 2 des Frameworks auch weiterhin aktualisiert und unterstützt.

Durch das Konzept der progressiven Verbesserung bei der Entwicklung wird grosser Wert auf die Browserkompatibilität gesetzt. Konkret bedeutet dies, dass die grundlegenden Informationen der Webseite für alle Geräte und Browser zugänglich sind, erweiterte Funktionalitäten jedoch nur den Geräten und Browsern zur Verfügung stehen, die diese auch unterstützen.

Deutlich wird dies beispielsweise bei den in CSS3 eingeführten Eigenschaften für abgerundete Ecken, Farbverläufe und Schatten. Trotz der mangelnden Unterstützung durch ältere Webbrowser werden diese Eigenschaften bei Bootstrap intensiv eingesetzt.

Funktionsweise und Aufbau

Bootstrap ist relativ einfach aufgebaut. Sein Kern besteht aus verschiedenen Stylesheets, welche die im Framework vorhandenen Komponenten einbeziehen. Durch das enthaltene Stylesheet bootstrap.less kann der Entwickler selbst bestimmten, welche Komponenten er verwenden möchte. Über das zentrale Konfigurationsstylesheet können weitere Anpassungen (mit gewissen Einschränkungen) vorgenommen werden.

Vorteile

  • Durch den klaren Leitfaden sparen die Entwickler wie auch die Gestalter  Zeit und haben einen gemeinsamen Nenner für die Gestalltung der Oberfläche
  • Bootstrap bringt von Haus aus Elemente wie Icons, Boxen, Buttons und PullDown Menüs bereits mit
  • Erweiterungen wie Modal-Boxen, Tooltips und Tabs sind Teil des Frameworks (Integration von JQuery)
  • Alle Elemente sind gestaltet, wodurch sichergestellt wird, dass jede der möglichen Komponenten einheitlich aussieht
  • Das Framework ist rückwärtskompatibel. So wird sichergestellt dass die einzelnen Elemente der Website auf allen Browsern dargestellt werden können
  • Bootstrap ist anpassbar oder kann durch Erweiterungen mit neuen Funktionen versehen werden

Nachteile

  • Das komplette Bootstrap Framework ist ein grosser Brocken, was die Ladezeit der Website verzögern kann. Hier empfiehlt es sich Elemente, welche nicht verwendet werden, auszuschliessen oder mit Cache dem Aufbau der Website unter die Arme zu greifen (z.B. bei Drupal)
  • Durch die vielen Möglichkeiten verleitet das Framework zum Spielen. Effekte oder falscher Einsatz von Scripts führen eher dazu, dass die Website überladen wird
  • Das Layout muss sich dem Framework anpassen
  • Bevor man mit Bootstrap anfängt, sollte man sich  mit dem Aufbau des Frameworks befassen und die (meist englische) Dokumentation lesen

Fazit

Arbeiten mit Frameworks wie Bootstrap beschleunigt die Entwicklung enorm, da zu Beginn bereits abgesteckt wird mit welchen Komponenten man arbeiten kann und wie diese aussehen. Änderungen sind rasch spezifiziert und können gezielt umgesetzt werden. Weitere Funktionen wie JQuery können auf den bestehendem Gerüst aufsetzen und so die Funktionen auf der Benutzeroberfläche erweitern.

Durch die breite Funktionalität muss jedoch auch viel geladen und gerechnet werden. Dies kann gerade auf Smartphones mit schlechter Internetverbindung das Laden der Inhalte erheblich verlangsamen. Abhilfe schaffen hier Optimierungen der Performance im CMS und das Weglassen unnötiger Komponenten.

Die vorgegebenen Komponenten sind zwar individualisierbar, jedoch bleibt auf jedem Design ein gewisser "Bootstrap-Touch". Dies ist auch der Grund, dass sehr individuell gestaltete Websites nicht auf Front-End-Frameworks wie Bootstrap zurückgreifen.


Ähnliche Beiträge

Bei Beautiful Open werden fortlaufend die schönsten Projekte der Open Source Community aufgelistet. Dies fängt an mit JavaScript Libraries und geht weiter über Frameworks bis zu kompletten Applikationen oder Content Management Systemen.


Was ist Drupal?
Drupal ist ein Bausatz zur Erstellung moderner Websiten. Durch die Modulare Bauweise und die strikte Trennung von Inhalt und Design können komplexe Anforderungen und Funktionen rasch umgesetzt werden, ohne dabei die Benutzeroberfläche unnötig zu verkomplizieren. Ein besonderes Augenmerk hat Drupal auf eine konsequente Bauweise in Kernfunktionen, und Module welche Benutzerspezifische Erweiterungen erlauben. Dies ermöglicht bereits entwickelte Komponenten auf weitere Websiten zu übernehmen, oder spezifisch anzupassen.

Bei Fragen - fragen!