Source

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.

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

Aktiewe items

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

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

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.

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

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 gemaak word van nie-interaktiewe elemente (soos <li>s of<div> s) gemaak is, nie 'n klik of tik bekostigbaarheid bied nie.

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

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

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

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.

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

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • 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 in
  • 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 in
  • 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 in
  • 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 in
  • 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>

Kontekstuele klasse

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

  • Dapibus ac facilisis in
  • '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">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>

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.

Dapibus ac facilisis in '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">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>
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 .

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

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

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

Donec id elit non mi porta.
Lys groepitem opskrif
3 dae gelede

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

Donec id elit non mi porta.
Lys groepitem opskrif
3 dae gelede

Donec id elit non mi porta gravida by 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 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.

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>

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.

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

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

$('#myList a').on('click', function (e) {
  e.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:

  1. hide.bs.tab(op die huidige aktiewe oortjie)
  2. show.bs.tab(op die om te wys-oortjie)
  3. hidden.bs.tab(op die vorige aktiewe oortjie, dieselfde een as vir die hide.bs.tabgeleentheid)
  4. 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.targeten event.relatedTargetom 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.targeten event.relatedTargetom 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.targeten event.relatedTargetom 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.targeten event.relatedTargetom onderskeidelik die vorige aktiewe oortjie en die nuwe aktiewe oortjie te teiken. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})