Source

Gruppe auflisten

Listengruppen sind eine flexible und leistungsstarke Komponente zum Anzeigen einer Reihe von Inhalten. Ändern und erweitern Sie sie, um nahezu jeden Inhalt darin zu unterstützen.

Einfaches Beispiel

Die einfachste Listengruppe ist eine ungeordnete Liste mit Listenelementen und den richtigen Klassen. Bauen Sie mit den folgenden Optionen oder bei Bedarf mit Ihrem eigenen CSS darauf auf.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leorisus
  • Porta ac consectetur ac
  • Vestibulum bei Eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Aktive Artikel

Zu a hinzufügen .active, .list-group-itemum die derzeit aktive Auswahl anzugeben.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leorisus
  • Porta ac consectetur ac
  • Vestibulum bei Eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Deaktivierte Elemente

Zu a hinzufügen .disabled, .list-group-itemdamit es deaktiviert erscheint . Beachten Sie, dass einige Elemente mit .disabledauch benutzerdefiniertes JavaScript erfordern, um ihre Klickereignisse (z. B. Links) vollständig zu deaktivieren.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leorisus
  • Porta ac consectetur ac
  • Vestibulum bei Eros
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Verwenden Sie <a>s oder <button>s, um umsetzbare Listengruppenelemente mit Hover-, Deaktiviert- und Aktiv-Status zu erstellen, indem Sie hinzufügen .list-group-item-action. Wir trennen diese Pseudoklassen, um sicherzustellen, dass Listengruppen aus nicht interaktiven Elementen (wie <li>s oder <div>s) kein Klick- oder Tippangebot bieten.

Achten Sie darauf, hier nicht die Standardklassen .btnzu verwenden .

Cras justo odio Dapibus ac facilisis in Morbi leorisus Porta ac consectetur ac Vestibulum bei Eros 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

Bei <button>s können Sie disabledstatt der .disabledKlasse auch das Attribut verwenden. Leider unterstützen <a>s das Attribut disabled nicht.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

Spülen

Hinzufügen .list-group-flush, um einige Ränder und abgerundete Ecken zu entfernen, um Listengruppenelemente in einem übergeordneten Container (z. B. Karten) von Kante zu Kante zu rendern.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leorisus
  • Porta ac consectetur ac
  • Vestibulum bei Eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Horizontal

Hinzufügen .list-group-horizontal, um das Layout der Listengruppenelemente über alle Haltepunkte hinweg von vertikal in horizontal zu ändern. Wählen Sie alternativ eine reaktionsschnelle Variante .list-group-horizontal-{sm|md|lg|xl}, um eine Listengruppe horizontal beginnend an diesem Haltepunkt zu erstellen min-width. Derzeit können horizontale Listengruppen nicht mit bündigen Listengruppen kombiniert werden.

Profi- Tipp: Möchten Sie Listenelemente mit gleicher Breite horizontal gruppieren? .flex-fillZu jedem Listengruppenelement hinzufügen .

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leorisus
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leorisus
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leorisus
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leorisus
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leorisus
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Kontextbezogener Unterricht

Verwenden Sie kontextabhängige Klassen, um Listenelemente mit einem zustandsbehafteten Hintergrund und einer zustandsbehafteten Farbe zu gestalten.

  • Dapibus ac facilisis in
  • Ein einfaches primäres Listengruppenelement
  • Ein einfaches sekundäres Listengruppenelement
  • Ein einfaches Erfolgslisten-Gruppenelement
  • Ein einfaches Gruppenelement der Gefahrenliste
  • Ein einfaches Warnlisten-Gruppenelement
  • Ein einfaches Infolisten-Gruppenelement
  • Ein einfaches Gruppenelement für leichte Listen
  • Ein einfaches Gruppenelement der dunklen Liste
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Kontextunterricht funktioniert auch mit .list-group-item-action. Beachten Sie die Hinzufügung der Hover-Stile hier, die im vorherigen Beispiel nicht vorhanden waren. Unterstützt wird auch der .activeStaat; Wenden Sie es an, um eine aktive Auswahl auf einem kontextabhängigen Listengruppenelement anzuzeigen.

Dapibus ac facilisis in Ein einfaches primäres Listengruppenelement Ein einfaches sekundäres Listengruppenelement Ein einfaches Erfolgslisten-Gruppenelement Ein einfaches Gruppenelement der Gefahrenliste Ein einfaches Warnlisten-Gruppenelement Ein einfaches Infolisten-Gruppenelement Ein einfaches Gruppenelement für leichte Listen Ein einfaches Gruppenelement der dunklen Liste 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>


  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Bedeutung von Hilfstechnologien vermitteln

Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .sr-onlyKlasse verborgen ist.

Mit Abzeichen

Fügen Sie mithilfe einiger Dienstprogramme Badges zu beliebigen Listengruppenelementen hinzu, um die Anzahl der ungelesenen Artikel, Aktivitäten und mehr anzuzeigen .

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leorisus1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Benutzerdefinierte Inhalte

Fügen Sie mit Hilfe von Flexbox-Dienstprogrammen fast jeden HTML-Code hinzu, sogar für verknüpfte Listengruppen wie die untenstehende .

Listengruppenelement-Überschrift
vor 3 Tagen

Donec id elit non mi porta gravida bei eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Listengruppenelement-Überschrift
vor 3 Tagen

Donec id elit non mi porta gravida bei eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Listengruppenelement-Überschrift
vor 3 Tagen

Donec id elit non mi porta gravida bei eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

JavaScript-Verhalten

Verwenden Sie das Tab-JavaScript-Plug-In – fügen Sie es einzeln oder über die kompilierte bootstrap.jsDatei ein – um unsere Listengruppe zu erweitern, um Tabulatorfenster mit lokalen Inhalten zu erstellen.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Verwenden von Datenattributen

Sie können eine Listengruppennavigation aktivieren, ohne JavaScript zu schreiben, indem Sie einfach data-toggle="list"oder für ein Element angeben. Verwenden Sie diese Datenattribute für .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

Über JavaScript

Tab-Listenelement über JavaScript aktivieren (jedes Listenelement muss einzeln aktiviert werden):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Sie können einzelne Listenelemente auf verschiedene Arten aktivieren:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

Fade-Effekt

Um das Tabs-Panel einzublenden, fügen Sie .fadezu jedem hinzu .tab-pane. Auch der erste Tab-Bereich muss .showden initialen Inhalt sichtbar machen.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

Methoden

$().tab

Aktiviert ein Listenelementelement und einen Inhaltscontainer. Tab sollte entweder ein data-targetoder ein haben href, das auf einen Container-Knoten im DOM abzielt.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('zeigen')

Wählt das angegebene Listenelement aus und zeigt den zugehörigen Bereich an. Alle anderen Listenelemente, die zuvor ausgewählt waren, werden deselektiert und der zugehörige Bereich wird ausgeblendet. Gibt an den Aufrufer zurück, bevor der Registerkartenbereich tatsächlich angezeigt wurde (z. B. bevor das shown.bs.tabEreignis eintritt).

$('#someListItem').tab('show')

Veranstaltungen

Beim Anzeigen eines neuen Tabs werden die Ereignisse in der folgenden Reihenfolge ausgelöst:

  1. hide.bs.tab(auf der aktuell aktiven Registerkarte)
  2. show.bs.tab(auf dem anzuzeigenden Reiter)
  3. hidden.bs.tab(auf der vorherigen aktiven Registerkarte dieselbe wie für das hide.bs.tabEreignis)
  4. shown.bs.tab(auf dem neu aktivierten gerade gezeigten Tab, der gleiche wie für das show.bs.tabEreignis)

Wenn noch keine Registerkarte aktiv war, werden die Ereignisse hide.bs.tabund hidden.bs.tabnicht ausgelöst.

Ereignistyp Beschreibung
show.bs.tab Dieses Ereignis wird bei der Registerkartenanzeige ausgelöst, aber bevor die neue Registerkarte angezeigt wurde. Verwenden Sie event.targetund event.relatedTarget, um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen.
gezeigt.bs.tab Dieses Ereignis wird beim Anzeigen von Registerkarten ausgelöst, nachdem eine Registerkarte angezeigt wurde. Verwenden Sie event.targetund event.relatedTarget, um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen.
verstecken.bs.tab Dieses Ereignis wird ausgelöst, wenn ein neuer Tab angezeigt werden soll (und somit der vorherige aktive Tab ausgeblendet werden soll). Verwenden Sie event.targetund event.relatedTarget, um auf die derzeit aktive Registerkarte bzw. die neue, bald aktive Registerkarte abzuzielen.
versteckt.bs.tab Dieses Ereignis wird ausgelöst, nachdem eine neue Registerkarte angezeigt wird (und somit die vorherige aktive Registerkarte ausgeblendet wird). Verwenden Sie event.targetund event.relatedTarget, um auf die vorherige aktive Registerkarte bzw. die neue aktive Registerkarte zu zielen. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})