Kolumne: Dino talks

Schaltflächen und Drop-down-Menüs in Bootstrap
Kommentare

Twitter Bootstrap abstrahiert einfaches HTML fast so, wie jQuery die JavaScript-Sprache und das Seiten-DOM abstrahiert hat. Bootstrap definiert eine neue Menge von Regeln und schafft eine neue gemeinsame Basis, auf der Entwickler und Designer zusammenarbeiten können – die einen kodieren das Verhalten, die anderen gestalten Seiten. Bis noch vor wenigen Jahren ließen sich die meisten Ziele erreichen, wenn man CSS mit einfachem HTML angewendet hat. Heute ist CSS in Themen einzubinden und einfaches Markup entspricht höchstwahrscheinlich dem Markup, das Bootstrap erkennt und transformiert. Dadurch ist es möglich geworden, komplexere Widgets als native Markup-Elemente zu betrachten, wie zum Beispiel Schaltflächengruppen, Menüs und Drop-downs. Dieser Artikel zeigt, wie Sie diese mithilfe von Twitter Bootstrap 3.0 in Gang bringen.

Für einen Entwickler ist es keine große Sache, eine Schaltfläche oder einen Link irgendwo in einer Webseite unterzubringen. Solchen Elementen ein ansprechendes Aussehen zu verleihen, steht auf einem ganz anderen Blatt. Wird andererseits von Entwicklern nicht erwartet, dass sie sich nur auf die funktionalen Aspekte von Seiten konzentrieren und es den Grafikdesignern überlassen, das endgültige Look and Feel besonders cool zu gestalten? Ja und nein. Gewiss plädiere ich hier weder dafür, dass Entwickler die grafischen Arbeiten übernehmen, noch dass Designer die funktionalen Aspekte von Webseiten abdecken. Dreh- und Angelpunkt ist die User Experience – und dazu sollten beide Parteien beitragen. Nun muss es sich bei Schaltflächen nicht immer um eine klickbare Schaltfläche im engeren Sinne handeln. Für eine ideale User Experience kann es erforderlich sein, mehrere Aktionen in einer Art Drop-down-Menü zu gruppieren. Oder es ist erforderlich, dass Navigationsschaltflächen auf der ganzen Seite verteilt sind, damit Benutzer schnell an den Anfang oder an das Ende der Seite gelangen können, während sie durch den Inhalt blättern.

Aus Sicht des Entwicklers geht es in erster Linie um die Kodierung einiger Verhaltensweisen – an den Anfang/das Ende springen oder JavaScript-Aufgaben ausführen. Der Designer hat vor allem damit zu tun, die beste grafische Umsetzung zu finden, um Schaltflächen zu stylen und sie in ansprechenden Drop-downs oder Sidebars zu gruppieren. Unbeantwortet bleibt die Frage, wer für den erforderlichen Zusatzcode zuständig ist, der die Schaltflächenleisten, Drop-downs oder schaltflächenähnliche Anker physisch implementiert. Oftmals hat man schnell die Antwort parat: CSS Style Sheets. Und CSS Style Sheets fallen in den Bereich der Designer. Allerdings ist CSS bei Weitem nicht allmächtig und oftmals ist ein Mix aus Markup, CSS und insbesondere JavaScript notwendig, um ambitionierte grafische Ziele zu erreichen, wie sie der Standard moderner Webseiten verlangt. Twitter Bootstrap hat das Zeug dazu, die meisten grafischen Belange flüssig umzusetzen.

Drop-down-Menüs

Drop-down-Menüs sind nichts Neues in Benutzeroberflächen, doch haben sie sich erst kürzlich auch in Webseiten etabliert. HTML – und nicht einmal das neueste HTML5 – kennt kein Syntaxelement, mit dem sich Drop-down-Menüs erzeugen ließen, wenn Schaltflächen angeklickt werden. Dies lässt sich aber mit einer Mischung aller Zutaten erreichen – CSS, Ad-hoc-Markup und jQuery-Plug-Ins. Mit Twitter Bootstrap v3.0 werden alle diese netten kleinen Details vollkommen ausgeblendet. Um in eine Webseite eine Schaltfläche einzubauen und mit ihr ein Drop-down-Menü zu verbinden, brauchen Sie das Markup aus Listing 1.

Listing 1

Wie aus dem Beispiel hervorgeht, ist das gesamte Markup in ein div-Element eingepackt, das durch die Klasse dropdown formatiert wird. Die in der Bootstrap-CSS-Datei definierte Klasse bereitet den Boden für die eigentliche Benutzeroberfläche und das damit verbundene Verhalten vor. Prinzipiell kann man das gesamte in Listing 1 gezeigte HTML-Markup mit folgendem Pseudo-Markup neu formulieren:

   Actions        One     Two     Three           Four      

Der Entwickler muss lediglich die Ziel-URLs und den dahinterstehenden Code definieren. Dabei kann es sich um ein Hashtag zu einem internen HTML-Element handeln, einen Zeiger auf JavaScript-Code oder einen externen URL. Abbildung 1 zeigt das Ergebnis des Drop-down-Markups.

Abb. 1: Ein Drop-down-Menü, das einer Schaltfläche zugeordnet ist

Für das Drop-down-Menü lassen sich viele andere Aspekte anpassen. Beispielsweise können Sie eine Art Kommentarzeile zwischen klickbaren Menüelementen einfügen. Dazu brauchen Sie nur ein normales LI-Element zu definieren und ihm die Klasse dropdown-header zuzuweisen:

Abbildung 2 zeigt das Endergebnis: Das grau dargestellte Menüelement ist als Kommentar zu den folgenden Menüelementen gestylt.

Abb. 2: Ein Drop-down-Menü mit statischen Menüelementen, die als einfache Überschriften dienen

[ header = Schaltflächen und Drop-down-Menüs in Bootstrap – Teil 2 ]

Um ein Menüelement zu deaktivieren, formatieren Sie das entsprechende LI-Element mit der Klasse disabled, wie es der folgende Code zeigt:

Um das Menü auszulösen, brauchen Sie ein BUTTON- oder ein A-Element, das mit dem auf den dropdown-Wert gesetzten Attribut data-toggle konfiguriert ist. In Bootstrap dient das data-toggle-Attribut dazu, das Klickverhalten bei bestimmten Elementen anzufordern. Der Wert des Attributs ist eines der wenigen vordefinierten Schlüsselwörter, die im Prinzip das Framework anweisen, ein bestimmtes jQuery-Plug-in auszuwählen, das die eigentliche Knochenarbeit übernimmt. Verwenden Sie das Schlüsselwort „dropdown“, wenn Sie ein Drop-down-Verhalten über das jQuery-Plug-in dropdown realisieren möchten. In einem anderen Kontext können Sie mit dem gleichen data-toggle-Attribut ein modales Dialogfeld mithilfe eines anderen jQuery-Plug-ins hinter den Kulissen öffnen. In diesem Fall ist das Schlüsselwort „modal“ für data-toggle anzugeben.

Schaltflächengruppen

In den meisten Fällen muss eine Webseite verschiedene Schaltflächen anzeigen, die in gewissem Sinne miteinander verwandt sind. Zweifellos können Sie Schaltflächen individuell behandeln und sie entsprechend Ihren Vorstellungen gestalten. Vor einigen Jahren allerdings hat die iOS-Benutzeroberfläche das Konzept der segmentierten Schaltflächen eingeführt. Und heute sind segmentierte Schaltflächen ein Feature, das zwar keine unverzichtbare aber zumindest wünschenswerte Einrichtung ist. Im Wesentlichen handelt es sich bei einer segmentierten Schaltfläche um eine Gruppe von Schaltflächen, die individuell wirken, doch als einziger Schaltflächenstreifen erscheinen. Die Ecken der ersten und letzten Schaltfläche sind dabei von Haus aus abgerundet, während die mittleren Schaltflächen vollkommen rechteckig aussehen. In Twitter Bootstrap verwenden Sie das folgende HTML-basierte Markup:

Wie aus dem Code hervorgeht, ist kaum mehr erforderlich als einige einzelne Schaltflächen mit ihren eigenen Click-Handlern, die entweder explizit über das onclick-Attribut oder unauffällig via jQuery hinzugefügt werden. Um zu einer Schaltflächengruppe zu kommen, brauchen Sie nur noch die Liste der Schaltflächen mit einem div-Element einzuhüllen, das als btn-group formatiert ist. Das grafische Resultat ist in Abbildung 3 zu sehen.

Abb. 3: Das HTML-Gegenstück zu den segmentierten Schaltflächen von iOS

Jede Schaltfläche ist einzeln über die btn-Klasse formatiert; zusätzliche Attribute lassen sich per btn-xxx-Klassen festlegen, die die Hintergrundfarbe bestimmen: Erfolg, Gefahr, Warnung, Info. Mit einer weiteren Klasse ist es möglich, die Größe der Schaltflächen in der Gruppe zu steuern: btn-group-lg, btn-group-sm oder btn-group-xs. Standardmäßig werden die Schaltflächen horizontal aneinandergereiht. Um sie übereinander zu stapeln, gruppieren Sie die Schaltflächen mithilfe der Klasse btn-group-vertical. Möchten Sie mehrere Gruppen nebeneinander platzieren, packen Sie sie in eine Button-Toolbar:

...
...
...

Schließlich können Schaltflächen auch verschachtelt werden. Das ist insbesondere dann zweckmäßig, wenn die eine Gruppe als Drop-down gerendert wird, wie es das Beispiel in Listing 2 zeigt.

Listing 2

Die beiden ersten Elemente in der Gruppe sind normale Schaltflächen. Daran schließt sich eine verschachtelte Gruppe an. Die Schaltflächengruppe besteht aus einer Schaltfläche mit einem zugeordneten Drop-down-Menü. Interessanterweise bringt die Schaltfläche einen caret-Abschnitt mit, der einen visuellen Hinweis darauf liefert, dass noch mehr Optionen zu sehen sind. Wenn Sie die Klasse caret einem SPAN-Element innerhalb einer Schaltfläche zuweisen, erscheint ein nach unten weisender Pfeil wie bei den bekannten Windows-Drop-down-Pfeilen. Abbildung 4 zeigt das Ergebnis dieses Markups.

Abb. 4: Eine Schaltflächengruppe mit einem verschachtelten Drop-down-Menü

Zusammenfassung

Die Semantik des realen Webs ist weit anspruchsvoller als sie sich mit HTML – selbst in der jüngsten Version HTML5 – ausdrücken ließe. Deshalb sind Abstraktionsebenen erforderlich. In den Zeiten von ASP.NET waren Steuerelemente ein erster Versuch. Da sich heute die Leistungsfähigkeit des Webs auf die Clientseite verlagert, ist eine komplexere Form von HTML erforderlich. Doch aus Gründen der Browserkompatibilität muss sie sich mithilfe der guten alten HTML-Elemente ausdrücken lassen. Genauso geht Twitter Bootstrap vor – und da dieses Framework von einem Giganten des Webs stammt, gibt es keinen Grund, es nicht zu verwenden.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -