Bootstrap ist ein kostenloses Framework zu Gestaltung von responsiven Benutzeroberflächen. Es werden HTML und CSS Vorlagen bereitgestellt um unterschiedlichste Website-Elemente darzustellen. Dazu gehören Formulare, Buttons, Tabellen, Navigation und ein Grid-System für Layouts. Desweiteren ist es durch optionale Javascript Module möglich Interaktion (z. B. eine Bilder-Slideshow) einfach in die eigene Website einzubinden. Zudem bietet Bootstrap alle Vorraussetzungen um responsive Webdesigns zu gestalten, die dann beispielsweise auf mobilen Endgeräten (wie einem Smartphone oder Pad) optimiert dargestellt werden.
Bootstrap wurde ca. 2010 von, bei Twitter angestellten, Entwicklern programmiert. Ziel war die Verbesserung von internen Verwaltungswerkzeugen, die zu der Zeit bei Twitter im Einsatz waren. Das Problem war, dass für die Gestaltung der Weboberflächen verschiedene Bibliotheken verwendet wurden. Demzufolge kam es zu Inkonsistenten und einem großen Wartungsaufwand.
Bootstrap sollte hier ein gemeinsame Basis schaffen, mit der alle Mitarbeiter arbeiten konnten, um Websites zu gestalten. Eine elementare Rolle bei der Entwicklung von Bootstrap spielte die Zusammenarbeit von Programmierern und Designer.
Im August 2011 entschloss sich Twitter dazu das Bootstrap Framework als Open Source Projekt zu veröffentlichen. Damit war der Siegeszug dieses ausgeizeichneten und leicht zu bedienenden Frameworks zur Webdesign-Gestaltung nicht mehr aufzuhalten.
Bootstrap ist modular aufgebaut und besteht aus den folgenden Teilen
- Grid-System und Responsives Design
- Grundlegendes CSS-Stylesheet
- wiederverwendbare Komponenten
- UI-Widgets für den Gebrauch “out of the box”
- optionale Javascript-Plugins
Ein Beispiel:
Du brauchst nur ein paar .col-md-*-Klassen, um ein grundlegendes Raster zu erstellen, dessen Spalten auf Smartphones und Tablets (extra-klein bis klein) übereinander und dann ab mittleren Bildschirmgrößen auf Desktop-PCs nebeneinander angeordnet sind. Platziere die Rasterspalten einfach in irgendeiner .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-4
.col-md-4
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
Allerdings:
Ist man viel im Netz unterwegs auf, fallen die häufig starken Ähnlichkeiten von auf Bootstrap basierenden Seiten auf. Legt man als Betreiber einer Webseite wert auf ein sehr individuelles Design, fallenentweder umfangreiche Anpassungen an Templates und CSS an, oder es bleibt nur oder eben der Verzicht auf Bootstrap und damit auch auf die zahlreichen Vorteile.
