Source

Lijst groep

Lijstgroepen zijn een flexibel en krachtig onderdeel voor het weergeven van een reeks inhoud. Pas ze aan en breid ze uit om zo ongeveer alle inhoud te ondersteunen.

Basis voorbeeld

De meest elementaire lijstgroep is een ongeordende lijst met lijstitems en de juiste klassen. Bouw erop voort met de opties die volgen, of met uw eigen CSS indien nodig.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum bij 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>

Actieve items

Toevoegen .activeaan a .list-group-itemom de huidige actieve selectie aan te geven.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum bij 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>

Uitgeschakelde items

Toevoegen .disabledaan a .list-group-itemom het uitgeschakeld te laten lijken . Merk op dat sommige elementen met .disabledook aangepast JavaScript nodig hebben om hun klikgebeurtenissen (bijv. links) volledig uit te schakelen.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum bij eros
<ul class="list-group">
  <li class="list-group-item disabled">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>

Gebruik <a>s of <button>s om bruikbare lijstgroepsitems te maken met zwevende, uitgeschakelde en actieve statussen door toe te voegen .list-group-item-action. We scheiden deze pseudo-klassen om ervoor te zorgen dat lijstgroepen die zijn gemaakt van niet-interactieve elementen (zoals <li>s of <div>s) geen klik- of tikprijs bieden.

Zorg ervoor dat u hier niet de standaardklassen .btngebruikt .

<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">Vestibulum at eros</a>
</div>

Met <button>s kun je ook gebruik maken van het disabledattribuut in plaats van de .disabledklasse. Helaas <a>ondersteunen s het kenmerk uitgeschakeld niet.

<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>

doorspoelen

Toevoegen .list-group-flushom enkele randen en afgeronde hoeken te verwijderen om lijstgroepitems van rand tot rand in een bovenliggende container weer te geven (bijv. kaarten).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum bij 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>

Contextuele lessen

Gebruik contextuele klassen om lijstitems op te maken met een stateful achtergrond en kleur.

  • Dapibus ac facilisis in
  • Een eenvoudig primair lijstgroepsitem
  • Een eenvoudig secundair lijstgroepsitem
  • Een eenvoudig groepsitem van de succeslijst
  • Een eenvoudig groepsitem op de gevarenlijst
  • Een eenvoudig groepsitem op de waarschuwingslijst
  • Een eenvoudig groepsitem in de infolijst
  • Een eenvoudig groepsitem voor de lichtlijst
  • Een eenvoudig groepsitem op een donkere lijst
<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>

Contextuele lessen werken ook met .list-group-item-action. Let op de toevoeging van de zweefstijlen die hier niet aanwezig waren in het vorige voorbeeld. Ook ondersteund wordt de .activestaat; pas het toe om een ​​actieve selectie op een contextueel lijstgroepsitem aan te geven.

<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>
Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .sr-onlyklasse.

Met insignes

Voeg badges toe aan elk lijstgroepitem om ongelezen tellingen, activiteit en meer te tonen met behulp van enkele hulpprogramma's .

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1
<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>

Aangepaste inhoud

Voeg bijna elke HTML toe, zelfs voor gekoppelde lijstgroepen zoals die hieronder, met behulp van flexbox-hulpprogramma's .

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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 flex-column align-items-start">
    <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 flex-column align-items-start">
    <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-gedrag

Gebruik de JavaScript-plug-in voor tabbladen - neem deze afzonderlijk of via het gecompileerde bootstrap.jsbestand op - om onze lijstgroep uit te breiden om tabbare vensters met lokale inhoud te maken.

<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>

Gegevenskenmerken gebruiken

U kunt een lijstgroepnavigatie activeren zonder JavaScript te schrijven door simpelweg data-toggle="list"of op een element te specificeren. Gebruik deze gegevensattributen op .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>

Via JavaScript

Lijstitem met tabs inschakelen via JavaScript (elk lijstitem moet afzonderlijk worden geactiveerd):

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

U kunt individuele lijstitems op verschillende manieren activeren:

$('#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-effect

Als u het tabbladenpaneel wilt laten infaden, voegt u .fadeaan elk toe .tab-pane. Het eerste tabblad moet ook .showde initiële inhoud zichtbaar maken.

<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

Activeert een lijstitemelement en inhoudcontainer. Tab moet een data-targetof een hrefgericht hebben op een containerknooppunt in de DOM.

<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('toon')

Selecteert het opgegeven lijstitem en toont het bijbehorende venster. Elk ander lijstitem dat eerder was geselecteerd, wordt gedeselecteerd en het bijbehorende paneel wordt verborgen. Keert terug naar de beller voordat het tabblad daadwerkelijk is weergegeven (bijvoorbeeld voordat de shown.bs.tabgebeurtenis plaatsvindt).

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

Evenementen

Wanneer een nieuw tabblad wordt weergegeven, worden de gebeurtenissen in de volgende volgorde geactiveerd:

  1. hide.bs.tab(op het huidige actieve tabblad)
  2. show.bs.tab(op het te tonen tabblad)
  3. hidden.bs.tab(op het vorige actieve tabblad, hetzelfde als voor het hide.bs.tabevenement)
  4. shown.bs.tab(op het nieuw actieve tabblad dat zojuist is weergegeven, dezelfde als voor de show.bs.tabgebeurtenis)

Als er al geen tabblad actief was, worden de gebeurtenissen hide.bs.taben hidden.bs.tabniet geactiveerd.

Evenementtype Beschrijving
toon.bs.tabblad Deze gebeurtenis wordt geactiveerd bij tabshow, maar voordat het nieuwe tabblad is weergegeven. Gebruik event.targeten event.relatedTargetom respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.
getoond.bs.tabblad Deze gebeurtenis wordt geactiveerd bij tabshow nadat een tabblad is weergegeven. Gebruik event.targeten event.relatedTargetom respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.
verberg.bs.tab Deze gebeurtenis wordt geactiveerd wanneer een nieuw tabblad moet worden weergegeven (en dus het vorige actieve tabblad moet worden verborgen). Gebruik event.targeten om respectievelijk event.relatedTargethet huidige actieve tabblad en het nieuwe binnenkort actieve tabblad te targeten.
verborgen.bs.tabblad Deze gebeurtenis wordt geactiveerd nadat een nieuw tabblad is weergegeven (en dus het vorige actieve tabblad is verborgen). Gebruik event.targeten event.relatedTargetom respectievelijk het vorige actieve tabblad en het nieuwe actieve tabblad te targeten.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})