+41 71 695 11 11 Phone Jobs Support Home
menu
Bootstrap und Co: das Wichtigste in Kürze
Bootstrap und Co: das Wichtigste in Kürze
Michael E. Nägeli
Michael E. Nägeli
Geschäftsführer
Zum Profil
Themen
Web

Bootstrap und Co: das Wichtigste in Kürze

CSS Frameworks als Grundlage für ein Responsive Design: das ist nichts Neues. Manchmal aber ist es gut, einen Schritt zurück zu treten und das Ganze etwas aus Distanz zu betrachten. Worum geht es bei Bootstrap und Co?

Gemäss Wikipedia handelt es sich bei solchen Frameworks um nicht mehr oder weniger als eine "Sammlung von Gestaltungselementen und Hilfsmitteln für einfaches und standardkonformes Web-Design mit CSS". Dies beinhaltet grundsätzlich folgende Elemente:

  • Grid-Gestaltungsraster als Grundlage für jedes erdenkliche Design/Layout
  • Unterstützung für Responsive Design (Anpassung des Designs aufgrund der Bildschirmgrösse)
  • Gestaltungselemente wie Buttons, Menüs, Akkordeons, Modalfenster, Icon-Sets und Formulare etc.
  • Javascript-Funktionalitäten mit und für diese Gestaltungselemente

Das Bootstrap-Framework

Das Bootstrap Framework wurde 2011 veröffentlicht und ist OpenSource. Es ist eines der meistgenutzten Projekte auf Github. Entstanden ist es als internes Projekt von Twitter für die Vereinheitlichung der Oberflächen von Verwaltungs- und Analyse-Werkzeugen - bis dahin war dies (auch bei Twitter) nicht standardisiert und entsprechend verschieden waren die Frontends der verschiedenen Web-Applikationen aufgebaut.

Zum Zeiptunkt beim Schreiben dieses Beitrags ist Bootstrap mit der Version 3.3.4 verfügbar. Da seit der Version 3 Firefox 3.6 und Internet Explorer 7 nicht mehr unterstützt werden, wird die Version 2 bislang nocht weiter gewartet.

Der Bootstrap-Grid

Nun zum Kern von Bootstrap: der Grid. Dieses Raster ist das wohl wichtigste Element von Bootstrap und besteht grundsätzlich aus 12 gleich breiten Spalten sowie Zeilen. Jedes Element des Frontends wird nun in diesen Raster einplatziert - dazu können die 12 Spalten flexibel eingesetzt werden. Breitere Elemente erhalten mehr Spalten zugeteilt, kleinere Elemente entsprechend weniger. Eine einfache Seite besteht z. B. aus 3 Zeilen: Header, Content und Footer. 

Dies ist der grundlegende Aufbau des Rasters und bildet damit die Grundlage des Responsive Designs. Denn die einzelnen Designelemente brechen nun, je nach verfügbarem Platz, automatisch um und füllen den verfügbaren Platz optimal aus.

Die Zuteilung der Anzahl Spalten zu einem Element erfolgt unter der Angabe von CSS-Klassen und sieht z. B. wie folgt aus:

<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>


Die Zuweisung der CSS Klassen erfolgt unter Angabe der Geräteklasse und Anzahl Spalten. Folgende Geräteklassen werden typischerweise unterschieden:

  • Extra Small Devices (<768 Pixel): Smartphones (xs)
  • Small Devices (>= 768 Pixel): Tablets (sm)
  • Medium Devices (>= 992 Pixel): Desktops (md)
  • Large Devices (>= 1200 Pixel): Large Desktops (lg)

Projekt-Start mit Bootstrap

Möchte man ein neues Projekt mit Bootstrap aufsetzen, so kann man dies beispielsweise wie folgt in Angriff nehmen.

  1. Download Bootstrap von getbootstrap.com
  2. Start mit HTML-Vorlage (es gibt eine Auswahl auf der Webseite von Bootstrap)
  3. Anpassung des HTML/CSS Templates auf das Design des Projekts
  4. Integration weiterer Plugins und Funktionalitäten, je nach Bedarf

Weitere Frameworks

Neben Bootstrap gibt es unter anderem noch folgende weitere Frontend Frameworks:

Fazit

Der Einsatz eines solchen Frontend Frameworks bringt viele Vorteile mit sich die man in der heutigen Welt nicht mehr missen möchte. Klar bringt ein Einsatz eines solchen Frameworks auch Umstellungen mit sich und gewohnte Arbeitsweisen müssen überdenkt und angepasst werden. Alles in allem aber lohnt sich der Aufwand und man wird mit vielen Automatismen und Hilfsmitteln "beschenkt" die man bald nicht mehr hergeben will.

Mirabit setzt, sofern anwendbar, grundsätzlich Bootstrap ein - dies aber nicht weil dieses besonders gut oder andere schlechter wären, sondern weil Bootstrap das erste eingesetzte Framework bei Mirabit war. Ebenso bauen viele der z. B. auf ThemeForest verfügbaren Themes ebenfalls auf Bootstrap auf