Bootstrap 5-Listengruppe

Grundlegende Liste

Die grundlegendste Liste ist eine unsortierte Liste mit Listeinträgen:

Um eine grundlegende Liste zu erstellen, verwenden Sie die Klasse .list-group des <ul> Element und Klasse sind .list-group-item des <li> Element:

Beispiel

<ul class="list-group">
  <li class="list-group-item">Erstes Element</li>
  <li class="list-group-item">Zweites Element</li>
  <li class="list-group-item">Drittes Element</li>
</ul>

Selbst ausprobieren

Aktiver Status

Verwenden Sie .active Klasse zum Hervorheben des aktuellen Elements:

Beispiel

<ul class="list-group">
  <li class="list-group-item active">Aktiver Eintrag</li>
  <li class="list-group-item">Zweites Element</li>
  <li class="list-group-item">Drittes Element</li>
</ul>

Selbst ausprobieren

Liste mit verlinkten Elementen

Um eine Liste mit verlinkten Elementen zu erstellen, verwenden Sie <div> ersetzen <ul>verwenden <a> ersetzen <li>Optional können Sie eine graue Hintergrundfarbe beim Überfahren hinzufügen, indem Sie .list-group-item-action Kategorie:

Beispiel

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Erster Eintrag</a>
  <a href="#" class="list-group-item list-group-item-action">Zweiter Eintrag</a>
  <a href="#" class="list-group-item list-group-item-action">Drittes Element</a>
</div>

Selbst ausprobieren

Deaktiviertes Element

.disabled Die Klasse fügt dem deaktivierten Element eine heller Textfarbe hinzu. Wenn es auf Links verwendet wird, wird der Hover-Effekt entfernt:

Beispiel

<div class="list-group">
  <a href="#" class="list-group-item disabled">Deaktiviertes Element</a>
  <a href="#" class="list-group-item disabled">Deaktiviertes Element</a>
  <a href="#" class="list-group-item">Drittes Element</a>
</div>

Selbst ausprobieren

Rahmen entfernen

Verwenden Sie .list-group-flush Klasse Entfernen von Rahmen und Kantenrunden:

Beispiel

<ul class="list-group list-group-flush">
  <li class="list-group-item">Erstes Element</li>
  <li class="list-group-item">Zweites Element</li>
  <li class="list-group-item">Drittes Element</li>
  <li class="list-group-item">Viertes Element</li>
</ul>

Selbst ausprobieren

Nummerierte Liste

Verwenden Sie .list-group-numbered Klasse erstellt Listenpunkte mit vorangestellten Ziffern:

Beispiel

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Erstes Element</li>
  <li class="list-group-item">Zweites Element</li>
  <li class="list-group-item">Drittes Element</li>
</ol>

Selbst ausprobieren

Horizontale Liste

Wenn Sie möchten, dass die Liste horizontal angezeigt wird, anstatt vertikal (flach anstatt gestapelt), fügen Sie .list-group-horizontal Klasse hinzufügen zu .list-group:

Beispiel

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Erstes Element</li>
  <li class="list-group-item">Zweites Element</li>
  <li class="list-group-item">Drittes Element</li>
  <li class="list-group-item">Viertes Element</li>
</ul>

Selbst ausprobieren

Kontextklasse

Kontextklassen können verwendet werden, um den Farbton der Liste hinzuzufügen:

Die Klassen zur Farbbearbeitung der Liste 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-dark
  • .list-group-item-light

Beispiel

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Erfolgsitem</li>
  <li class="list-group-item list-group-item-secondary">Sekundäres Element</li>
  <li class="list-group-item list-group-item-info">Infoelement</li>
  <li class="list-group-item list-group-item-warning">Warnungselement</li>
  <li class="list-group-item list-group-item-danger">Gefährliches Element</li>
  <li class="list-group-item list-group-item-primary">Primäres Element</li>
  <li class="list-group-item list-group-item-dark">Dunkles Element</li>
  <li class="list-group-item list-group-item-light">Hell Element</li>
</ul>

Selbst ausprobieren

Verknüpfte Links mit Kontextklasse

Beispiel

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Aktionsitem</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Erfolgsitem</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Sekundäres Element</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Infoelement</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warnungselement</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Gefährliche Position</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primäre Position</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dunklere Position</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Hellere Position</a>
</div>

Selbst ausprobieren

Listegruppe mit Abzeichen

Setzen Sie .badge Kombiniert mit der Klasse utility/helper können Sie in der Liste eine Abzeichen hinzufügen:

Beispiel

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Posteingang
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Werbung per E-Mail
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Müllhalde
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Selbst ausprobieren