Source

Listegruppe

Listegrupper er en fleksibel og kraftig komponent for å vise en rekke innhold. Endre og utvide dem til å støtte omtrent alt innhold i dem.

Grunnleggende eksempel

Den mest grunnleggende listegruppen er en uordnet liste med listeelementer og de riktige klassene. Bygg videre på det med alternativene som følger, eller med din egen CSS etter 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 elementer

Legg .activetil en .list-group-itemfor å angi gjeldende 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>

Deaktiverte elementer

Legg .disabledtil en .list-group-itemfor å få den til å virke deaktivert. Merk at noen elementer med .disabledogså vil kreve tilpasset JavaScript for å deaktivere klikkhendelsene deres (f.eks. koblinger).

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

Bruk <a>s eller <button>s for å lage handlingsbare listegruppeelementer med hover, deaktivert og aktive tilstander ved å legge til .list-group-item-action. Vi skiller disse pseudoklassene for å sikre at listegrupper laget av ikke-interaktive elementer (som <li>s eller <div>s) ikke gir et klikk eller trykk.

Pass på at du ikke bruker standardklassene .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">Vestibulum at eros</a>
</div>

Med <button>s kan du også bruke disabledattributtet i stedet for .disabledklassen. Dessverre <a>støtter s ikke attributtet deaktivert.

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

Skyll

Legg .list-group-flushtil for å fjerne noen kanter og avrundede hjørner for å gjengi listegruppeelementer kant-til-kant i en overordnet beholder (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>

Kontekstuelle klasser

Bruk kontekstuelle klasser for å style listeelementer med en statisk bakgrunn og farge.

  • Dapibus ac facilisis i
  • Et enkelt element i primærlistegruppen
  • Et enkelt sekundært listegruppeelement
  • Et enkelt gruppeelement for suksessliste
  • Et enkelt gruppeelement for fareliste
  • Et enkelt gruppeelement på en advarselsliste
  • En enkel informasjonslistegruppeelement
  • Et enkelt lyslistegruppeelement
  • Et enkelt gruppeelement 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 jobber også med .list-group-item-action. Legg merke til tillegget av svevestilene her som ikke er til stede i forrige eksempel. Også støttet er .activestaten; bruk den for å indikere et aktivt valg på et kontekstuell listegruppeelement.

Dapibus ac facilisis i Et enkelt element i primærlistegruppen Et enkelt sekundært listegruppeelement Et enkelt gruppeelement for suksessliste Et enkelt gruppeelement for fareliste Et enkelt gruppeelement på en advarselsliste En enkel informasjonslistegruppeelement Et enkelt lyslistegruppeelement Et enkelt gruppeelement 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 hjelpeteknologier

Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .sr-onlyklassen.

Med merker

Legg til merker til et hvilket som helst listegruppeelement for å vise antall uleste, aktivitet og mer ved hjelp av noen verktøy .

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

Egendefinert innhold

Legg til nesten hvilken som helst HTML innenfor, selv for koblede listegrupper som den nedenfor, ved hjelp av flexbox-verktøy .

Listegruppeelementoverskrift
3 dager siden

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

Donec id elit non mi porta.
Listegruppeelementoverskrift
3 dager siden

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

Donec id elit non mi porta.
Listegruppeelementoverskrift
3 dager 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 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-adferd

Bruk JavaScript-plugin-fanen – inkluder den individuelt eller gjennom den kompilerte bootstrap.jsfilen – for å utvide listegruppen vår til å lage tabulatorer med lokalt innhold.

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>

Bruk av dataattributter

Du kan aktivere en listegruppenavigasjon uten å skrive noe JavaScript ved å spesifisere data-toggle="list"eller på et element. Bruk disse dataattributtene 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 må aktiveres individuelt):

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

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

$('#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 å få fanepanelet til å tone inn, legg .fadetil hver .tab-pane. Den første faneruten må også .showgjøre det opprinnelige innholdet synlig.

<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 innholdsbeholder. Tab skal ha enten en data-targeteller en hrefmålrettet beholdernode 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')

Velger det gitte listeelementet og viser tilhørende rute. Ethvert annet listeelement som tidligere ble valgt, blir opphevet og tilhørende rute er skjult. Går tilbake til den som ringer før faneruten faktisk har blitt vist (for eksempel før shown.bs.tabhendelsen inntreffer).

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

arrangementer

Når du viser en ny fane, utløses hendelsene i følgende rekkefølge:

  1. hide.bs.tab(på gjeldende aktive fane)
  2. show.bs.tab(på fanen som skal vises)
  3. hidden.bs.tab(på den forrige aktive fanen, den samme som for hide.bs.tabarrangementet)
  4. shown.bs.tab(på den nylig aktive fanen som nettopp er vist, den samme som for show.bs.tabarrangementet)

Hvis ingen fane allerede var aktiv, vil ikke hide.bs.tabog hidden.bs.tab-hendelsene bli utløst.

Hendelsestype Beskrivelse
show.bs.tab Denne hendelsen utløses på fanevisning, men før den nye fanen har blitt vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
vist.bs.tab Denne hendelsen utløses på fanevisning etter at en fane er vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
hide.bs.tab Denne hendelsen utløses når en ny fane skal vises (og dermed skal den forrige aktive fanen skjules). Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den gjeldende aktive fanen og den nye snart-aktive fanen.
hidden.bs.tab Denne hendelsen utløses etter at en ny fane vises (og dermed er den forrige aktive fanen skjult). Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den forrige aktive fanen og den nye aktive fanen. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})