Kurs:Neueste Internet- und WWW-Technologien/Twitter Bootstrap

Bootstrap ist ein Toolkit für das Erstellen von Webseiten in Form einer Style-Guildeline . Es baut auf aktuellen Webstandards wie HTML5 und CSS3 auf. Zur Entwicklung wurden weiterhin less.css und jQuery verwendet. Obwohl es sich um ein Open-Source Projekt handelt findet die Hauptarbeit bei Twitter Inc. statt. Die Hauptautoren von Bootstrap sind Mark Otto und Jacob Thornton.

Entwicklungsgeschichte

Bootstrap wird hauptsächlich bei Twitter Inc. durch Mark Otto und Jacob Thornton entwickelt. Mark Otto hat sich mit 1365 Commits in das Projekt eingebracht. Jacob Thornton hat sich mit 696 Commits eingebracht. Der erste Commit im öffentlichen Repository fand April 2011 statt. Seitdem wurden zwei Major-Releases veröffentlicht. Momentan scheint die Entwicklung etwas zu stagnieren, da seit Anfang Juli 2012 keine Commits veröffentlicht wurden. Bootstrap war ursprünglich ein internes Projekt bei Twitter Inc., um das Erstellen von grafischen Benutzerelementen zu vereinfachen und vereinheitlichen. Allerdings wurde das Projekt sehr ambitioniert geplant, so dass ein ganzes Framework daraus entstehen sollte. Dank der guten Planung und Projektorganisation blieb das Projekt allerdings nicht nur ein Wunschtraum. Auch die Zusammenarbeit eines Webdesigners und eines Software-Ingenieurs erwies sich als äußerst produktiv. Dank der Softwarelizenz Apache 2.0 steht der Quellcode des Projekts offen zur Verfügung. Auch dies mag dem Erfolg des Projekts sehr zuträglich geworden sein.

Wozu Twitter Bootstrap?

Bootstrap wird gern verwendet, um einer Webanwendung einen ersten Anstrich zu geben. Dabei kommt dem Entwickler zu Gute, dass es leicht zu benutzen ist und ausgezeichnet dokumentiert ist. Die Benutzung des Toolkits hat darüber hinaus weitere Vorteile für den Entwickler. Das Toolkit nimmt es ihm ab die Anwendung auf verschiedene Browser zu optimieren, da es dies bereits gewährleistet, sofern die gesamte Benutzeroberfläche mit dem Framework verwirklicht wird. Wenn das Frontend der Anwendung aber weiteren Javascript-Code oder andere Technologien beinhaltet, so gewährleistet Bootstrap keine Cross-Browser-Kompatibilität. Der Entwickler kann auf eine große Menge von bereits enthaltenen und kombinierbaren UI-Elementen zurückgreifen. Damit findet die Entwicklung eines Web-Frontends auf einer höheren Abstraktionsstufe statt, so dass auch Anfänger auf den Gebieten HTML und CSS schon sehr ansehnliche Ergebnisse erzielen können. Zu großen Teilen beschränkt sich das Erstellen der Benutzeroberfläche auf das Komponieren einfacher HTML-Elemente mit speziell ausgezeichneten Klassen. Auch mit Hilfe der ausgezeichneten Dokumentation kann man schnell einsteigen und Weboberflächen erstellen. Eine weitere Problematik an die die Entwickler von Bootstrap bereits gedacht haben sind verschiedene Bildschirmgrößen. Heutzutage werden immer häufiger Smartphones genutzt, um im Web zu surfen. Eine Webseite auf solch kleine Bildschirme, wie von Smartphones, sowie auf große Bildschirme von Desktop-Computern, und auf alle Bildschirmgrößen dazwischen, wie von Tablets und Notebooks, anzupassen ist ein Balanceakt, den die Bootstrap-Entwickler schon für ihre Benutzer gemeistert haben.

Ähnliche Frameworks

Natürlich gibt es Frameworks, die ähnliche Aufgaben abdecken. Darunter ist beispielsweise Blueprint . Das Projekt wurde im August 2007 begonnen. Seit Juni 2011 fand allerdings keine nennenswerte Entwicklung statt. Es enthält ebenfalls einen CSS-Reset, um die Standardformatierungen der verschiedenen Browser zu vereinheitlichen. Außerdem bietet es, genauso wie Bootstrap auch, ein Rastersystem, um Elemente auf einer Seite bequem anzuordnen. Des weiteren formatiert das Blueprint-Framework typographische Elemente, sowie Formulare, um einen klaren und ansehnlichen Stil zu konstruieren. Ebenfalls werden einige Bedienelemente, wie Buttons, mitgeliefert. Das Framework bringt darüber hinaus auch ein Stylesheet für den Druck einer Webseite mit. Die mit diesem Framework erstellten Seiten passen sich allerdings nicht automatisch an verschiedene Bildschirmgrößen an. Da es in reinem CSS implementiert ist, ist der Quellcode auch längst nicht so elegant, wie der von Bootstrap. Darüber hinaus nutzt es nicht die vielen neuen Features von HTML5 und CSS3.

less.css und jQuery

Bootstrap ist in less.css geschrieben. Somit hat man die Wahl, ob man den Quelltext im Browser des Nutzers zu CSS übersetzen lässt oder es vorher selbst tut und das kompilierte CSS an den Nutzer der Webseite ausliefert. Außerdem lässt sich durch less.css knapp formulieren wie sich das Design zu verhalten hat. Dazu kann man mehr auf der Kursseite zu less.css lesen. Mit jQuery wurden in Bootstrap einige der aktiveren Komponenten umgesetzt. Darunter sind Dropdown-Menüs und Popover-Elemente. Das Verhalten solcher Elemente wurde über jQuery-Plugins realisiert. Mehr dazu kann man auf der jQuery-Kursseite erfahren.

Benutzung

Im Folgenden wird gezeigt, wie man eine Webseite mit Bootstrap erstellen kann. Dabei handelt es sich jedoch nicht um eine Schritt für Schritt Anleitung. Es geht vielmehr darum, dass gezeigt wird, wie man einzelne Elemente erstellt. Ein grundsätzliches Verständnis von HTML wird also vorausgesetzt.

Einbindung

Es empfiehlt sich die Quellen direkt von der Projektwebseite herunter zu laden. In dem zip-Archiv das man erhält befinden sich drei Ordner, die css, img und js benannt sind. Im Ordner css befinden sich die kompilierten less.css Dateien in normaler und minimierter Form. Wenn man die unkompilierten less-Dateien haben möchte, dann muss man das Repository auschecken oder ein Archiv von der Projektwebseite herunterladen. Um jedoch eine CSS-Datei einzubinden verwendet man den HTML-link-Tag. Das folgende Beispiel illustriert dies.

<head>
	...
	<link href="path/to/css/bootstrap.css" rel="stylesheet">
	...
</head>

Für animierte Elemente wird unter Umständen jQuery, das jQuery-Bootstrap-Plugin (im Download enthalten) und das entsprechende Bootstrap-Plugin, das man noch von der Projektwebseite laden muss, benötigt. Für die verschiedenen Möglichkeiten jQuery einzubinden empfiehlt es sich den jQuery-Artikel dieses Kurses zu konsultieren. Das jQuery-Plugin zu Bootstrap ist jedoch im Download enthalten und kann folgendermaßen eingebunden werden.

<head>
	...
	<script src="path/to/js/bootstrap.js"></script>
	...
</head>

Layouts

12-Zellen-Raster

12-Zellen-Raster in schmaler Ansicht

12-Zellen-Raster bei dem unterschiedliche Abstände genutzt wurden

12-Zellen Grid in dem die Elemente verschachtelt wurden

Bootstrap gibt dem Nutzer im Standardfall ein 940 Pixel breites 12-Zellen Layout an die Hand, mit dem Inhalte auf der Seite platziert werden können. Wird die Seite auf einem größeren Bildschirm dargestellt, so kann sich die Größe auch auf 1170 Pixel erweitern. Mobile Seiten mit sehr geringer Breite werden so dargestellt, dass alle Elemente einer Zeile vertikal untereinander angezeigt werden und jede Zeile anstatt dessen zusammengefasst dargestellt wird. Um ein einfaches Raster wie das gezeigte zu erstellen braucht man zuerst einen div-Container der Klasse row, der gewissermaßen das Raster für eine Zeile aufspannt.

<div class="row">
	// Elemente der Zeile
</div>

In dieses div kann man nun die einzelnen Elemente der Zeile einfügen. Dabei werden wieder div-Elemente benutzt, die eine Klasse spanX (wobei X eine Zahl von 1 bis 12) bekommen. Die Zahl hinter am Ende des Klassennamens bestimmt dabei die Breite in Rasterzellen, die das Element haben soll.

<div class="span1">
	// Inhalt des Elements
</div>
...
<div class="span2">
	// Inhalt des Elements
</div>

Darüber hinaus ist es auch möglich einem Element einen größeren Abstand als den voreingestellten Zellenabstand des Rasters zu vergeben. Dieser Abstand wird ebenfalls in Rasterzellengrößen angegeben. Um einem Element einen Abstand zu vergeben wird die Klasse offsetX (wobei X wieder eine Zahl von 1 bis 11 ist).

<div class="span1 offset1">
	// Inhalt des Elements
</div>
...
<div class="span2 offset5">
	// Inhalt des Elements
</div>

Darüber hinaus ist es möglich Elemente im Raster zu verschachteln. Dabei wird jedoch nicht immer wieder ein neues 12-Zellen-Raster aufgespannt. Vielmehr kann man ein Element über mehrere Zellen definieren und hat innerhalb des Elements wieder so viele Zellen zur Verfügung, wie das übergeordnete Element breit ist. Das kann beispielsweise folgendermaßen aussehen.

<div class="row">
	<div class="span6 offset2">
		<div class="row">
			<div class="span2">
				// Inhalt des Elements
			</div>
			<div class="span2">
				// Inhalt des Elements
			</div>
			<div class="span2">
				// Inhalt des Elements
			</div>
		</div>
	</div>
	...
</div>

Im Beispiel wird ein Element der Breite 6 erstellt und dieses enthält dann wiederum 3 Elemente der Breite 2.

Typographie

Typographische Elemente

Natürlich bringt Bootstrap auch Stile für typographische Elemente mit. Einige interessante und oft verwendete Elemente werden hier vorgestellt.

Ein Seitenkopf erstellt man indem man das header-Tag verwendet. In diesem Tag kann man nun die eigentliche Überschrift in ein h1-Tag kapseln. Einen Aufmacher kann man in das Absatz-Tag p mit der Klasse lead verpacken. Der im Beispielbild zu sehende Seitenkopf würde also folgendermaßen erzeugt werden.

<header>
	<h1>Typographie Beispiel</h1>
	<p class="lead">
		Terry richardson mustache keffiyeh ennui gastropub +1. Ennui blog fap chillwave kogi selvage. Butcher fap irony cray chillwave biodiesel.
	</p>
</header>

Weiterhin macht Bootstrap Gebrauch vom section-Element. Die semantische Bedeutung dieses Elements ist die Kapselung eines Abschnitts. Um eine Sektion ansprechend zu gestalten braucht man eine Überschrift und einen Inhaltsteil. Dies wird in Bootstrap über zwei div-Elemente mit speziellen Klassen realisiert. Das div mit der Klasse page-header beherbergt die Sektionsüberschrift. Dort kann man eine h1-Überschrift hinterlegen die dann als Sektionsüberschrift fungiert. Das inline-Element small kann für Untertitel genutzt werden. Beispielhaft kann eine Überschrift folgendermaßen gestaltet werden.

<div class="page-header">
	<h1>Sektion 1 <small>mit einem Untertitel</small></h1>
</div>

Der Inhaltsteil des Abschnitts kann zum Beispiel in ein Raster verpackt werden, um ein mehrspaltiges Layout zu implementieren. Dabei ist jedes div mit der Klasse spanX (wobei X wieder eine Zahl von 1 bis 12 ist) eine Spalte. Für ein zweispaltiges Layout, bei dem beide Spalten gleich breit sein sollen, erstellt man sich also zwei div-Elemente mit der Klasse span6.

<div class="row">
	<div class="span6">
		<h2>Eine Subsektion</h2>
		<p>
			// viel Text
		</p>
		<blockquote>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
			<small>Someone famous</small>
		</blockquote>
		...
	</div>
	<div class="span6">
		<h2>Eine andere Subsektion</h2>
		<p>...</p>
		<address>
			<strong>Twitter, Inc.</strong><br>
			795 Folsom Ave, Suite 600<br>
			San Francisco, CA 94107<br>
			<abbr title="Phone">(123) 456-7890</abbr>
		</address>
		<p>...</p>
		...
	</div>
</div>

Natürlich kann man die Spaltenanzahl und breite auch variierten, so dass man zum Beispiel ein dreispaltiges Layout erzeugt, bei dem die erste Spalte schmaler ist als die beiden anderen. Diese Eigenschaften lassen sich über das Verhältnis der Breite der verschiedenen Elemente in dem Raster steuern. In dem obigen Beispiel finden sich aber noch weitere typographische Elemente. Unter diesen ist auch das blockquote-Tag. In diesem Element kann man Zitate verpacken. Was man mit Bootstrap lediglich tun muss, ist das Zitat, in ein Absatz-Element verpackt, und den Urheber, in ein small-Element verpackt, zu dem blockquote-Element hinzuzufügen. Auch der Bindestrich wird von Bootstrap über die CSS-Regel blockquote small::before {content: '— 014 \00A0'} hinzugefügt. Weitere Elemente sind beispielsweise das address-Tag, mit dem man Adressen auf eine ansprechende Art und Weise auf eine Webseite bekommt.

Tabellen

Tabellen in Bootstrap

Auch Tabellen erhalten mit Bootstrap ein ansprechendes Design. Im Folgenden werden vier grundsätzliche Möglichkeiten vorgestellt, wie man Tabellen mit Bootstrap aufwertet.

Das grundsätzliche Tabellenlayout in Bootstrap sieht so aus, dass unter dem table-Tag die Tags thead und tbody stehen. Dem table-Element wird zusätzlich noch die Klasse table gegeben, um ein grundlegendes Aussehen hinzuzufügen. Auf diese weise ist es weiterhin möglich eine Tabelle zum anordnen von Elementen zu nutzten, auch wenn das nicht mehr gängige Praxis ist. Ein einfaches Beispiel könnte also folgendermaßen aussehen.

<table class="table">
	<thead>
		<tr>
			<th>#</th>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Publication Title</th>
			<th>Institute</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td>Dan</td>
			<td>Ingalls</td>
			<td>Lively Kernel is insanely great</td>
			<td>SAP Research</td>
		</tr>
		<tr>
			<td>2</td>
			<td>Christoph</td>
			<td>Meinel</td>
			<td>How the Internet works</td>
			<td>Hasso Plattner Institut</td>
		</tr>
		...
	</tbody>
</table>

Die im Beispiel dargestellte Tabelle wird durch hinzufügen der Klasse table folgendermaßen stilisiert: Der Tabellenkopf wird in fetter Schrift dargestellt. Die einzelnen Tabellenzeilen werden durch einen grauen Strich visuell voneinander getrennt. Außerdem werden die einzelnen Zeilen der Tabelle beim Herüberfahren mit der Maus (englisch: to hover) in einer dunkleren Farbe zur Hervorhebung eingefärbt. Neben der Basisklasse für Tabellen kann man noch weiter Klassen benutzen, um das Aussehen von Tabellen zu verändern. So kann man mit der Klasse table-border einen Rand um die Tabelle zeichnen lassen. Die Klasse table-striped ist dafür zuständig, dass die Tabellenzeilen abwechselnd in zwei verschiedenen Farben dargestellt werden, um die Lesbarkeit der Tabelle zu erhöhen. Schließlich gibt es noch die Klasse table-condensed die dafür verantwortlich ist eine Tabelle etwas kompakter und platzsparender darzustellen. Selbstverständlich kann man all diese Klassen zu einer Tabelle hinzufügen, um die verschiedenen Darstellungsarten zu kombinieren. Da nichts an der weiteren Struktur der Tabelle angepasst werden muss, kann man so sehr einfach Tabellen unterschiedlich darstellen. Das Beispiel bei dem alle vorgestellten Darstellungsarten genutzt werden sieht im Prinzip genauso aus, wie das vorherige beispiel, nur dass alle anderen Klassen ebenfalls zum table-Tag hinzugefügt werden.

<table class="table table-border table-striped table-condensed">
	...
</table>

Formulare

Fomulare in Bootstrap

Selbstverständlich werden auch Formulare im Design von Bootstrap beachtet. So kann man beispielsweise kleine Formularboxen, wie ein Anmeldefomular mit Nutzername und Passwort, auch visuell zu einer Einheit zusammenfassen indem man dem Formular die Klasse well vergibt. Das form-Element wird daraufhin mit grauem Hintergrund und etwas eingestanzt dargestellt. Möchte man nun, dass das beispielhafte Anmeldeformular in einer Zeile dargestellt wird, so verwendet man einfach die Klasse form-inline. Diese kleine Beispiel sähe folgendermaßen aus.

<form class="well form-inline">
	<input type="text" class="input-small" placeholder="Email">
	<input type="password" class="input-small" placeholder="Password">
	<label class="checkbox">
		<input type="checkbox"> Remember me
	</label>
	<button type="submit" class="btn">Sign in</button>
</form>

In diesem Beispiel wird auch noch ein weiteres HTML5-Attribut (placeholder) benutzt, um die Eingabefelder mit einem Standardtext zu belegen. Natürlich werden auch alle weiteren Standardelemente in Formularen entsprechend stilisiert, um ein konsistentes Nutzerinterface zu erstellen. Darüber hinaus kann man auch den Status eines Formularelements über eine CSS-Klasse in Bootstrap steuern. Mit der Klasse focused kann man ein Element als fokussiert darstellen. Die Klasse uneditable-input macht das Element uneditierbar. Mit der Klasse disabled kann man ein Element komplett deaktivieren. Im folgenden Beispiel werden die Klassen exemplarisch benutzt.

...
<input class="focused" id="focusedInput" type="text" value="Dieses Element ist fokusiert…">
<span class="uneditable-input">Hier steht ein nicht editierbarer Text</span>
<input class="disabled" id="disabledInput" type="text" placeholder="Dieses Element ist ausgeschaltet…" disabled="">
...

Die Größe von Formularelementen lässt sich auf verschiedene Weisen anpassen. Zum einen kann man dem entsprechenden Element eine Klasse nach dem bekannten Schema spanX (wobei X hier wieder eine Zahl von 1 bis 12 ist) geben. Man kann jedoch auch die Klassen input-mini, input-small, input-normal, input-large (sowie input-xlarge, input-xxlarge) verwenden, um dem gewünschten Formularelement eine Größe zu vergeben. Häufig wird in einem Formular zu jedem Eingabeelement für das Formular auch ein entsprechender Bezeichner hinzugefügt, damit der Benuzter weis, was er oder sie in das Feld einzutragen hat. In Bootstrap kann man beides zu einer Kontrollgruppe zusammensetzen, indem man ein div-Element mit der Klasse control-group instrumentalisiert. Innerhalb dieses Elements kann man nun ein label-Tag dazu verwenden die entsprechende Bezeichnung darzustellen. Das Eingabeelement kapselt man wiederum in ein div mit der Klasse controls. In diesem div lassen sich selbstverständlich auch mehrere Eingabefelder und entsprechende Hilfetexte zusammenfassen. Die Hilfetexte stellt man am Besten mit dem inline-Element span, dem man die Klasse help-inline vergibt, dar. Bootstrap bringt darüber hinaus schon fertige Validationsstile für Fomularelemente mit. Diese können ebenso einfach verwendet werden, indem man die entsprechende CSS-Klasse zum gewünschten Element hinzufügt. So kann man beispielsweise einfach die Klassen warning, error und success zu einer Kontrollgruppe hinzufügen, um die ganze Gruppe entweder gelb, rot oder grün darzustellen. Ein weiteres Feature ist das Anhängen von Text (vor oder hinter das Formularfeld), um beispielsweise auszudrücken, dass es sich um eine bestimmte Währung in ganzen Zahlen handelt. Um dies zu nutzen verpackt man das entsprechende Formularelement in einen div-Containter mit der Klasse input-prepend (für das Voranstellen von Text) oder der Klassen input-append (für das Anfügen von Text). Der anzufügende Text muss dann noch in ein span-Element mit der Klasse add-on verpackt werden und entsprechend vor oder hinter dem entsprechenden Element stehen. Das folgende Beispiel zeigt die gleichzeitige Benutzung der Voranstellung und dem Anhängen von Text.

<div class="input-prepend input-append">
	<span class="add-on">$</span>
	<input class="span2" id="appendedPrependedInput" size="16" type="text">
	<span class="add-on">.00</span>
</div>

Das Voranstellen und Anhängen funktioniert ebenfalls mit Buttons. Dazu ersetzt man das span-Element mit einem button-Element. Um klar darzustellen mit welchem Eingabefeld man das Formular absendet und mit welchem löscht empfielt es sich eine sogenannte Formaction hinzuzufügen. Das ist auch wieder nur ein div-Container mit einer speziellen Klasse namens form-actions. Zu diesem Container fügt man nun die jeweiligen Buttons zum absenden und abbrechen hinzu. Gibt man dem button-Element zum Absenden nun noch die Klasse btn-primary, dann wird dieser auch in einem auffälligerem blau dargestellt. Natürlich sind auch weitere Aktionsknöpfe in dieser Aktionsgruppe denkbar. Die Gruppe selbst wird mit einem horizontalen Strich von dem Rest des Formulars getrennt und hebt sich durch ihren gräulichen Hintergrund ab. Ein einfaches Beispiel sieht folgendermaßen aus.

<div class="form-actions">
	<button type="submit" class="btn btn-primary">Absenden</button>
	<button class="btn">Cancel</button>
</div>

Zu Buttons kann man mehr in der entsprechenden Sektion erfahren.

Buttons

Viele verschiedene Buttons

Bootstrap bringt eine ganze Reihe von verschiedenen Buttonstilen mit. Die Stile haben wieder eines gemeinsam. Zur Verwendung ist es lediglich notwendig einem button-Element eine entsprechende Klasse zu geben. Die Basisklasse für einen stilisierten button ist btn. Außer dieser Klasse gibt es noch weitere, um dem Button eine gewisse Semantik zu geben. Diese Klassen werden jeweils mit der Basisklasse zusammen zu einem Element hinzugefügt. So gibt es die Klasse btn-primary, um zu zeigen, dass der Button eine wichtige Aktion ausführt. Die Klasse btn-info suggeriert, dass sich eine Auskunft hinter dem Button verbirgt. Die Klassen btn-warning, btn-danger und btn-success drücken entsprechend eine Warnung, eine Gefahr oder einen Erfolg aus. Mit der Klasse btn-inverse kann man die Farben des Buttons invertieren. All diese Klassen für eine erweiterte Bedeutung sind nicht miteinander kombinierbar.

<button class="btn" href="#">Default</button>
<button class="btn btn-primary" href="#">Primary</button>
<button class="btn btn-success" href="#">Success</button>
...
<button class="btn btn-inverse" href="#">Inverse</button>
...

Es ist außerdem möglich die Größe von Buttons mit Hilfe von speziellen Klassen zu steuern. Dazu verwendet man die Klassen btn-mini, btn-small und btn-large. Diese Eigenschaft ist wiederum mit der Semantik kombinierbar. Um Buttons die zusammen gehören auch visuell zusammen zu fassen kann man sie als Buttongruppe darstellen. Dazu kapselt man die einzelnen Buttons wieder in einen div-Container, dem man die Klasse btn-group gibt. Das sichtbare Element ist dann ein in mehrere Teile unterteilt, sieht aber wie ein Element aus. Folgendes Beispiel illustiert, wie das im HTML-Quelltext aussieht.

<div class="btn-group">
	<button class="btn">Links</button>
	<button class="btn">Mitte</button>
	<button class="btn">Rechts</button>
</div>

Möchte man mehrere Buttongruppen zu einer Einheit zusammenfügen, so kann man das mit Hilfe von Botton-Toolbars machen. Eine Button-Toolbar ist, analog zur Buttongruppe, wieder nur ein div-Element. Diesmal bekommt es die Klasse btn-toolbar. Darin enthalten sind mehrere div-Elemente mit der Klasse btn-group. Jede Buttongruppe wird weiter als eigene visuelle Einheit dargestellt. Die Eigenschaft der Aggregation von Buttons lässt sich selbstverständlich mit den Eigenschaften der Semantik und Größe kombinieren, obwohl es in den meisen Fällen nicht empfehlenswert ist unterschiedlich große Buttons zu einer Gruppe zusammen zu fassen. Ein weiteres Feature von Buttons in Bootstrap sind Dropdown-Listen. Um diese zu verwenden erstellt man sich, wie gewohnt, einen Button, der auch die gewohnten Eigenschaften, wie Größe und Semantik haben kann. Zu diesem Button fügt man zusätzlich die Klasse "dropdown-menu" und das Attribut data-toggle: dropdown hinzu. Um den Nutzer einen Hinweis zu geben, dass dieser Button ein Dropdown-Menü öffnet kann man einen kleinen Pfeil hinzufügen, indem man in das button-Tag, neben der Beschriftung des Buttons noch ein span-Element mit der Klasse caret hinzufügt. Der Inhalt des Dropdown-Menüs muss in eine unsortierte Liste mit der Klasse dropdown-menu eingetragen werden. Das folgende Beispiel zeigt, wie man einen solchen Button erstellt.

<button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button>
<ul class="dropdown-menu">
	<li><a href="#">Action</a></li>
	<li><a href="#">Another action</a></li>
	<li><a href="#">Something else here</a></li>
	<li class="divider"></li>
	<li><a href="#">Separated link</a></li>
</ul>

Man kann das Dropdown-Menü aber auch von dem Button lösen. Dazu verwendet man die bereits bekannte Buttongruppe. In der Gruppe erstellt man einen Button für die eigentliche Aktion und einen für das Dropdown-Menü. Auf diese Weise kann man beide Funktionalitäten in einem visuellen Element zusammen fassen. Um das Dropdown-Menü funktionieren zu lassen wird noch weiterer Javascript-Quellcode benötigt. Den Code bekommt man selbstverständlich ebenfalls von der Projektwebseite. Außerdem muss das jQuery-Plugin von Bootstrap vor der Einbindung des Dropdown-Plugins eingebunden werden.

Icons

Icons von Glypicons

Icons werden von Bootstrap als Sprites bereit gestellt. Ein Sprite ist ein großes Bild indem viele einzelne Bilder in einem festen Pixelraster angeordnet sind. Der offensichtliche Vorteil ist, dass man nur ein Bild in die Webseite für alle Icons einbinden muss. Dadurch muss auch nur ein request für die Bilder beantwortet werden. Die Webseite ist also leichter zu warten, da es nur ein Icon-Bild und nicht hunderte gibt, und außerdem ist sie ein wenig schneller. Ein Nachteil aus dem Sprite ergibt sich nur, wenn man lediglich ein Bild aus der Bildersammlung braucht, dann wird viel mehr eingebunden als man braucht.

Ein Sprite funktioniert so, dass die einzelnen Positionen im Bildraster mittels CSS angesprungen werden. Jeder Sprungmarke wird in Bootstrap dabei eine semantisch sinnvolle Klasse zugeordnet. Auf diese Weise kann man beispielsweise das inline-Element i benutzen, um ein Icon einzubinden, indem man ihm eine konkrete Klasse, wie zum Beispiel icon-print (für einen kleinen Drucker), gibt. Außer dem i-Tag können auch andere inline-Elemente instrumentalisiert werden, um Icons darzustellen. So kann man also auch die Tags a, span, b und weitere Verwenden. Die Icons, die standardmäßig zu Bootstrap mitgeliefert werden, stammen von Glyphicons .

Navigation

Navigationselemente in Bootstrap

Auch an mitgelieferten Navigationselementen fehlt es nicht in Bootstrap. Ein markantes Element ist die Navigationsleiste. Diese besteht aus einigen div-Containern, die ineinander geschachtelt sind. Innerhalb der Navigationsleiste gibt es einige besondere Elemente. So kann man zum Beispiel mit einem a-Tag mit der Klasse brand einen Seitentitel hinzufügen. Einzelne Elemente in der Navigationsleiste kann man zu Listen zusammenfassen indem man sie in einer unsortierten Liste mit der Klasse nav aufzählt. Gibt man dem Listenelement die Klasse dropdown-toggle und das Attribut data-toggle="dropdown", so kann man analog zu Buttons auch Dropdown-Menüs in der Navigationsleiste verwirklichen. Ein Suchfeld kann man mittels eines Formulars der Klasse navbar-search erstellen. Das Formular muss selbstverständlicherweise auch ein input-Element enthalten. Dieses bekommt die Klasse search-query. Um Elemente möglichst flexibel anzuordnen gibt es noch die Klassen pull-left und pull-right, um ein Element links- oder rechtsbündig hinzuzufügen. Das folgende Beispiel illustriert, wie solch eine Navigationsleise in HTML-Quelltext aussehen kann.

<div class="navbar">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="#">Projektname</a>
			<div class="nav-collapse">
				<ul class="nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							Dropdown 
							<b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li class="divider"></li>
							<li><a href="#">Another action</a></li>
						</ul>
					</li>
				</ul>
				<form class="navbar-search pull-left" action="">
					<input type="text" class="search-query span2" placeholder="Search">
				</form>
				<ul class="nav pull-right">
					<li><a href="#">Link</a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

Ein weiteres häufig verwendetes Element ist die Breadcrumb. Diese wird in Bootstrap mit einer unsortierten Liste erstellt, die die Klasse breadcrumb bekommt. Die Listenelemente sind die einzelnen Pfadteile. Ein Trennzeichen fügt man am Besten mit dem inline-Element span und der Klasse divider hinzu. Folgend ist ein Beispiel für eine solche Breadcrumb dargestellt.

<ul class="breadcrumb">
	<li>
		<a href="#">Home</a> <span class="divider">/</span>
	</li>
	<li>
		<a href="#">Library</a> <span class="divider">/</span>
	</li>
	<li class="active">Data</li>
</ul>

Auch Elemente zur Seitennavigation werden häufig beim Erstellen einer Webseite gebraucht. Bootstrap bietet hier einen einfachen Pager und eine Seitennummerierung an. Der Pager besteht aus zwei Buttons zum Vor- und Zurückblättern. Realisiert wird dieser mit einer ul-Liste mit der Klasse pager. Die beiden Buttons sind einfache Links in einem Listenelement verpackt, das die Klasse previous respektive next bekommt. Die Seitennummerierung funktioniert auf ähnliche Weise. Hier handelt es sich allerdings um ein div-Container mit der Klasse pagination. Dieser enthält ebenfalls eine Liste mit Elementen, um die einzelnen Zeiten zu bezeichnen. Nachfolgend sind für beide Varianten einer Seitennavigation Beispiele angegeben.

<div class="pagination">
	<ul>
		<li><a href="#">Prev</a></li>
		<li class="active">
			<a href="#">1</a>
		</li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">Next</a></li>
	</ul>
</div>
...
<ul class="pager">
	<li class="previous">
		<a href="#">← Older</a>
	</li>
	<li class="next">
		<a href="#">Newer →</a>
	</li>
</ul>

Ein weiteres häufig verwendetes Navigationselement sind Tableisten. Auch diese können mit einer ul erstellt werden, indem man dieser die Basisklasse nav und die Klasse nav-tabs gibt. Jedes Listenelement ist dann ein einzelner Tab. Man kann die Tabs auch als kleine Pillen darstellen lassen indem man anstatt nav-tabs zu verwenden nav-pills verwendet. Darüber hinaus kann man sowohl die Pillen als auch die Tabs vertikal übereinander stapeln lassen indem man zusätzlich die Klasse nav-stacked hinzufügt. Selbstverständlich kann man auch zu den Tab- und Pillenelementen ein Dropdown-Menü hinzufügen. Dies funktioniert analog zu den Buttons. Folgend wird ein Beispiel gezeigt, wie man ein solches Navigationselement erstellen kann.

<ul class="nav nav-tabs">
	<li class="active">
		<a href="#">Home</a>
	</li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
</ul>

Schließlich kann man auch Menüs erstellen, indem man einen div-Container mit der Klasse well versieht. Analog zu den Formularen wird der Container nun mit grauem Hintergrund und etwas eingestanzt dargestellt. In diesen Container kann man nun eine einfache Navigationsliste, mittels ul mit den Klassen nav und nav-list, kapseln. Das folgende Beispiel zeigt den Quelltext eines einfachen, doch schon recht ansehnlichen Menüs.

<div class="well" style="padding: 8px 0;">
	<ul class="nav nav-list">
		<li class="nav-header">List header</li>
		<li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
		<li><a href="#"><i class="icon-book"></i> Library</a></li>
		<li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
		<li class="nav-header">Another list header</li>
		<li><a href="#"><i class="icon-user"></i> Profile</a></li>
		<li><a href="#"><i class="icon-cog"></i> Settings</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="icon-flag"></i> Help</a></li>
	</ul>
</div>

Schlussworte

Dank der guten Planung ist bei dem Projekt Bootstrap ein solides Produkt heraus gekommen. Die Entscheidung es unter eine Open-Source-Lizenz zu stellen und der Fakt, dass der Code auf der populären Plattform GitHub bereitgestellt wird, haben wahrscheinlich erheblich zum Erfolg des Projekts beigetragen. Entwickler dürften allerdings die einfache Benutzbarkeit und die Fülle an fertigen Bedienelementen, sowie die ausgezeichneten Dokumentationsseiten mit zahlreichen Beispielen, schätzen. Aus eigener Erfahrung kann ich sagen, dass das Erstellen von Benutzeroberflächen mit Bootstrap immer Spaß gemacht hat.

Außerdem ist anzumerken, dass sich um das Projekt herum ein kleines Universum aufgebaut hat. Ein tumblr-Blog names Build With Bootstrap sammelt beispielsweise Seiten, die mit Bootstrap erstellt wurden. Die Seiten WrapBootstrap und BootsWatch bieten kostenpflichtige, sowie kostenlose Themes für Bootstrap an.

Alle Beispiele und eine Präsentation zum Thema können auf http://placebo.hpi.uni-potsdam.de/webhome/conrad.calmez/twitter-bootstrap/ eingesehen werden.

Literaturempfehlungen

• Projekt-Webseite von Bootstrap: http://twitter.github.com/bootstrap/index.html
• Tutorials (in Form von Videos; Quelltext aus den Videos ebenfalls erhältlich) zur Benutzung von Bootstrap: http://webdesign.tutsplus.com/series/twitter-bootstrap-101/
• Textuelles Tutorial, Quelltext jeweils auf Seite vorhanden: http://www.w3resource.com/twitter-bootstrap/tutorial.php
• Projekt-Webseite zu einem CSS-Normalisierer: http://necolas.github.com/normalize.css/
• Projekt-Webseite von Glyphicons: http://glyphicons.com/
• Projekt-Webseite von less.css: http://lesscss.org/
• Projekt-Webseite von jQuery: http://jquery.com/
• Video-/Text-Tutorial zu Bootstrap: http://railscasts.com/episodes/328-twitter-bootstrap-basics
• Bootstrap für Django: https://github.com/dyve/django-bootstrap-toolkit
• Blogeintrag über Nützliche Implementierungen für Bootstrap: http://www.queness.com/post/11632/18-useful-twitter-boostrap-goodies-you-should-know
• Blogeintrag, der erklärt, was ein clearfix ist: http://nicolasgallagher.com/micro-clearfix-hack/