Bootstrap -Listengruppen
Grundlegende Listengruppen
Die einfachste Listengruppe ist eine ungeordnete Liste mit Listenelementen:
- Erster Gegenstand
- Zweiter Artikel
- Dritter Artikel
Um eine Basislistengruppe zu erstellen, verwenden Sie ein <ul>Element mit Klasse .list-groupund
<li>Elemente mit Klasse .list-group-item:
Beispiel
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Listengruppe mit Abzeichen
Sie können auch Badges zu einer Listengruppe hinzufügen. Die Abzeichen werden automatisch rechts positioniert:
- 12Neu
- 5Gelöscht
- 3Warnungen
Um ein Abzeichen zu erstellen, erstellen Sie ein <span>Element mit Klasse .badge
innerhalb des Listenelements:
Beispiel
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
Listengruppe mit verknüpften Elementen
Die Elemente in einer Listengruppe können auch Hyperlinks sein. Dadurch wird beim Hover eine graue Hintergrundfarbe hinzugefügt:
Um eine Listengruppe mit verknüpften Elementen zu erstellen, verwenden Sie <div>anstelle von <ul>
und <a>anstelle von <li>:
Beispiel
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Aktiver Zustand
Verwenden Sie die .activeKlasse, um das aktuelle Element hervorzuheben:
Beispiel
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Deaktiviertes Element
Die folgende Listengruppe hat ein deaktiviertes Element:
Um ein Element zu deaktivieren, fügen Sie die .disabledKlasse hinzu:
Beispiel
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Kontextbezogene Klassen
Kontextbezogene Klassen können zum Einfärben von Listenelementen verwendet werden:
- Erster Gegenstand
- Zweiter Artikel
- Dritter Artikel
- Vierter Punkt
Die Klassen zum Färben von Listenelementen sind:
.list-group-item-success, list-group-item-info,
list-group-item-warning, und .list-group-item-danger:
Beispiel
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Benutzerdefinierte Inhalte
Sie können fast jeden HTML-Code in ein Listengruppenelement einfügen.
Bootstrap stellt die Klassen bereit .list-group-item-heading,
.list-group-item-textdie wie folgt verwendet werden können:
Beispiel
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>