Kolumne: Dino talks

Bootstrap: Listen, Listen und nochmals Listen
Kommentare

Mit Twitter Bootstrap lassen sich viele HTML-bezogene Dinge wesentlich einfacher implementieren. In diesem Artikel erfahren Sie, wie sich verschiedene Typen von Listen mithilfe von DIV-Elementen sowie UL/LI-Kombinationen arrangieren lassen. Listen können Kopf- und Fußleisten erhalten und in Panels und Warnfeldern gruppiert werden. Genauso einfach ist es, grundlegende kosmetische Änderungen vorzunehmen. Die Benennung von CSS-Klassenstilen vereinfacht die Arbeit, sodass sich bildlauffähige Listen überall problemlos platzieren lassen.

Man mag es als künstlich von iOS-UI-Architekten erzeugtes Bedürfnis ansehen, doch bildlauffähige Listen, segmentiert in Gruppen von zusammengehörenden Elementen, haben sich in wenigen Jahren in der Welt der Geräte ausgebreitet und das Web erobert. Zuerst erlaubte jQuery Mobile mit Ad-hoc-Komponenten, segmentierte und bildlauffähige Listen schnell zu realisieren. Heute bietet Twitter Bootstrap ebenfalls Ad-hoc-CSS-Klassen, um normale unsortierte HTML-Listen und reine Listen von Ankertags in ansprechend aussehenden Blöcken zu rendern, die die iOS-Listen nachbilden.

Listengruppen

In einer Bootstrap-basierten Seite wird eine normale Sequenz von Listenelementen automatisch in eine mit Rahmen versehene Tabelle überführt. Sehen Sie sich dazu das folgende Markup an:

  • First item
  • Second item
  • Third item
  • Fourth item
  • Fifth item

Die list-group-Klasse ist dafür verantwortlich, den Rahmen um den gesamten Inhalt zu zeichnen. Dagegen kümmert sich die Klasse list-goup-items um die Abstände und die Schriftart. Alle Listenelemente werden als normaler Text gerendert. Die Ausgabe einer list-group-Klasse ähnelt einem guten alten Listenfeld, wobei eine Liste von Optionen präsentiert wird und ein oder mehrere Elemente als ausgewählt gerendert werden können:

  • First item
  • Second item
  • Third item
  • Fourth item
  • Fifth item

Um ein Listenelement als ausgewählt zu markieren, müssen Sie lediglich die CSS-Klasse active hinzufügen. Wie bereits erwähnt, funktioniert das bei beliebig vielen Listenelementen. Mit Twitter Bootstrap können Sie genau das HTML-Markup produzieren, das Sie möchten. Die Bootstrap-Dokumentation reiht Listengruppen unter dem Abschnitt „Komponenten“ ein. Unabhängig davon, dass Listengruppen stark an die guten alten Windows-Listenfelder erinnern, haben Sie nichts mit realen Komponenten mit eingebetteter Logik und anzupassenden Eigenschaften gemein. Den Index des auszuwählenden Elements können Sie nicht per Programm festlegen. Stattdessen können Sie lediglich die erforderliche CSS-Klasse an der richtigen Stelle des DOM der aktuellen Seite hinzufügen.

Auswählbare Listenelemente

Eine einfache Listengruppe ist im Wesentlichen eine statische Liste, die keine Benutzerinteraktion aufweist. Eine interessante Variante von Listengruppen sind die verknüpften Listengruppen. Der wesentliche Unterschied liegt darin, dass Elemente in einer verknüpften Liste klickbare Seitenelemente sind – Anker-A-Elemente – anstelle von einfachem Text. Twitter Bootstrap erstellt verknüpfte Listen aus einer Liste von A-Elementen, die in ein DIV-Element eingehüllt sind. Das Gleiche erreichen Sie, wenn Sie Ankerelemente in den LI-Elementen einer UL-Liste platzieren:

  • First item
  • Allerdings stellt die Verwendung von DIV- und A-Elementen ein Kurzverfahren dar. Hierzu ein Beispiel:

    Die Wirkung ist die gleiche und Sie können die CSS-Klasse active für beliebige Elemente in der Gruppe verwenden. Wenn Sie der Listengruppe eine Kopfzeile geben möchten, haben Sie zwei Optionen. Ist die Liste statisch, versehen Sie einfach das Element, das als Kopfzeile dient, mit der Klasse active. Wenn die Liste auswählbar ist, möchten Sie vielleicht verschiedene Formate für die Kopfzeile und die aktuell ausgewählten Elemente verwenden. Einen benutzerdefinierten Kopfzeilenstil können Sie wie folgt erzeugen:

    .list-header {
      color: #0f0;
      background: #222;
    }

    Um zu verhindern, dass die Kopfzeile klickbar ist, können Sie ein SPAN-Element anstelle des A-Elements verwenden:

    Just Items First item Second item

    Zum Erzeugen von Segmenten innerhalb des Listenfelds sind beliebig viele Kopfzeilen möglich, fast genauso wie unter iOS. Entsprechend der iOS-Benutzeroberfläche können Sie den Text mithilfe von Badges in jedem Element für den Benutzer attraktiver gestalten. Ein Badge ist ein kleiner Text in einer farbigen Sprechblase, der die Anzahl von für die Seite relevanten Informationen anzeigt, beispielsweise der Nachrichten im Posteingang. Um die Wirkung von iOS-Badges zu erhalten, markieren Sie einfach ein SPAN-Element mit der Klasse badge:

    
      First item 
     

    Der Inhalt eines A-Elements, das Sie in Listen verwenden, lässt sich nach Belieben anpassen. Dabei kann es sich um normalen Text wie auch HTML-Markup handeln und das Element kann auch Bilder oder Mediendaten enthalten:

    
      

    Some small text

    Some bigger text here

    Mit vordefinierten Stilen wie list-group-item-text oder list-group-item-heading lässt sich eine einheitlichere grafische Wirkung erzielen. Hierbei handelt es sich allerdings um eine kosmetische Angelegenheit, weshalb die Verwendung Ihnen überlassen bleibt.

    Formatierte Listenelemente

    Die Klasse media wird in denjenigen Listenelementen verwendet, die Medienobjekte enthalten (normalerweise Bilder), die nach links oder rechts entlang eines Textinhalts ausgerichtet werden sollen. Mithilfe dieser Klasse stellen Sie das Listenelement als Ganzes dar. Die Klassen pull-left und pull-right beziehen sich auf die Ausrichtung des Medienobjekts. Schließlich wird die CSS-Klasse media-object um das IMG-Element gesetzt. Die Klasse media-body dekoriert den Text entlang des Bilds oder Medienobjekts:

  • ...

    Some content

    ...
  • Mit media-Klassen können Sie leicht und effizient bildbasierte Listenfelder arrangieren.

    Listenfelder in Panels einhüllen

    In modernen Seiten und besonders solchen, die auf mobilen Geräten angezeigt werden sollen, kann ein Listenfeld lang und scrollbar sein. Abhängig von der Art des Inhalts, der in einem Segment auf der Seite angezeigt wird, kann es zweckmäßig sein, ihn in ein Panel einzuhüllen. Die Grundstruktur des Markups, das Twitter Bootstrap als Panel rendern kann, sieht folgendermaßen aus:

    Sample markup for a panel

    Ein Panel kann optional eine Kopf- und eine Fußzeile enthalten. Die entsprechenden CSS-Klassen heißen panel-heading und panel-footer. Den Stil des Panels können Sie in weiten Grenzen anpassen. Die zusätzliche Klasse panel-default, die Sie im obigen Code gesehen haben, lässt sich durch verschiedenste andere Stile ersetzen, um den Kontext der Seite besser widerzuspiegeln. Hierzu bieten sich beispielsweise die Stile panel-primary oder panel-info an. Die gleichen kontextuellen Stile, die Sie schon für Schaltflächen kennen, sind auch für Panels verfügbar.

    Panels können problemlos Tabellen enthalten und sie zusammen mit anderem Inhalt wiedergeben. Bei einem Panel ohne Body erweitert sich die Tabelle, um den gesamten Raum des Panels einzunehmen:

    Header of the panel
    ...

    Das Panel kann auch Listengruppen sowohl von statischen als auch von auswählbaren Elementen enthalten.

    Warnfelder

    Ein Warnfeld ist ein spezialisierter Paneltyp. Es ist ein Panel, das eine kurze Nachricht oder in manchen Fällen auch einen umfangreichen Markup-Block enthält. Es ähnelt einem Panel ohne Kopf- und Fußleiste:

    The operation completed successfully.

    Das Warnfeld wird mit der Klasse alert dekoriert und vollständig mit einer kontextuellen Klasse wie z. B. alert-success, alert-info oder alert-warning spezifiziert. Ein Warnfeld lässt sich durch eine „Schließen“-Schaltfläche charakterisieren, die das Warnfeld insgesamt schließbar (dismissable) macht. Diese Schaltfläche müssen Sie explizit hinzufügen und eine spezielle Klasse zur Aktivierung eines jQuery-Plug-ins ergänzen, das letzten Endes das Feld ausblendet:

    An error occurred. Please report to the site admin.

    Durch Klicken auf die Schaltfläche blenden Sie das Warnfeld aus. Der Block wird physisch von der Seite entfernt und lässt sich auch nicht wieder zurückholen, sobald er geschlossen wurde. Mit anderen Worten unterscheidet sich ein schließbares Warnfeld von einem einklappbaren (collapsible) Dropdown-Feld. Deshalb ist eine solche Warnung ideal geeignet für Fehlermeldungen oder Benachrichtigungen. Die Schaltfläche und den Stil alert-dismissable können Sie auch für Panels realisieren, vorausgesetzt, dass diese genau die von Ihnen gewünschte Funktionalität bieten.

    Zusammenfassung

    Das Scrollen von Listen gehört heute zu den gebräuchlichsten Gesten auf Websites. Der Designer kann damit lange Datentabellen einführen und auch verschiedenartig formatierte Listenfelder. In HTML bleiben Tabellen aber weiterhin eine Option, wenn es darum geht, tabellarische Daten wiederzugeben; unsortierte Listen sind vorzuziehen, wenn Sie lediglich ein Tabellenlayout darstellen möchten. In diesem Fall sind Listen, die als Tabellen gerendert werden, ein guter Kompromiss. In diesem Artikel habe ich die verschiedenen Optionen zur Erstellung von Listengruppen, auswählbaren Listen, Warnfeldern und Panels erläutert.

     

    Unsere Redaktion empfiehlt:

    Relevante Beiträge

    Meinungen zu diesem Beitrag

    X
    - Gib Deinen Standort ein -
    - or -