Bootstrap

Aus Online Marketing Wiki
Wechseln zu: Navigation, Suche


Bootstrap ist ein von Twitter entwickeltes Framework, welches die Funktion hat Websites auf einer gleichbleibenden Basis zu gestalten. Es beinhaltet auf HTML und CSS basierende Gestaltungsvorlagen für Typografie, Formulare, Buttons, Tabellen, Grid-System, Navigations- und andere Oberflächengestaltungselemente sowie JavaScript -Erweiterungen.

Bootstrap wurde erst nur als internes Programm von Twitter entwickelt. 2011 veröffentlichte Twitter das Werkzeug als Open Source Projekt. Seit der Freigabe, wird es von freien Entwicklern laufend erweitert.

Funktionsweise:

Grundlage von Bootstrap bildet HTML und CSS3, zusätzlich arbeitet es auch mit JavaScript. Bootstrap bietet verschiedene Vorlagen an und deckt somit unterschiedlichste Elemente ab:

  • Buttons/ Schaltflächen
  • Icons
  • Formulare
  • Typografie und Hervorhebungen
  • Tabellen
  • Navigationsmöglichkeiten
  • Breadcrumbs
  • Grid-System
  • Pagination
  • Labels und Badgets
  • Prozessleisten
  • Alarmfenster

Funktionsweise und Aufbau

Grundgerüst: Grid-System und Responsives Webdesign

Das Grid-Layout ist standesgemäß mit 940 Pixel und zwölfspaltig, wobei auch eine variable Breite gewählt werden kann. Das Toolkit bietet vier Variationen des responsiven Design an, welche verschiedene Auflösungen und Gerätetypen bedienen: (Die Spaltenbreite passt sich der Fensterbreite an)

  • Mobiltelefon
  • Tablets (hoch- und querformat)
  • PC´s (geringe und hohe (Widescreen-)Auflösung

Grundlegendes CSS -Stylesheet

Durch die angebotenen Stylesheets, sind grundlegende Stildefinitionen für alle wichtigen HTML-Komponenten gesetzt. Ziel ist es, ein Browser- und systemübergreifend einheitliches, modernes Erscheinungsbild zu sichern.

Wiederverwendbare Komponenten

Bootsstrap bietet neben den regulären HTML-Elementen mehrere, häufig verwendete Oberflächenelemente. Dazu zählen z.B. Buttons mit erweiterten Funktionalitäten, Navigationselemente, Labels, besondere typografische Elemente usw..

JavaScript-Plugins

Die jQuery-Plugins, basierend auf dem JavaScript-Framework jQuery, ermöglichen weitere Unser-Interface-Elemente. Bsp.: Dialogfenster, Tooltips und Karussels. Zusätzlich haben sie erweiternde Funktionen vorhandener Oberflächenelemente z.B. eine Autovervollständigungs-Funktion im Eingabefeld.

Vorteile von Bootstrap

  • Das Framework kann erweitert und aktualisiert werden
  • Es gibt eine große Anzahl an vorgefertigten Formularen, die viele Elemente abdecken
  • Es eignet sich, um ein responsives Design umzusetzen
  • Das System ist logisch strukturiert und einfach umsetzbar
  • Erweiterbar durch JavaScript und jQuery-Plugins
  • Vorgefertigte Formulare führen zu einer hohen Zeitersparnis
  • Kompatibilität zu verschiedenen alten und neuen Browsern
  • Geringer Wartungsaufwand

Bedeutung SEO

Das Bootstrap kann positive Auswirkungen auf das Ranking einer Website haben. Grund dafür ist die Verringerte Ladezeit durch Bootstrap, da nur noch die benötigten Komponenten installiert werden müssen. Weitere positive Nebenerscheinungen von Bootstrap ist die Vereinfachung der Generierung von sauberen Codes, sowie die Verbesserung der User Experience des Nutzers auf einer Website.