Teil 2: Webseiten mit Bootstrap erstellen

An dieser Stelle finden Sie den zweiten Teil unseres großen Bootstrap-Ratgebers. In der vergangenen Woche erklärten wir die Basics, Raster-Layouts, Funktionen für Buttons und mehr. Heute setzen wir den Ratgeber mit Tipps für Aktionen, responsive Layouts, LESS und Individualisierungsmöglichkeiten für Bootstrap fort.

Bootstrap-Ratgeber: Wie löse ich Aktionen aus?

Buttons und Tabs sind schön und gut, aber im Normalfall sollen sie natürlich auch eine Aktion auslösen. Dafür stellt Twitter Bootstrap eine Reihe von Standard-jQuery-Plug-ins zur Verfügung. Um sie zu aktivieren, genügt es im einfachsten Fall, die richtigen Klassen sowie data-Attribute zuzuweisen. In HTML5 können Sie ja eigene Attribute festlegen, die mit data- beginnen.Im folgenden Beispiel sehen Sie, wie Sie ein Dropdown-Menü erstellen. Entscheidend ist die Klasse .dropdown beim li-Element sowie class="dropdown-toggle" data-toggle="dropdown" beim Link, der dann durch wechselndes Klicken das untergeordnete Menü zeigt oder versteckt. <b class="caret"></b> fügt im Beispiel außerdem einen kleinen nach unten zeigenden Pfeil ein.

<ul class="nav nav-pills"><li class="dropdown" id="menu1"><a class="dropdown-toggle" data-
toggle="dropdown" href="#menu1">
Dropdown<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">Eins</a></li><li><a href="#">Zwei</a></li></ul></li></ul>

Damit das aber funktioniert, muss das jQuery-Plug-in dropdown.js integriert sein. Nicht immer ist die Aktivierung der Funktion rein durch Attributzuweisung im HTML-Code möglich wie in diesem Beispiel; mitunter müssen Sie auch ganz klassischen Javascript-Code schreiben und zuerst das Element auswählen und dann das Plug-in aktivieren - ganz so, wie Sie es auch von anderen jQuery-Plug-ins gewohnt sind. Dropdown ist nur eines der von Bootstrap gelieferten jQuery-Plug-ins. Insgesamt gibt es zwölf, die eine schöne Auswahl aus der Unmenge der derzeit im Web befindlichen jQuery-Plug-ins darstellen. Darüber hinaus findet sich in dieser Auswahl aber auch gerade das, was man am häufigsten braucht, nämlich:

• Modals für modale Fenster
• Tooltips und Popvers zur Anzeige zusätzlicher Inhalte
• Collapse für die Accordion-Funktion
• Scrollspy erkennt, bis wohin der Benutzer gerade gescrollt hat, und hebt den entsprechenden Punkt in einer Navigation hervor.
• Carousel dient der wechselnden Anzeige von Inhalten/Bildern, die automatisch ablaufen oder auch durch den Benutzer gesteuert werden.
• Typeahead ist für eine Vorschlagsliste gedacht, die beim Tippen automatisch erscheint.
• Buttons bietet mehr als die Standard-Button-Funktion.
• Transitions ist für viele Effekte zuständig wie beispielsweise für das dynamische Einblenden von modalen Dialogen und anderen Meldungsboxen.
• Togglable Tabs dient der wechselnden Anzeige von Registerkarteninhalten.

Bootstrap-Ratgeber: Wie nutze ich responsive Layouts?

Seit Version 2 lässt sich Bootstrap auch für responsive Layouts benutzen. Hierfür müssen Sie die entsprechende CSS-Datei einbinden und außerdem die folgende meta-Viewport-Angabe integrieren:

<meta name="viewport" content="width=
device-width, initial-scale=1.0">

Die Änderungen werden an verschiedenen Stellen sichtbar; so gibt es jetzt bei dem pixelbasierten Rasterlayout unterschiedliche Spaltenbreiten je nach Viewportbreite. Ist der Viewport schmaler als 767 Pixel, werden die Zellen nicht nebeneinander, sondern untereinander dargestellt. Besonders gut eignet sich natürlich die Responsive-Variante für das flüssige Gridlayout, was dem ursprünglichen Responsive-Webdesign-Gedanken von Ethan Marcotte auch am nächsten kommt. Außerdem gibt es eine Reihe von Klassen, die es ermöglichen, Inhalte nur auf bestimmten Geräten anzuzeigen oder auszublenden. Vorgesehen sind folgende Klassen:

• .visible-phone und .hidden-phone
• .visible-tablet und .hidden-tablet
• .visible-desktop und .hidden-desktop

Als Smartphone wird ein Gerät mit einem Viewport von 480 Pixeln und weniger gerechnet, zu den Tablets zählen Geräte mit weniger als 767 Pixeln und als Desktop gelten Geräte mit mehr als 768 Pixeln. Das sind gängige Größen, an die Sie sich aber nicht sklavisch halten sollten. Im Allgemeinen empfiehlt es sich ja ohnehin, für die Breakpoints beim responsiven Layout von den Inhalten und nicht von den Geräten auszugehen - was aber natürlich bei einem Framework, das Standardwerte vorgeben muss, nicht möglich ist. Navigationen stellen beim Responsive Webdesign eine besondere Herausforderung dar, da sie auf den kleinen Bildschirmen nicht zu viel Platz einnehmen dürfen. Wenn beispielsweise Navigation und Kopfbereich den gesamten sichtbaren Platz beanspruchen und man zum Inhalt erst hinscrollen muss, ist das unschön. Abhilfe schafft hier eine Navigation, die sich auf schmalen Bildschirmen nur bei Bedarf ausklappt und eine solche lässt sich sehr einfach mit Bootstrap erstellen. Ein entsprechendes Beispiel finden Sie schon im starter-template.html integriert. Damit es funktioniert, müssen Sie das collapse-Plug-in integrieren.

Bootstrap-Ratgeber: Wie arbeite ich mit LESS?

Twitter Bootstrap setzt auf den CSS-Präprozessor LESS, der CSS um praktische Komponenten wie Variablen erweitert und Möglichkeiten bietet, wie sich Code-Komponenten wiederverwenden lassen. LESS erlaubt es etwa, immer wieder auf bestimmte Farben zurückzugreifen, die nur einmal zentral angegeben werden. Wenn Sie das vollständige Bootstrap-Paket heruntergeladen haben, finden Sie die relativ große Anzahl an LESS-Dateien im gleichnamigen Unterordner. Zentral ist hier bootstrap.less, das für die Einbindung der anderen less-Dateien verantwortlich ist und folgendermaßen beginnt:

@import "reset.less";
@import "variables.less";
@import "mixins.less";

In normalem CSS-Code sollten Sie @import-Anweisungen aus Performance-Gründen vermeiden, bei Verwendung von LESS verhält es sich anders: Denn der LESS-Code wird kompiliert und zu einer CSS-Datei umgewandelt. In den LESS-Dateien stehen die Definitionen wie Variablen, mit denen Sie zentral bestimmte Einstellungen vornehmen. Folgender Ausschnitt aus variables.less definiert zwei Variablen: @linkColor legt die Farbe der Links fest, bei @linkColorHover wird ein um 15 Prozent dunklerer Ton erzeugt.

@linkColor: #08c;
@linkColorHover: darken(@linkColor,
15%);

In der Datei scaffolding.less werden diese Variablen dann wie folgt verwendet:

a {
color: @linkColor;
}
a:hover {
color: @linkColorHover;
}

Wenn Sie hier Änderungen vornehmen, müssen Sie LESS neu kompilieren. Eine einfache Möglichkeit besteht darin, dass Sie die Javascript-Datei less.js herunterladen und nach dem eigentlichen less-Stylesheet einbinden. Damit das funktioniert, müssen Sie die Datei allerdings über einen Server aufrufen.

<link rel="stylesheet/less" href="/
pfad/zu/bootstrap.less"><script src="/pfad/zu/less.js"></script>

Außerdem gibt es eine Reihe von zusätzlichen Tools, die die Umwandlung des LESS- in CSS-Code übernehmen, wie beispielsweise winless oder simpleless; weitere Möglichkeiten listet die Website des Projekts auf. Wenn Sie die Handarbeit scheuen, können Sie die Variablen auch beim Schnüren Ihres Download-Pakets über die Bootstrap-Seite ändern.

Bootstrap-Ratgeber: Wie passe ich den Funktionsumfang an?

dieses Thema

twitter.github.com/bootstrap/ www.lesscss.org www.winless.org www.wearekiss.com/simpless twitter.github.com/bootstrap/download.html

Unnötiger Ballast kostet Geld und Ressourcen. Deshalb werden immer mehr Bibliotheken modulartig angeboten. Bootstrap folgt diesem Trend. Unter dem Menüpunkt Customize auf der Homepage wählen Sie die Komponenten von Bootstrap aus, die Sie brauchen. Außerdem können Sie beim Download die LESS-Variablen mit den gewünschten Werten belegen, beispielsweise die verwendeten Farben definieren. Ein Klick, und schon haben Sie die auf Ihre Bedürfnisse zugeschnittene Bootstrap-Auswahl. Praktisch auch: Die ausgewählten jQuery-Plug-ins werden automatisch in einer Datei zusammengefasst. Im Download-Paket erhalten Sie die CSS-Datei und die Javascript-Datei in zwei Varianten, minimalisiert und normal.Dank Bootstrap ist es einfach, schnell ansprechende Oberflächen zusammenzubasteln. Aber wie es schon auf der Website heißt: Das, was man so erzeugt, sollte nicht das endgültige Ergebnis sein, sondern lediglich eine vernünftige Basis.

Hier kommen Sie zu unserem bisherigen Ratgeber für Bootstrap (Teil 1) .