Bootstrap 2: Twitters WebApp-Toolkit wird zur Plattform

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Im August letzten Jahres sah der Markt der CSS/HTML5-Frameworks einen Neuzugang. Aufsehenerregend daran war im Wesentlichen der Entwickler des Toolkits, denn Bootstrap wurde von Twitter zur Verfügung gestellt. Schon in der Version 1 war Bootstrap kompletter als viele andere Wettbewerber. Es kümmerte sich nicht, wie viele andere Frameworks, nur um Teilaspekte, sondern lieferte das ganze Spektrum von Arbeitserleichterungen auf einen Schlag.


Bootstrap: Einige Beispiele von Standardelementen

Seit dem Start hat Bootstrap rasant an Beliebtheit gewonnen, inzwischen ist die Version 2.0.2 auf dem Markt. Zudem entwickelte sich rund um Bootstrap eine Drittanbieter-Vielfalt, die schon fast den Begriff Plattform für das recht neue Framework rechtfertigt.

Bootstrap kurz erklärt

Es ist eine sehr umfangreiche Github-Page zu Bootstrap, auf der Twitter-Entwickler ausführlich die Möglichkeiten des Toolkit zeigen. Twitter bezeichnet seinen Werkzeugkasten als Toolkit für den Entwicklungs-Kickstart und in der Tat kümmern sich die Twitter-Developer um alle wesentlichen Aspekte beim Bau moderner Web Apps und Websites. Dabei unterstützt Bootstrap die gängigen Browser, seit der Version 1.1 sogar den IE 7 und 8. In der Version 2.0 setzt Bootstrap stark auf responsive Ansätze out of the box.

Bootstraps Kerntechnologien: Less und 960.gs

Die zugrundeliegenden Technologien, quasi die Basis von Bootstrap, dürften allen Webentwicklern bereits bekannt sein. So kann Bootstrap Anwendungslogik im CSS unterbringen, wozu es den CSS Preprocessor Less einbindet, den man als das Herzstück von Bootstrap bezeichnen kann.

Für das Layout, das hier klassisch als Grid umgesetzt wird, verwendet Bootstrap eine auf 940 Pixel Standardbreite reduzierte Variante des populären 960.gs. Der besondere Charme des 960.gs bleibt in Bootstrap voll erhalten. Dieser besteht nämlich in der simplen Syntax für die Definition von Spaltenlayouts, die ich nahezu als natürlich sprachlich bezeichnen würde. In diesem Beitrag für Dr. Web stellte ich 960.gs ausführlich vor.

Maximal 12 Spalten können mit Bootstrap definiert werden. Beliebige Vermischungen sind möglich, ein fließendes Layout lässt sich erstellen. Neuerdings dürfen auch Breiten wie ein Drittel und zwei Drittel definiert werden.


Bootstrap: Eines der offiziellen Designexamples, die Marketing-Website

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Typografie

Bootstrap kümmert sich um die Typografie der wesentlichen HTML-Elemente, bearbeitet jedoch keine komplexeren typografischen Aspekte, wie etwa das Setzen einer Baseline. Die Typografie dürfte aber für die allermeisten Anwendungsfälle ausreichend sein. Immerhin wurde Bootstrap im Wesentlichen für das Design des Twitterdienstes selber entwickelt und nicht für grafisch aufwändigere Sites, bei denen mit größerem Anspruch an Fragen der Typografie heran gegangen werden müsste. In Version 2.0 wurden einige Auszeichnungen neu definiert, dabei vor allem in der Größe reduziert.

Tabellen

Relativ ungewöhnlich für handelsübliche CSS-Frameworks kleineren Umfangs ist die Unterstützung von Tabellen. Hier bringt Bootstrap verschiedene einfache Designmöglichkeiten mit, die mit eingebauter jQuery-Unterstützung noch erweitert werden können. Besonders interessant finde ich die Option, Tabellenzeilen unter Angabe der Klasse “zebra-striped” farblich wechselnd anzulegen. Gerade dieser Task hat mir in der Vergangenheit schon recht viel Mühe gemacht.

In Version 2.0 implementiert Bootstrap die Notwendigkeit, Tabellen mit der Standardklasse .table anzusprechen. Tabellenklassen sind mit dem Prefix .table- zu versehen. Dieses Prefixing zieht sich bei Bootstrap durch alle Bereiche und sorgt so für mehr Übersicht und Eindeutigkeit in der Ansprache.

Formulare

Formularelemente stellt Bootstrap in mobiltauglicher Optik vor. So lassen sich Formulare mit einer Schaltfläche versehen, die deutlich an von Mobilplattformen bekannte Buttons erinnern. Bootstrap ist so für das mobile Webdesign zu gebrauchen. Mit der Version 2.0 flexibilisiert Bootstrap die Anlage und das Styling von Formularen weiter. Formularklassen sind mit dem Prefix .form- zu versehen. Seit Version 1.2 werden HTML5-Formulare voll unterstützt.

Hinsichtlich der Navigation legte sich Bootstrap in der Version 1 fest. Diese war als Topbar, also als obere horizontale Navigationsleiste fest konzipiert. Möglich war die Verwendung von Dropdown-Listen. Das Styling der Topbar war flexibel und konnte etwa so aussehen wie die Google+ Topbar, liess sich aber auch in Karteireiterform oder mit den bekannten Rounded Buttons anlegen. Eine schicke Paginierung am Fuß der Seite sorgte für Übersichtlichkeit auf Seiten mit viel Content.

In Version 2.x wird die bisherige Topbar nun zur neuen Navbar. Die Namensänderung war im Wesentlichen erforderlich, weil die Festlegung auf eine Topbar aufgegeben wurde. Die Navbar kann nun auch als Sidebar konzipiert werden. Wie in den anderen Bereichen kommt ein striktes Prefixing zum Einsatz, in diesem Falle .navbar, sowie .nav- für die enthaltenen Klassen.

Fehlermeldungen

Erwähnenswert ist der Umgang Bootstraps mit Fehlern und Meldungen. In einer an Verkehrsampeln angelehnten, sehr sprechenden farblichen Kodierung unterrichtet Bootstrap über Fehler unterschiedlichen Schweregrads.

Popovers, Lightboxes und Tooltips

Ebenfalls aus dem Bereich mobilen Webdesigns entlehnt sind verschiedene Möglichkeiten, Interaktionen und Meldungen über Popovers zu realisieren. Interaktive Elemente kann der Designer über Lightboxes einbringen. Tooltips und Popover-Boxes bringen Zusatzinfos unter, ohne das übrige Design zu stören.

Durch die Möglichkeit, jQuery in Bootstrap zu verwenden, ergibt sich eine wahre Plethora an Funktionserweiterungen, die auf der Unterseite “Javascript für Bootstrap” ausführlich vorgestellt wird. Für den Schnellstart stehen ein Dutzend sofort verwendbare Plugins für die wichtigsten Funktionalitäten bereit.

Icons als Sprite

Das moderne Iconset Glyphicons wird in heller, wie dunkler Ausführung mit Bootstrap geliefert. In Version 2.0 erfolgt das in Sprite-Form, um die Performance der erstellten Seiten zu steigern.

Je mehr Grafikdateien bei einer Website geladen werden müssen, desto länger dauert der Seitenaufbau. Denn jede zu ladende Datei verursacht einen HTTP-Request, der vom Server abgearbeitet werden muss. Gerade bei vielen kleinen Grafikdateien kann man diese Requests minimieren, indem man alle Grafiken in einer Datei vereinigt und jeweils nur Ausschnitte der Gesamtdatei als CSS-Sprite darstellt.

Wem die Glyphicons nicht gefallen, dem seien die Jigsoar-Icons ans Herz gelegt. Deren Entwickler legen großen Wert auf die Möglichkeit der Integration ihres Sets in Bootstrap. Jigsoar haben wir vor ein paar Tagen hier auf Dr. Web vorgestellt.

Bootstrap: Ein kleines Ökosystem entsteht

Wer sich einen Überblick über die Flexibilität des Toolkits am liebsten über real existierende Anwendungsbeispiele verschaffen mag, sollte den inoffiziellen Tumblr-Blog BuiltWithBootstrap besuchen. Der Betreiber hat Dutzende mehr oder minder beeindruckende Websites gelistet, denen allen eines gemeinsam ist. Sie wurden mit Bootstrap erstellt. Wer sein eigenes Projekt in der Übersicht verankert wissen will, kann über einen Submit-Button darauf aufmerksam machen.


OPA: Beispielwebsite, zu finden auf BuiltWithBootstrap

Wer es nicht beim Anschauen belassen, sondern sein eigenes Projekt, zunächst auf relativ geringem Skill-Level starten will, findet in den folgenden vier Angeboten gute Startpunkte.

StyleBootstrap.info: GUI für die Bootstrap-Entwicklung

StyleBootstrap.info ist eine Website, die eine grafische Oberfläche für Bootstrap bietet. So lässt sich eine Bootstrap CSS-Definition mit der Maus visuell zusammenklicken und herunterladen. Für den Anfang ist diese Methode sicherlich gut geeignet, eine etwa vorhandene Hemmschwelle zu senken, die zumindest bei mir stets vorhanden ist, wenn es sich in etwas Neues einzuarbeiten gilt.


StyleBootstrap: GUI für visuelles Bootstrap-Design

Bootswatch: Bootstrap-Templates simpel eingebunden

Die Website Bootswatch bietet eine Reihe freier Template-CSS-Files, die man herunterladen und gegen das Original-Bootstrap-File austauschen kann. Diese Templates werden vom Betreiber als Swatch bezeichnet. Die Zielsetzung der Seite ist nach eigenen Angaben, eine übermäßige Verbreitung des Standard-Bootstrap-Designs zu vermeiden.


Bootswatch bietet viele verschiedene Bootstrap-Templates zur freien Verwendung

WordPress Bootstrap: Freies Theme für die populäre Blog-Software

Das wird Bootstrap-interessierten WP-Selbsthostern gefallen. Auf der Basis der neuen Bootstrap-Version 2.x erstellten die Entwickler von 320press ein vollwertiges WordPress-Theme, das in der Lage ist, wiederum Themes aus Bootswatch einzubinden. Bootswatch-Themes werden aus dem Backend heraus unter den Theme Options ausgewählt. Die wichtigsten Vorteile Bootstraps, etwa die Responsivität bleiben laut 320press auch im WP-Theme voll erhalten. Die Nutzung ist kostenfrei.


WordPress Bootstrap: Kostenloses WP-Template auf Basis von Bootstrap 2

WrapBootstrap: Vollwertiger Marktplatz für Bootstrap-Designs

Zu guter Letzt sei noch WrapBootstrap erwähnt. Auf dieser Website können Boostrap-Designs gekauft, aber auch zum Kauf angeboten werden. Der Bestand wächst mit hoher Geschwindigkeit und bietet auch für anspruchsvolle Ästheten etliche sehr gelungene Layouts. Die Einbindung erfolgt wie bei den Swatches durch Austausch der entsprechenden Original-CSS-Dateien.


WrapBootstrap: Marktplatz für Premium-Bootstrap-Designs

(do)

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Sortiert nach:   neueste | älteste | beste Bewertung
Ingo
Gast

Sehr schöne Zusammenfassung! Fehlt nur noch das grandiose BootstrapWP von Rachel Baker: http://rachelbaker.me/bootstrapwp/

Zyko
Gast

Danke dass es Euch wieder gibt :-)
Hab die technischen Infos darüber was es so neues gibt in der HTML + Design Szene schon etwas vermisst.
Weitermachen :-)

trackback

[…] 2: Twitters WebApp-Toolkit wird zur Plattform – Dr. Web Magazin Dieter Petereitist diplomierter Absolvent des Studienganges Wirtschaftswissenschaften mit […]

wpDiscuz