Was ist Bootstrap?

Bootstrap ist ein kostenloses Framework um Websites zu gestalten. 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 Twitter alle Vorraussetzungen um responsive Webdesigns zu gestalten, die dann beispielsweise auf mobilen Endgeräten (wie einem Smartphone oder Pad) optimiert dargestellt werden.

Die Geschichte von Bootstrap

Bootstrap Logo

 

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.

So funktioniert Bootstrap

Bootstrap basiert auf der Stylesheet-Sprache LESS, die einer Obermenge von CSS entspricht. D. h. jeder CSS-Befehl ist auch ein gültiger LESS-Befehl. Mit LESS lassen sich jedoch noch weiterere Programmierparadigmen umsetzen, wie z. B. Variablen, Schachtelung von Regeln sowie Funktionen und Operatoren, die mit CSS nicht möglich sind. Dies alles dient dazu, um Codewiederholungen im CSS-Code zu vermeiden. Weitere Informationen zu LESS gibt es auf lesscss.org.

Bei der Verwendung von Bootstrap wird aber auf die generierte CSS-Datei zugegriffen, die aus der Kompilierung der Bootstrap LESS-Dateien entstanden ist. Dies ist notwendig, weil die LESS-Dateien bisher nicht durch Webbrowser erkannt und aufgelöst werden.

Der Aufbau von Bootstrap

Bootstrap ist modular aufgebaut und besteht aus den folgenden Teilen

  • Grid-System und Responsives Design
  • Grundlegendes CSS-Stylesheet
  • wiederverwendbare Komponenten
  • optionale Javascript-Plugins

Grid-System und Responsives Design

Grid-System
Bootstrap Grid-System

Standardmäßig verwendet Bootstrap ein 12-spaltiges responsives Raster-Layout mit einer Breite von 940 Pixel. Es ist möglich ein festes oder variables Raster einzustellen. Die Anpassung für verschiedene Auflösungen (z. B. bei Handys) ist ebenfalls problemlos integrierbar.

Grundlegende CSS-Stylesheet

Bootstrap Grundlegendes CSS-Stylesheet

Fundamentale Gestaltungsvorlagen für alle wichtigen HTML-Komponenten sind hier enthalten. So kann systemübergreifend ein einheitliches Erscheinungsbild für Tabellen, Formulare und Texte gewährleistet werden. Die Nutzung der Stildefinitionen ist dabei durch die Angabe bestimmter CSS-Klassen sehr einfach durchführbar.

Wiederverwendbare Komponenten

Bootstrap Wierverwendbare Komponenten

Oft werden bei Websites viele Elemente, wie z. B. die Navigation, wiederverwendet. Um das Rad nicht jedes Mal neu zu erfinden, kann man einfach die, bei Bootstrap, mitgelieferten Komponenten verwenden.

Optionale Javascript-Plugins

Bootstrap Optionale Javascript-Plugins

Um eine weitere Interaktion auf der Website zu ermöglichen, z. B. Einbinden von Popup-Dialogen, bietet Bootstrap zusätzliche Plugins, die per Javascript eingebunden werden. Dabei kommt auf die bekannte Jquery-Bilbiothek zum Einsatz. Auf diese Weise lassen sich weitere Designprobleme (Tooltips, Tabs usw.) einfach lösen. Ohne die Verwendung einer zusätzliche Javascript-Bibliothek.

Fazit

Twitter hat mit Bootstrap ein mächtiges Framework zur einfachen und schnellen Erstellung konsistenter Websites bereitgestellt. Die freie Nutzung und ständige Weiterentwicklung macht Bootstrap für mich zu einem essentiellen Bestandteil beim Bau guter Websites.

Möchtest du Bootstrap lernen?

Habe ich dich ein bisschen Neugier gemacht und möchtest du mehr über Bootstrap erfahren?

Dann lade dir mein PDF-Tutorial zu Bootstrap herunter. Ideal geeignet für Einsteiger.

weiter zum Bootstrap E-Book

(c) Fotos:
Screenshots http://twitter.github.com/bootstrap/

Hast du eine Frage zu dieser Seite?
Fragen anderer Besucher zum Thema "Was ist Bootstrap?..."

Maggy fragt

Empfehlung für ein gutes Tutotial für Bootstrap-Neuling

Antwort von BootstrapWorld.de

Hallo Maggy,

hier kann ich dir mein Bootstrap E-Book als PDF-Download anbieten:

https://www.bootstrapworld.de/e-book.html

Dort wird noch Bootstrap 3 verwendet, jedoch arbeite ich bereits an einem ausführlichen Nachfolger für Bootstrap 4.

Viele Grüße

Andreas

Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK