Wissenswertes zu den Themen Webdesign, Responsive Webdesign, Web-Entwicklung, Homepage Erstellung und Contao
Der Dockmedia Blog
Bootstrap, das HTML5 & CSS3 Responsive-Framework Webdesignern und Entwicklung
Inhaltsverzeichnis
Bootstrap, das HTML5 & CSS3 Responsive-Framework Webdesignern und Entwicklung
Bootstrap: Die Zukunft des Webdesigns, das HTML5 & CSS3 Responsive-Framework Webdesignern und Entwicklung
Was ist Bootstrap?
Bootstrap ist ein HTML5 & CSS3 Framework, das Webdesignern hilft, die Entwicklung von mobilen Webapps und Webseiten wesentlich zu vereinfachen. Das Framework wurde von Twitter zur internen Verwendung entwickelt, um die interdisziplinäre Zusammenarbeit zwischen Designern und Entwicklern zu vereinfachen. Twitter entschloss sich aufgrund seiner positiven Erfahrungen, das Framework der Öffentlichkeit als Open Source Projekt zur Verfügung zu stellen. Seit dem ersten Release 1.0.0 vom 11. August 2011 hat sich Bootstrap inzwischen zum weltweit populärsten Open Source Framework für Web-Frontends gemausert. Nicht nur Frontends fürs Web lassen sich mit Bootstrap entwickeln, sondern auch Backends. Aktuell liegt Bootstrap in der Version 3.1.1 vor, die im Januar 2014 veröffentlicht wurde. Immer mehr Webdesigner entdecken die Vorteile des Frameworks zumal immer mehr Marktplätzen Themes und Plug-Ins für Bootstrap anbieten und eine große Entwickler- und Webdesigner-Community das Framework stetig weiterentwickelt.
Welche Komponenten werden von Bootstrap unterstützt?
Die Basis von Bootstrap bilden Stylesheets, die für ein browser- und systemübergreifendes einheitliches Erscheinungsbild von Frontends sorgen. Diese sind in der plattformübergreifenden Stylesheet-Beschreibungssprache LESS codiert, die später in CSS kompiliert wird. Elementar ist das Grid System, ein zwölfspaltiges variierbares Basis-Layout, das für responsives Webdesign optimiert ist, weil Bootstrap standardmäßig responsives Design unterstützt. Das bedeutet, dass sich die Spaltenbreiten in den Frontends automatisch an die unterschiedlichen Bildschirmgrößen von Geräten wie Smartphones, Tablets und Desktop-PCs anpassen. Die Responsivität beziehungsweise die Vorgabe des responsiven Designs lässt sich – falls gewünscht – aber auch deaktivieren. Darüber hinaus bietet Bootstrap eine Vielzahl von Komponenten mit erweiterter Funktionalität. Dazu zählen Buttons mit DropDown-Funktionen, Elemente für die Navigation und Pagination wie beispielsweise Page Header, Labels und Breadcrumbs, optische Anzeigen wie Fortschrittsbalken, Hinweismeldungen und Alerts sowie erweiterte Möglichkeiten der typografischen Darstellung. Damit nicht genug, auch Miniaturansichten mit Thumbnails zur übersichtlichen Anzeige von grafischen Bibliotheken gehören zum Standardinventar von Bootstrap. Über die üblichen Webstandards hinaus unterstützt Bootstrap zahlreiche Möglichkeiten zur barrierefreien Darstellung. Ein Feature, das angesichts der zunehmenden Zahl von Personen, die assistive Technologien beim Surfen einsetzen, immer wichtiger wird.
Welche Downloads stehen zur Verfügung?
Grundsätzlich lässt sich Bootstrap in zwei verschiedenen Varianten downloaden. Zum einen als Sammlung maßgeschneiderter, vorkompilierter CSS- und JavaScript-Dateien sowie Fonts, die sich sofort in jedes Webprojekt einbauen lassen. Die vorkompilierten Dateien enthalten neben den Stylesheets unterschiedliche Oberflächenelemente wie Buttons, Dropdowns oder Glyphicons. Alle Plugins, die auf JavaScript basieren, benötigen jQuery, damit sie funktionieren. Die freie JavaScript-Bibliothek stellt wichtige Funktionen zur Navigation und Manipulation von Objekten zur Verfügung. Die zweite Variante umfasst Variante 1, also die vorkompilierten Dateien plus Dokumentations-Quelltexte der Dateien in LESS und JavaScript sowie die Quelltexte der Schriftarten. Außerdem enthält diese Variante eine englischsprachige Dokumentation von Bootstrap und zahlreiche Beispiele, die aufzeigen, wie sich Bootstrap in der Praxis verwenden lässt. Beide Varianten lassen sich auf der deutschsprachigen Projektseite http://holdirbootstrap.de/los-gehts bzw. auf der englischsprachigen http://getbootstrap.com als komprimiertes Verzeichnis herunterladen, das beim Öffnen auf dem Zielrechner entpackt wird.
Fazit
Auf Webdesigner kommen stetig neue Herausforderungen zu. Die Zahl mobiler Geräte mit unterschiedlichsten Bildschirmgrößen wächst beständig und erschwert eine geräte- und browserübergreifende Frontend-Entwicklung. Anstatt sich auf inhaltliche Gestaltungsaspekte konzentrieren zu können, müssen sich Webdesigner mehr als je zuvor mit technischen Details herumschlagen, um die Darstellung für diverse Gerätschaften zu optimieren. Ein Framework wie Bootstrap mit einsatzerprobten Stildefinitionen und lauffähigen Komponenten kommt da wie gerufen, weil es hilft, die Entwicklungszeit zu verkürzen und das Webdesign wesentlich effizienter macht.