List groep

Listgroepen binne in fleksibele en krêftige komponint foar it werjaan fan in searje ynhâld. Feroarje en útwreidzje se om sawat elke ynhâld binnen te stypjen.

Basis foarbyld

De meast basale listgroep is in net-oardere list mei listitems en de juste klassen. Bou derop mei de folgjende opsjes, of mei jo eigen CSS as nedich.

In item
In twadde item
In tredde item
In fjirde item
En in fyfde

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Aktive items

Taheakje .activeoan in .list-group-itemom de aktive seleksje oan te jaan.

In aktyf item
In twadde item
In tredde item
In fjirde item
En in fyfde

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Utskeakele items

Taheakje .disabledoan in .list-group-itemfoar in meitsje it ferskine útskeakele. Tink derom dat guon eleminten mei .disabledek oanpast JavaSkript nedich binne om har klikeveneminten (bygelyks keppelings) folslein út te skeakeljen.

In útskeakele item
In twadde item
In tredde item
In fjirde item
En in fyfde

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Links en knoppen

Brûk <a>s of <button>s om aksjebere listgroepitems te meitsjen mei hover, útskeakele en aktive steaten troch ta te foegjen .list-group-item-action. Wy skiede dizze pseudo-klassen om te soargjen dat listgroepen makke fan net-ynteraktive eleminten (lykas <li>s of <div>s) gjin klik of tik leverje.

Wês wis dat jo de standertklassen .btnhjir net brûke .

It hjoeddeiske keppeling item In twadde link item In tredde link item In fjirde link item In útskeakele keppeling item

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Mei <button>s kinne jo ek gebrûk meitsje fan it disabledattribút ynstee fan de .disabledklasse. Spitigernôch, <a>s net stypje de útskeakele attribút.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Flush

Foegje .list-group-flushta om guon grinzen en rûne hoeken te ferwiderjen om listgroepitems râne-oan-râne yn in âlderkontener (bgl. kaarten) te meitsjen.

In item
In twadde item
In tredde item
In fjirde item
En in fyfde

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Horizontaal

Foegje .list-group-horizontalta om de yndieling fan listgroepitems te feroarjen fan fertikaal nei horizontaal oer alle brekpunten. As alternatyf, kies in responsive fariant .list-group-horizontal-{sm|md|lg|xl}om in listgroep horizontaal te meitsjen begjinnend by dat brekpunt min-width. Op it stuit kinne horizontale listgroepen net kombineare wurde mei flushlistgroepen.

ProTip: Wolle jo groepitems mei lykweardige breedte as jo horizontaal binne? Taheakje .flex-filloan elk list groep item.

In item
In twadde item
In tredde item

In item
In twadde item
In tredde item

In item
In twadde item
In tredde item

In item
In twadde item
In tredde item

In item
In twadde item
In tredde item

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Kontekstuele klassen

Brûk kontekstuele klassen om list items te stylearjen mei in steatlike eftergrûn en kleur.

In ienfâldich standert list groep item
In ienfâldich primêre list groep item
In ienfâldich sekondêr listgroepitem
In ienfâldige súkseslist groep item
In ienfâldich groep item foar gefaarlist
In ienfâldige warskôgingslist groep item
In ienfâldich ynfo list groep item
In ienfâldich ljocht list groep item
In ienfâldich donkere list groep item

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</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>

Kontekstuele klassen wurkje ek mei .list-group-item-action. Tink derom dat de tafoeging fan de hoverstilen hjir net oanwêzich is yn it foarige foarbyld. Ek stipe wurdt de .activesteat; tapasse it om in aktive seleksje oan te jaan op in kontekstuele listgroepitem.

In ienfâldich standert list groep item In ienfâldich primêre list groep item In ienfâldich sekondêr listgroepitem In ienfâldige súkseslist groep item In ienfâldich groep item foar gefaarlist In ienfâldige warskôgingslist groep item In ienfâldich ynfo list groep item In ienfâldich ljocht list groep item In ienfâldich donkere list groep item

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</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>

Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .sr-onlyklasse.

Mei badges

Foegje badges ta oan elk listgroepitem om net-lêzen tellen, aktiviteit en mear te sjen mei help fan guon nutsbedriuwen .

In list item14
In twadde list item2
In tredde list item1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Oanpaste ynhâld

Foegje hast elke HTML ta binnen, sels foar keppele listgroepen lykas de hjirûnder, mei help fan flexbox-helpprogramma's .

List groep item heading

3 dagen lyn

Guon plakhâlder ynhâld yn in paragraaf.

En wat lytse printsjes.

List groep item heading

3 dagen lyn

Guon plakhâlder ynhâld yn in paragraaf.

En wat gedempte lytse letters.

List groep item heading

3 dagen lyn

Guon plakhâlder ynhâld yn in paragraaf.

En wat gedempte lytse letters.

<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">Some placeholder content in a paragraph.</p>
    <small>And some small print.</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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

JavaScript gedrach

Brûk it ljepblêd JavaScript-plugin-ynklusyf it yndividueel as fia it kompilearre bootstrap.jsbestân-om ús listgroep út te wreidzjen om ljepblêden fan lokale ynhâld te meitsjen.

Thús Profyl Berjochten Ynstellings

Guon plakhâlder ynhâld yn in paragraaf oangeande "Thús". En wat mear ynhâld, brûkt hjir gewoan om dit ljepblêd út te foljen en te foljen. Yn produksje soene jo hjir fansels mear echte ynhâld hawwe. En net allinnich tekst. It kin fan alles wêze, echt. Tekst, bylden, formulieren.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

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

Gebrûk fan gegevensattributen

Jo kinne in listgroepnavigaasje aktivearje sûnder JavaScript te skriuwen troch gewoan oan te jaan data-toggle="list"of op in elemint. Brûk dizze gegevens attributen op .list-group-item.

<div role="tabpanel">
  <!-- 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>
</div>

Fia JavaScript

Skeakelje ljepperlist item yn fia JavaScript (elk listitem moat yndividueel aktivearre wurde):

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

Jo kinne yndividuele listitem op ferskate manieren aktivearje:

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

Om it ljepblêdpaniel te fade yn, foegje .fadeoan elk ta .tab-pane. It earste ljepblêd moat ek .showde earste ynhâld sichtber meitsje moatte.

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

Metoaden

$().tab

Aktivearret in list item elemint en ynhâld container. De ljepper moat in data-targetof in hrefrjochte op in kontenerknooppunt hawwe yn 'e 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('show')

Selekteart it opjûne listitem en lit it byhearrende paniel sjen. Elk oar listitem dat earder selektearre is wurdt net selektearre en it byhearrende paniel wurdt ferburgen. Keart werom nei de beller foardat it ljepblêd wirklik werjûn is (bygelyks foardat it shown.bs.tabevenemint bart).

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

Eveneminten

By it werjaan fan in nije ljepper, de barrens fjoer yn 'e folgjende folchoarder:

hide.bs.tab(op it aktive ljepblêd)
show.bs.tab(op it te sjen ljepblêd)
hidden.bs.tab(op 'e foarige aktive ljepper, deselde as foar it hide.bs.tabevenemint)
shown.bs.tab(op it krekt-aktive ljepblêd, deselde as foar it show.bs.tabevenemint)

As gjin ljepper wie al aktyf, de hide.bs.taben hidden.bs.tabeveneminten wurde net ûntslein.

Event type	Beskriuwing
show.bs.tab	Dit evenemint ûntspringt op ljeppershow, mar foardat de nije ljepper is werjûn. Brûk `event.target`en `event.relatedTarget`om respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
shown.bs.tab	Dit evenemint ûntspringt op ljepper sjen nei in ljepper is werjûn. Brûk `event.target`en `event.relatedTarget`om respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
hide.bs.tab	Dit barren ûntspringt as in nije ljepper werjûn wurde moat (en dus moat de foarige aktive ljepper ferburgen wurde). Brûk `event.target`en `event.relatedTarget`om respektivelik de aktive ljepper te rjochtsjen en de nije ljepper dy't gau aktyf is.
hidden.bs.tab	Dit barren ûntspringt neidat in nije ljepper wurdt werjûn (en dus is de foarige aktive ljepper ferburgen). Brûk `event.target`en `event.relatedTarget`om respektivelik de foarige aktive ljepper en de nije aktive ljepper te rjochtsjen.

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})