Source

Listegruppe

Listegrupper er en fleksibel og kraftfuld komponent til at vise en række indhold. Rediger og udvid dem til at understøtte stort set alt indhold indeni.

Grundlæggende eksempel

Den mest grundlæggende listegruppe er en uordnet liste med listeelementer og de rigtige klasser. Byg videre på det med de muligheder, der følger, eller med din egen CSS efter behov.

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

Tilføj .activetil a .list-group-itemfor at angive det aktuelle aktive valg.

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

Deaktiverede varer

Tilføj .disabledtil en .list-group-itemfor at få den til at se deaktiveret ud. Bemærk, at nogle elementer med .disabledogså vil kræve tilpasset JavaScript for fuldt ud at deaktivere deres klikhændelser (f.eks. links).

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

Brug <a>s eller <button>s til at oprette handlingsbare listegruppeelementer med svævende, deaktiveret og aktive tilstande ved at tilføje .list-group-item-action. Vi adskiller disse pseudoklasser for at sikre, at listegrupper lavet af ikke-interaktive elementer (som <li>s eller <div>s) ikke giver et klik eller tryk.

Sørg for ikke at bruge standardklasserne .btnher .

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

Med <button>s kan du også gøre brug af disabledattributten i stedet for .disabledklassen. Desværre <a>understøtter s ikke attributten deaktiveret.

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

Flush

Tilføj .list-group-flushfor at fjerne nogle kanter og afrundede hjørner for at gengive listegruppeelementer kant-til-kant i en overordnet container (f.eks. kort).

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

Vandret

Tilføj .list-group-horizontalfor at ændre layoutet af listegruppeelementer fra lodret til vandret på tværs af alle brudpunkter. Alternativt kan du vælge en responsiv variant .list-group-horizontal-{sm|md|lg|xl}for at gøre en listegruppe vandret, der starter ved det pågældende brudpunkt min-width. I øjeblikket kan horisontale listegrupper ikke kombineres med flush-listegrupper.

ProTip: Vil du have samme bredde listegruppeelementer, når de er vandrette? Tilføj .flex-filltil hvert listegruppeelement.

  • Cras justo odio
  • Dapibus ac facilisis i
  • Morbi leo risus
<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 i
  • Morbi leo risus
<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 i
  • Morbi leo risus
<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 i
  • Morbi leo risus
<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 i
  • Morbi leo risus
<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>

Kontekstuelle klasser

Brug kontekstuelle klasser til at style listeelementer med en tilstandsfuld baggrund og farve.

  • Dapibus ac facilisis i
  • Et simpelt element i primær listegruppe
  • Et simpelt sekundært listegruppeemne
  • Et simpelt gruppeelement på en succesliste
  • Et simpelt gruppeelement på en fareliste
  • Et simpelt gruppeelement på en advarselsliste
  • Et simpelt gruppeelement på en infoliste
  • Et simpelt lyslistegruppeemne
  • Et simpelt gruppeemne på mørk 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>

Kontekstuelle klasser arbejder også med .list-group-item-action. Bemærk tilføjelsen af ​​svævestilene her, som ikke er til stede i det foregående eksempel. Også støttet er .activestaten; anvende det for at angive et aktivt valg på et kontekstuel listegruppeemne.

Dapibus ac facilisis i Et simpelt element i primær listegruppe Et simpelt sekundært listegruppeemne Et simpelt gruppeelement på en succesliste Et simpelt gruppeelement på en fareliste Et simpelt gruppeelement på en advarselsliste Et simpelt gruppeelement på en infoliste Et simpelt lyslistegruppeemne Et simpelt gruppeemne på mørk 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>
Formidle mening til hjælpeteknologier

Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at informationer, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .sr-onlyklassen.

Med badges

Føj badges til ethvert listegruppeelement for at vise ulæste optællinger, aktivitet og mere ved hjælp af nogle hjælpeprogrammer .

  • Cras justo odio14
  • Dapibus ac facilisis i2
  • 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>

Tilpasset indhold

Tilføj næsten enhver HTML indeni, selv for linkede listegrupper som den nedenfor, ved hjælp af flexbox-værktøjer .

Overskrift for listegruppeelementer
3 dage siden

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

Donec id elit non mi porta.
Overskrift for listegruppeelementer
3 dage siden

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

Donec id elit non mi porta.
Overskrift for listegruppeelementer
3 dage siden

Donec id elit non mi porta gravida at 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 adfærd

Brug fanebladet JavaScript-plugin - inkluder det individuelt eller gennem den kompilerede bootstrap.jsfil - til at udvide vores listegruppe til at oprette faneblade med lokalt indhold.

Velit aute mollit ipsum ad dolor consectetur nulla oficia 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>

Brug af dataattributter

Du kan aktivere en listegruppenavigation uden at skrive JavaScript ved blot at angive data-toggle="list"eller på et element. Brug disse dataattributter på .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

Aktiver tabulatorlisteelement via JavaScript (hvert listeelement skal aktiveres individuelt):

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

Du kan aktivere individuelle listeelementer på flere måder:

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

For at få fanepanelet til at falme ind, skal du tilføje .fadetil hver .tab-pane. Den første fanerude skal også .showgøre det oprindelige indhold synligt.

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

Metoder

$().tab

Aktiverer et listeelementelement og indholdsbeholder. Tab skal have enten en data-targeteller en hrefmålretning mod en containernode i 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('vis')

Vælger det givne listeelement og viser dets tilhørende rude. Ethvert andet listeelement, der tidligere er valgt, bliver fravalgt, og dets tilknyttede rude skjules. Vender tilbage til den, der ringer, før faneruden faktisk er blevet vist (f.eks. før shown.bs.tabhændelsen indtræffer).

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

Begivenheder

Når du viser en ny fane, udløses begivenhederne i følgende rækkefølge:

  1. hide.bs.tab(på den aktuelle aktive fane)
  2. show.bs.tab(på fanen der skal vises)
  3. hidden.bs.tab(på den forrige aktive fane, den samme som for hide.bs.tabbegivenheden)
  4. shown.bs.tab(på det nyligt aktive faneblad, det samme som for show.bs.tabbegivenheden)

Hvis ingen fane allerede var aktiv, vil hide.bs.tabbegivenhederne hidden.bs.tabog ikke blive udløst.

Begivenhedstype Beskrivelse
show.bs.tab Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
vist.bs.faneblad Denne begivenhed udløses på faneshow, efter at en fane er blevet vist. Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
hide.bs.tab Denne hændelse udløses, når en ny fane skal vises (og dermed skal den tidligere aktive fane skjules). Brug event.targetog event.relatedTargettil at målrette henholdsvis den aktuelle aktive fane og den nye snart-aktive fane.
skjult.bs.fane Denne hændelse udløses, efter at en ny fane er vist (og dermed er den tidligere aktive fane skjult). Brug event.targetog event.relatedTargettil at målrette henholdsvis den forrige aktive fane og den nye aktive fane. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})