Bootstrap 3 – Framework & responsive Layouts

Home » Blog » News » Bootstrap 3 – Framework & responsive Layouts

Seit Version 2.0 unterstützt Bootstrap zudem die Gestaltung von responsive Layouts. Das bedeutet, der grafische Aufbau von Webseiten erfolgt dynamisch und unter Berücksichtigung der Eigenschaften, die das verwendete Gerät (PC, Tablet, Smartphone) mit sich bringt. So passen sich das Grid-Layout und die Oberflächenelemente automatisch der jeweiligen Bildschirmauflösung bzw. Fenstergröße an.

Bootstrap wird als Open-Source angeboten und über GitHub bereitgestellt. Entwickler sind aufgerufen, sich an dem Projekt zu beteiligen, und können auf der Plattform eigene Beiträge leisten.

Bootstrap ist modular aufgebaut und besteht im Kern aus einer Reihe von LESS-Stylesheets, welche die einzelnen Komponenten des Toolkits implementieren. Ein Stylesheet namens bootstrap.less inkludiert die Komponenten-Stylesheets. Durch diesen Aufbau kann der Entwickler durch Anpassung der bootstrap-Datei selbst entscheiden, welche Komponenten er in seinem Projekt verwenden möchte.
Anpassungen in eingeschränktem Umfang sind über ein zentrales Konfigurationsstylesheet möglich. In diesem werden unter anderem Angaben zu Schriftart und -größe, Farbe oder den Aufbau des Grid-Layouts gesetzt. Tiefgreifendere Änderungen sind möglich, indem die LESS-Deklarationen von Bootstrap überschrieben werden.

Bootstrap wird standardmäßig mit einem 940 Pixel breiten, zwölfspaltigen Grid-Layout ausgeliefert. Alternativ kann der Entwickler auch ein Layout mit variabler Breite verwenden. Für beide Fälle bietet das Toolkit vier Variationen im Sinne des Responsive Webdesigns an, welche verschiedene Auflösungen und Gerätetypen bedienen: Mobiltelefone, hoch- und querformatige Tablets, sowie PCs mit geringer und hoher (Widescreen-)Auflösung. Dabei passt sich die Breite der Spalten automatisch der zur Verfügung stehenden Fensterbreite an.
Über das Konfigurationsstylesheet hat der Entwickler die Möglichkeit, die Anzahl und Breite der Spalten, den Abstand zwischen den Spalten sowie die Gesamtbreite des Layouts seinen Vorstellungen anzupassen.

Nähere Infos zu Bootstrap und responsive Layouts gibt es hier.

Leave a Comment