Lys groep

Lysgroepe is 'n buigsame en kragtige komponent om 'n reeks inhoud te vertoon. Verander en brei dit uit om omtrent enige inhoud binne te ondersteun.

Basiese voorbeeld

Die mees basiese lysgroep is 'n ongeordende lys met lysitems en die regte klasse. Bou daarop met die opsies wat volg, of met jou eie CSS soos nodig.

N item
'n Tweede item
'n Derde item
'n Vierde item
En 'n vyfde een

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

Aktiewe items

Voeg .activeby 'n .list-group-itemom die huidige aktiewe keuse aan te dui.

'n Aktiewe item
'n Tweede item
'n Derde item
'n Vierde item
En 'n vyfde een

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

Gedeaktiveerde items

Voeg .disabledby 'n .list-group-itemom dit gedeaktiveer te laat lyk . Let daarop dat sommige elemente met .disabledook gepasmaakte JavaScript sal vereis om hul klikgebeurtenisse (bv. skakels) ten volle te deaktiveer.

'n Gestremde item
'n Tweede item
'n Derde item
'n Vierde item
En 'n vyfde een

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

Skakels en knoppies

Gebruik <a>s of <button>s om uitvoerbare lys groepitems te skep met sweef, gedeaktiveerde en aktiewe toestande deur by te voeg .list-group-item-action. Ons skei hierdie pseudo-klasse om te verseker dat lysgroepe wat van nie-interaktiewe elemente (soos <li>e of <div>s) gemaak is, nie 'n klik of tik bekostigbaarheid bied nie.

Maak seker dat jy nie die standaard .btnklasse hier gebruik nie .

Die huidige skakelitem 'n Tweede skakelitem 'n Derde skakelitem 'n Vierde skakelitem 'n Gedeaktiveerde skakelitem

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

Met <button>s kan jy ook gebruik maak van die disabledkenmerk in plaas van die .disabledklas. Ongelukkig <a>ondersteun s nie die gestremde kenmerk nie.

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

Spoel

Voeg .list-group-flushby om sommige grense en afgeronde hoeke te verwyder om lysgroepitems rand-tot-rand in 'n ouerhouer (bv. kaarte) weer te gee.

N item
'n Tweede item
'n Derde item
'n Vierde item
En 'n vyfde een

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

Horisontaal

Voeg .list-group-horizontalby om die uitleg van lysgroepitems van vertikaal na horisontaal oor alle breekpunte te verander. Alternatiewelik, kies 'n responsiewe variant .list-group-horizontal-{sm|md|lg|xl}om 'n lysgroep horisontaal te maak wat by daardie breekpunt begin min-width. Tans kan horisontale lysgroepe nie met spoellysgroepe gekombineer word nie.

ProTip: Wil jy groepitems met gelyke breedte lys hê wanneer dit horisontaal is? Voeg .flex-fillby elke lys groep item.

N item
'n Tweede item
'n Derde item

N item
'n Tweede item
'n Derde item

N item
'n Tweede item
'n Derde item

N item
'n Tweede item
'n Derde item

N item
'n Tweede item
'n Derde 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 klasse

Gebruik kontekstuele klasse om lysitems met 'n statige agtergrond en kleur te styl.

'n Eenvoudige verstek lys groep item
'n Eenvoudige primêre lys groep item
'n Eenvoudige sekondêre lys groep item
'n Eenvoudige sukseslysgroepitem
'n Eenvoudige gevaarlysgroepitem
'N Eenvoudige waarskuwing lys groep item
'n Eenvoudige inligting lys groep item
'n Eenvoudige ligte lys groep item
'N Eenvoudige donker lys 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 klasse werk ook met .list-group-item-action. Let op die byvoeging van die sweefstyle wat hier nie in die vorige voorbeeld voorkom nie. Die staat word ook ondersteun .active; pas dit toe om 'n aktiewe seleksie op 'n kontekstuele lysgroepitem aan te dui.

'n Eenvoudige verstek lys groep item 'n Eenvoudige primêre lys groep item 'n Eenvoudige sekondêre lys groep item 'n Eenvoudige sukseslysgroepitem 'n Eenvoudige gevaarlysgroepitem 'N Eenvoudige waarskuwing lys groep item 'n Eenvoudige inligting lys groep item 'n Eenvoudige ligte lys groep item 'N Eenvoudige donker lys 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>

Dra betekenis aan ondersteunende tegnologieë oor

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .sr-onlyklas versteek is.

Met kentekens

Voeg kentekens by enige lysgroepitem om ongeleesde tellings, aktiwiteit en meer te wys met behulp van sommige nutsprogramme .

'n Lysitem14
'n Tweede lysitem2
'n Derde lysitem1

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

Pasgemaakte inhoud

Voeg byna enige HTML binne, selfs vir gekoppelde lysgroepe soos die een hieronder, met behulp van flexbox-nutsprogramme .

Lys groepitem opskrif

3 dae gelede

Sommige plekhouer-inhoud in 'n paragraaf.

En 'n klein skrif.

Lys groepitem opskrif

3 dae gelede

Sommige plekhouer-inhoud in 'n paragraaf.

En 'n gedempte kleinskrif.

Lys groepitem opskrif

3 dae gelede

Sommige plekhouer-inhoud in 'n paragraaf.

En 'n gedempte kleinskrif.

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

Gebruik die oortjie JavaScript-inprop—sluit dit individueel of deur die saamgestelde bootstrap.jslêer in—om ons lysgroep uit te brei om oortjies van plaaslike inhoud te skep.

Tuis Profiel Boodskappe Instellings

Sommige plekhouer-inhoud in 'n paragraaf wat met "Tuis" verband hou. En nog 'n bietjie inhoud, wat hier net gebruik word om hierdie oortjiepaneel uit te vul en te vul. In produksie sou jy natuurlik meer werklike inhoud hier hê. En nie net teks nie. Dit kan enigiets wees, regtig. Teks, beelde, vorms.

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>

Die gebruik van data-kenmerke

Jy kan 'n lysgroepnavigasie aktiveer sonder om enige JavaScript te skryf deur bloot 'n element te spesifiseer data-toggle="list"of op 'n element. Gebruik hierdie data-kenmerke 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>

Via JavaScript

Aktiveer tabbare lysitem via JavaScript (elke lysitem moet individueel geaktiveer word):

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

Jy kan individuele lysitem op verskeie maniere aktiveer:

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

Vervaag effek

Om oortjiespaneel te laat vervaag, voeg .fadeby elke .tab-pane. Die eerste oortjie-venster moet ook .showdie aanvanklike inhoud sigbaar maak.

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

Metodes

$().tab

Aktiveer 'n lysitemelement en inhoudhouer. Tab moet óf 'n data-targetóf 'n hrefteiken 'n houer nodus in die DOM hê.

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

Kies die gegewe lysitem en wys die gepaardgaande paneel. Enige ander lysitem wat voorheen gekies is, word ongeselekteer en die gepaardgaande paneel word versteek. Keer terug na die beller voordat die oortjie-venster werklik gewys is (byvoorbeeld voor die shown.bs.tabgebeurtenis plaasvind).

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

Gebeurtenisse

Wanneer 'n nuwe oortjie gewys word, begin die gebeure in die volgende volgorde:

hide.bs.tab(op die huidige aktiewe oortjie)
show.bs.tab(op die om te wys-oortjie)
hidden.bs.tab(op die vorige aktiewe oortjie, dieselfde een as vir die hide.bs.tabgeleentheid)
shown.bs.tab(op die nuut-aktiewe oortjie wat pas gewys is, dieselfde een as vir die show.bs.tabgeleentheid)

As geen oortjie reeds aktief was nie, sal die hide.bs.taben hidden.bs.tabgebeure nie geaktiveer word nie.

Soort gebeurtenis	Beskrywing
show.bs.tab	Hierdie gebeurtenis begin op oortjievertoning, maar voordat die nuwe oortjie gewys is. Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
getoon.bs.tab	Hierdie gebeurtenis begin op oortjievertoning nadat 'n oortjie gewys is. Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
versteek.bs.tab	Hierdie gebeurtenis begin wanneer 'n nuwe oortjie gewys moet word (en dus moet die vorige aktiewe oortjie versteek word). Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die huidige aktiewe oortjie en die nuwe wat binnekort aktief sal wees, te teiken.
hidden.bs.tab	Hierdie gebeurtenis begin nadat 'n nuwe oortjie gewys is (en dus word die vorige aktiewe oortjie versteek). Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die vorige aktiewe oortjie en die nuwe aktiewe oortjie te teiken.

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