Source

Seznam skupine

Skupine seznamov so prilagodljiva in zmogljiva komponenta za prikaz niza vsebin. Spremenite in razširite jih tako, da podpirajo skoraj vsako vsebino znotraj.

Osnovni primer

Najosnovnejša skupina seznamov je neurejen seznam s postavkami seznama in ustreznimi razredi. Nadgradite ga z možnostmi, ki sledijo, ali po potrebi s svojim lastnim CSS.

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

Aktivni predmeti

Dodajte .activek a .list-group-item, da označite trenutno aktivno izbiro.

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

Onemogočeni predmeti

Dodajte .disabledv a .list-group-item, da bo videti onemogočeno. Upoštevajte, da .disabledbodo nekateri elementi z zahtevali tudi JavaScript po meri, da v celoti onemogočijo dogodke klikov (npr. povezave).

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

Uporabite <a>s ali <button>s za ustvarjanje uporabnih elementov skupine seznamov s stanjem lebdenja, onemogočenega in aktivnega, tako da dodate.list-group-item-action . Te psevdorazrede ločimo, da zagotovimo, da skupine seznamov, sestavljene iz neinteraktivnih elementov (kot <li>je s ali <div>s), ne nudijo možnosti klika ali dotika.

Pazite, da tukaj ne uporabljate standardnih .btnrazredov .

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

Z <button>s lahko uporabite tudi disabledatribut namesto .disabledrazreda. Na žalost <a>s ne podpira atributa disabled.

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

Izperite

Dodajte .list-group-flush, če želite odstraniti nekatere obrobe in zaobljene vogale za upodabljanje elementov skupine seznama od roba do roba v nadrejenem vsebniku (npr. kartice).

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

Kontekstualni razredi

Uporabite kontekstualne razrede za oblikovanje elementov seznama z ozadjem in barvo, ki spremlja stanje.

  • Dapibus ac facilisis in
  • To je primarni element skupine seznama
  • To je element skupine sekundarnega seznama
  • To je postavka skupine uspešnih seznamov
  • To je element skupine nevarnosti
  • To je element skupine opozorilnega seznama
  • To je postavka skupine informacijskega seznama
  • To je lahek element skupine seznama
  • To je element skupine temnega seznama
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

Kontekstualni razredi delujejo tudi z .list-group-item-action. Upoštevajte dodatek slogov lebdenja, ki tukaj niso prisotni v prejšnjem primeru. Podprta je tudi .activedržava; uporabite za označevanje aktivnega izbora na elementu kontekstualne skupine seznama.

Dapibus ac facilisis in To je primarni element skupine seznama To je element skupine sekundarnega seznama To je postavka skupine uspešnih seznamov To je element skupine nevarnosti To je element skupine opozorilnega seznama To je postavka skupine informacijskega seznama To je lahek element skupine seznama To je element skupine temnega seznama 
<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">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .sr-onlyrazredom.

Z značkami

Dodajte značke kateremu koli elementu skupine na seznamu, da prikažete število neprebranih, dejavnost in drugo s pomočjo nekaterih pripomočkov .

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

Vsebina po meri

Dodajte skoraj kateri koli HTML znotraj, tudi za skupine povezanih seznamov, kot je ta spodaj, s pomočjo pripomočkov flexbox .

Naslov elementa skupine seznama
pred 3 dnevi

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

Donec id elit non mi porta.
Naslov elementa skupine seznama
pred 3 dnevi

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

Donec id elit non mi porta.
Naslov elementa skupine seznama
pred 3 dnevi

Donec id elit non mi porta gravida at eget metus. Mecen 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>

obnašanje JavaScripta

Uporabite vtičnik JavaScript za zavihke – vključite ga posamično ali prek prevedene bootstrap.jsdatoteke – da razširite našo skupino seznamov in ustvarite podokna z zavihki lokalne vsebine.

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

Uporaba podatkovnih atributov

Navigacijo po skupinah seznamov lahko aktivirate brez pisanja JavaScripta tako, da preprosto določite data-toggle="list"ali na elementu. Uporabite te atribute podatkov na .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>

Prek JavaScripta

Omogoči element seznama, ki ga je mogoče zavihkati, prek JavaScripta (vsak element seznama je treba aktivirati posebej):

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

Posamezen element seznama lahko aktivirate na več načinov:

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

Učinek bledenja

.fadeČe želite, da podokno z zavihki zbledi, vsakemu dodajte .tab-pane. V prvem podoknu z zavihki mora biti .showvidna tudi začetna vsebina.

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

Metode

$().tab

Aktivira element elementa seznama in vsebnik vsebine. Zavihek mora imeti bodisi data-targetali hrefciljno usmerjen na vozlišče vsebnika v 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('pokaži')

Izbere dani element seznama in prikaže povezano podokno. Kateri koli drug element seznama, ki je bil prej izbran, postane neizbran in njegovo povezano podokno je skrito. Vrne se klicatelju, preden je podokno z zavihki dejansko prikazano (na primer, preden shown.bs.tabpride do dogodka).

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

Dogodki

Pri prikazu novega zavihka se dogodki sprožijo v naslednjem vrstnem redu:

  1. hide.bs.tab(na trenutno aktivnem zavihku)
  2. show.bs.tab(na zavihku za prikaz)
  3. hidden.bs.tab(na prejšnjem aktivnem zavihku, enak kot za hide.bs.tabdogodek)
  4. shown.bs.tab(na novoaktivnem pravkar prikazanem zavihku, isti kot za show.bs.tabdogodek)

Če noben zavihek še ni bil aktiven, se dogodki hide.bs.tabin hidden.bs.tabne bodo sprožili.

Vrsta dogodka Opis
show.bs.tab Ta dogodek se sproži ob prikazu zavihka, vendar preden je prikazan nov zavihek. Uporabite event.targetin event.relatedTargetza ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo).
prikazano.bs.tab Ta dogodek se sproži na prikazu zavihkov po prikazu zavihka. Uporabite event.targetin event.relatedTargetza ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo).
hide.bs.tab Ta dogodek se sproži, ko je treba prikazati nov zavihek (in tako naj bi bil prejšnji aktivni zavihek skrit). Uporabite event.targetin event.relatedTargetza ciljanje na trenutni aktivni zavihek oziroma novi zavihek, ki bo kmalu aktiven.
skriti.bs.tab Ta dogodek se sproži, ko je prikazan nov zavihek (in tako je prejšnji aktivni zavihek skrit). Uporabite event.targetin event.relatedTargetza ciljanje prejšnjega aktivnega zavihka oziroma novega aktivnega zavihka. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})