Bootstrap 4 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>
Aktiver Zustand
- Aktives Element
- Zweiter Artikel
- Dritter Artikel
Verwenden Sie die .activeKlasse, um das aktuelle Element hervorzuheben:
Beispiel
<ul class="list-group">
<li class="list-group-item
active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Listengruppe mit verknüpften Elementen
Um eine Listengruppe mit verknüpften Elementen zu erstellen, verwenden Sie <div>anstelle von <ul>
und <a>anstelle von <li>. Fügen Sie optional die .list-group-item-actionKlasse hinzu, wenn Sie beim Hover eine graue Hintergrundfarbe wünschen:
Beispiel
<div class="list-group">
<a href="#"
class="list-group-item list-group-item-action">First item</a>
<a
href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
Deaktiviertes Element
Die .disabledKlasse fügt dem deaktivierten Element eine hellere Textfarbe hinzu. Und wenn es auf Links verwendet wird, wird der Hover-Effekt entfernt:
Beispiel
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#"
class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Ränder spülen/entfernen
Verwenden Sie die .list-group-flushKlasse, um einige Ränder und abgerundete Ecken zu entfernen:
- Erster Gegenstand
- Zweiter Artikel
- Dritter Artikel
- Vierter Punkt
Beispiel
<ul class="list-group
list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Horizontale Listengruppen
Wenn Sie möchten, dass die Listenelemente horizontal statt vertikal angezeigt werden (nebeneinander statt übereinander), fügen Sie die .list-group-horizontalKlasse hinzu zu .list-group:
- Erster Gegenstand
- Zweiter Artikel
- Dritter Artikel
- Vierter Punkt
Beispiel
<ul class="list-group
list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Kontextbezogene Klassen
Kontextbezogene Klassen können zum Einfärben von Listenelementen verwendet werden:
- Erfolgsartikel
- Sekundärartikel
- Info-Element
- Warnungsartikel
- Gefährlicher Gegenstand
- Hauptartikel
- Dunkler Gegenstand
- Leichter Artikel
Die Klassen zum Färben von Listenelementen sind:
.list-group-item-success, list-group-item-secondary, list-group-item-info,
list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-darkund list-group-item-light,:
Beispiel
<ul class="list-group">
<li class="list-group-item
list-group-item-success">Success item</li>
<li
class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li
class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li
class="list-group-item list-group-item-light">Light item</li>
</ul>
Verknüpfen Sie Elemente mit Kontextklassen
Beispiel
<div class="list-group">
<a href="#" class="list-group-item
list-group-item-action">Action item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a
href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
Listengruppe mit Abzeichen
Kombinieren .badgeSie Klassen mit Hilfs-/Hilfsklassen, um Abzeichen innerhalb der Listengruppe hinzuzufügen:
- Posteingang 12
- Anzeigen 50
- Müll 99
Beispiel
<ul class="list-group">
<li class="list-group-item d-flex
justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary
badge-pill">50</span>
</li>
<li class="list-group-item
d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
Tipp: Lesen Sie mehr über Bootstrap 4 Utility/Helper-Klassen in unserem BS4-Utilities-Kapitel .