Bootstrap
Bootstrap (deutsch: Ladeprogramm) ist ein Framework, das von Twitter intern entwickelt wurde, um Websites auf einer gleichbleibenden Basis zu gestalten. Das Open Source Projekt findet heute auch außerhalb von Twitter großen Anklang.
Bootstrap Logo (Quelle: Logonoid.com)
Entwicklung von Bootstrap
Ursprünglich wurde Bootstrap als internes Werkzeug für Twitter entwickelt, um der Nutzung unterschiedlicher Bibliotheken und der damit einhergehenden Inkonsistenz Einhalt zu gebieten. Als sich herausstellte, dass Bootstrap viel weitreichender genutzt werden konnte, veröffentlichte Twitter das Werkzeug im August 2011 als Open Source Projekt. Es steht über den Hosting-Dienst GitHub zur Verfügung und wird seit der Veröffentlichung konsequent von freien Entwicklern erweitert.
Funktionen von Bootstrap
Bootstrap basiert auf HTML 5 und CSS 3, arbeitet jedoch zusätzlich auch mit JavaScript. Darauf aufbauend können mithilfe dieser Sammlung von Hilfsmitteln Websites und Webanwendungen gestaltet werden. Es gibt Gestaltungsvorlagen für unterschiedlichste Elemente, darunter:
- Typografie und Hervorhebungen
- Formulare
- Buttons/Schaltflächen
- Icons
- Dropdown-Menüs
- Tabellen
- Navigationsmöglichkeiten
- Breadcrumbs
- Grid-System
- Pagination
- Labels und Badgets
- Prozessleisten
- Alarmfenster
Zusätzlich können mithilfe von JavaScript und jQuery verschiedene nützliche Funktionen für die Benutzeroberfläche umgesetzt werden, beispielsweise Tooltips, Tabbars, Carousels oder Modalfenster.
In diesem YouTube Video wird in einem Tutorial auf Deutsch erklärt, was Bootstrap ist.
Einsatz von Bootstrap
Bootstrap wurde ursprünglich dafür geschaffen, um das Frontend Websites zu gestalten. Inzwischen wird es allerdings auch genutzt, um das Backend von Websites aufzubauen und um Webapplikationen zu erstellen. Bootstrap wird häufig mit dem Begriff "Responsive Design" in Verbindung gebracht, da das Twitter Framework es ermöglicht, dass Benutzeroberflächen so dynamisch gestaltet werden, dass sie sich stets an das Format und die Displaygröße des jeweils verwendeten Endgeräts anpassen, ob Computer, Netbook, Tablet oder Smartphone.
Um Bootstrap nutzen zu können, muss es zunächst heruntergeladen und installiert werden. Auf der offiziellen Downloadseite kann der Nutzer entscheiden, ob er Bootstrap komplett oder anstelle dessen nur einzelne Teile des Frameworks laden möchte. Die heruntergeladene zip-Datei enthält je eine CSS- und eine JavaScript-Datei. Diese müssen anschließend in den Head-Bereich einer HTML-Seite eingebunden werden. Anschließend können die Spezifikationen von Bootstrap genutzt werden.
Vorteile von Bootstrap
Das Bootstrap Framework bringt eine Reihe von Vorteilen mit sich:
- Es eignet sich, um Responsive Designs umzusetzen.
- Es gibt ein großes Angebot an vorgefertigten Themes und Elementen, die direkt verwendet werden können.
- Das Framework lässt sich erweitern und anpassen.
- Das System ist logisch strukturiert und einfach umsetzbar.
- Es ist durch JavaScript und jQuery-Plugins erweiterbar.
- Es realisiert eine hohe Zeitersparnis durch vorgefertigte Komponenten.
- Bootstrap verfügt über eine hervorragende Kompatibilität zu verschiedenen alten und neuen Browsern.
- Der Wartungsaufwand ist im Vergleich zum Einsatz verschiedener Frameworks geringer.
Bedeutung für die Suchmaschinenoptimierung
Bootstrap ermöglicht es, die Ladezeiten von Websites zu verringern, da nur diejenigen Komponenten installiert werden müssen, die auch wirklich benötigt werden. Dies kann sich positiv auf das Ranking einer Website auswirken, da hier auch der Page Speed eine gewichtige Rolle spielt. Zudem vereinfacht Bootstrap die Generierung von sauberem Code und verbessert die User Experience des Nutzers auf einer Website.
Weblinks
- Bootstrap 3.1.0 released
- Ratgeber Webdesign Teil 1: So zaubern Sie Webseiten mit Bootstrap
- Twitter Bootstrap: Einführung in das CSS-Framework
- Bootstrap: 10 gute Gründe für das Open Source Framework von Twitter