in English

Grupa popisa

Grupe popisa su fleksibilna i moćna komponenta za prikaz niza sadržaja. Izmijenite ih i proširite tako da podržavaju bilo koji sadržaj unutar njih.

Osnovni primjer

Najosnovnija grupa popisa je neuređeni popis sa stavkama popisa i odgovarajućim klasama. Nadogradite ga s opcijama koje slijede ili s vlastitim CSS-om po potrebi.

  • Stvar
  • Druga stavka
  • Treća stavka
  • Četvrta stavka
  • I peti
<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>

Aktivne stavke

Dodajte .activeu a .list-group-itemza označavanje trenutno aktivnog odabira.

  • Aktivna stavka
  • Druga stavka
  • Treća stavka
  • Četvrta stavka
  • I peti
<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>

Onesposobljeni predmeti

Dodajte .disabledu a .list-group-itemkako bi izgledalo onemogućeno. Imajte na umu da će neki elementi .disabledtakođer zahtijevati prilagođeni JavaScript kako bi u potpunosti onemogućili svoje klikove (npr. veze).

  • Onesposobljena stavka
  • Druga stavka
  • Treća stavka
  • Četvrta stavka
  • I peti
<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>

Upotrijebite <a>s ili <button>s za stvaranje aktivnih stavki grupe popisa sa stanjima lebdenja, onemogućenim i aktivnim dodavanjem .list-group-item-action. Odvajamo te pseudoklase kako bismo osigurali da grupe popisa sastavljene od neinteraktivnih elemenata (kao što <li>su s ili <div>s) ne pružaju mogućnost klika ili dodira.

Pazite da ovdje ne koristite standardne .btnklase .

Trenutna stavka veze Druga poveznica Treća poveznica Četvrta stavka veze Onemogućena stavka veze 
<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>

Sa <button>s, također možete koristiti disabledatribut umjesto .disabledklase. Nažalost, <a>s ne podržava atribut onemogućen.

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

Ispiranje

Dodaj .list-group-flushza uklanjanje nekih obruba i zaobljenih kutova za prikaz stavki grupe popisa od ruba do ruba u nadređenom spremniku (npr. kartice).

  • Stvar
  • Druga stavka
  • Treća stavka
  • Četvrta stavka
  • I peti
<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>

Horizontalno

Dodajte .list-group-horizontalza promjenu izgleda stavki grupe popisa iz okomitog u vodoravni na svim prijelomnim točkama. Alternativno, odaberite responzivnu varijantu .list-group-horizontal-{sm|md|lg|xl}da grupa popisa bude vodoravna počevši od te prijelomne točke min-width. Trenutačno se horizontalne grupe popisa ne mogu kombinirati s grupama popisa za ispiranje.

Stručni savjet: Želite li horizontalne stavke popisa jednake širine? Dodajte .flex-fillsvakoj grupi popisnih stavki.

  • Stvar
  • Druga stavka
  • Treća stavka
  • Stvar
  • Druga stavka
  • Treća stavka
  • Stvar
  • Druga stavka
  • Treća stavka
  • Stvar
  • Druga stavka
  • Treća stavka
  • Stvar
  • Druga stavka
  • Treća stavka
<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>

Kontekstualne nastave

Upotrijebite kontekstualne klase za stiliziranje stavki na popisu s pozadinom i bojom koja će pratiti stanje.

  • Jednostavna zadana stavka grupe popisa
  • Jednostavna primarna stavka grupe popisa
  • Jednostavna sekundarna stavka grupe popisa
  • Jednostavna stavka grupe popisa uspjeha
  • Jednostavna stavka s popisa opasnosti
  • Jednostavna stavka grupe s popisa upozorenja
  • Jednostavna stavka grupe s popisa informacija
  • Jednostavna lagana stavka grupe popisa
  • Jednostavna stavka grupe tamne liste
<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>

Kontekstualne klase također rade s .list-group-item-action. Obratite pažnju na dodavanje stilova lebdenja ovdje koji nisu prisutni u prethodnom primjeru. Podržana je i .activedržava; primijeniti ga za označavanje aktivnog odabira na kontekstualnoj stavci grupe popisa.

Jednostavna zadana stavka grupe popisa Jednostavna primarna stavka grupe popisa Jednostavna sekundarna stavka grupe popisa Jednostavna stavka grupe popisa uspjeha Jednostavna stavka s popisa opasnosti Jednostavna stavka grupe s popisa upozorenja Jednostavna stavka grupe s popisa informacija Jednostavna lagana stavka grupe popisa Jednostavna stavka grupe tamne liste 
<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>
Prenošenje značenja pomoćnim tehnologijama

Korištenje boje za dodavanje značenja daje samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači zaslona. Osigurajte da su informacije označene bojom očite iz samog sadržaja (npr. vidljivog teksta) ili da su uključene alternativnim sredstvima, kao što je dodatni tekst skriven s .sr-onlyklasom.

Sa značkama

Dodajte značke bilo kojoj stavci grupe popisa kako biste prikazali broj nepročitanih, aktivnosti i više uz pomoć nekih uslužnih programa .

  • Stavka popisa14
  • Druga stavka popisa2
  • Treća stavka popisa1 
<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>

Prilagođeni sadržaj

Dodajte gotovo bilo koji HTML unutar, čak i za povezane grupe popisa poput ove ispod, uz pomoć uslužnih programa flexbox .

Naslov stavke grupe popisa
prije 3 dana

Neki sadržaj rezerviranog mjesta u odlomku.

I malo sitnog tiska.
Naslov stavke grupe popisa
prije 3 dana

Neki sadržaj rezerviranog mjesta u odlomku.

I malo prigušenog sitnog tiska.
Naslov stavke grupe popisa
prije 3 dana

Neki sadržaj rezerviranog mjesta u odlomku.

I malo prigušenog sitnog tiska. 
<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 ponašanje

Upotrijebite JavaScript dodatak za kartice—uključite ga pojedinačno ili putem kompilirane bootstrap.jsdatoteke—da biste proširili našu grupu popisa za stvaranje okna s karticama lokalnog sadržaja.

Neki sadržaj rezerviranog mjesta u odlomku koji se odnosi na "Početnu". I još malo sadržaja koji se ovdje koristi samo za ispunjavanje ove ploče s karticama. U produkciji biste ovdje očito imali više stvarnog sadržaja. I ne samo tekst. Moglo bi biti bilo što, stvarno. Tekst, slike, obrasci.

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>

Korištenje atributa podataka

Možete aktivirati navigaciju grupe popisa bez pisanja JavaScripta jednostavnim navođenjem data-toggle="list"ili na elementu. Koristite ove atribute podataka na .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>

Preko JavaScripta

Omogući stavku popisa koja se može tabbirati putem JavaScripta (svaku stavku popisa potrebno je zasebno aktivirati):

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

Pojedinačnu stavku popisa možete aktivirati na nekoliko načina:

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

Efekt blijeđenja

Da bi ploča s karticama blijedjela, dodajte .fadesvakoj .tab-pane. Prvo okno kartice također mora .showučiniti početni sadržaj vidljivim.

<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 stavke popisa i spremnik sadržaja. Kartica bi trebala imati data-targetili hrefciljanje čvora spremnika u DOM-u.

<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('prikaži')

Odabire zadanu stavku popisa i prikazuje povezano okno. Bilo koja druga stavka popisa koja je prethodno odabrana postaje neodabrana, a povezano okno skriveno. Vraća se pozivatelju prije nego što se okno kartice stvarno prikaže (na primjer, prije nego što se shown.bs.tabdogađaj dogodi).

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

Događaji

Kada se prikazuje nova kartica, događaji se aktiviraju sljedećim redoslijedom:

  1. hide.bs.tab(na trenutno aktivnoj kartici)
  2. show.bs.tab(na kartici koje će biti prikazano)
  3. hidden.bs.tab(na prethodnoj aktivnoj kartici, ista kao za hide.bs.tabdogađaj)
  4. shown.bs.tab(na novoaktivnoj upravo prikazanoj kartici, ista kao i za show.bs.tabdogađaj)

Ako nijedna kartica već nije bila aktivna, događaji hide.bs.tabi hidden.bs.tabneće se aktivirati.

Vrsta događaja Opis
pokazati.bs.tab Ovaj se događaj aktivira prilikom prikaza kartice, ali prije nego što se prikaže nova kartica. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
prikazano.bs.tab Ovaj se događaj pokreće na prikazu kartice nakon što je kartica prikazana. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
sakriti.bs.tab Ovaj se događaj pokreće kada se treba prikazati nova kartica (i stoga se prethodna aktivna kartica treba sakriti). Koristite event.targeti event.relatedTargetza ciljanje trenutno aktivne kartice i nove kartice koja će uskoro biti aktivna.
skriven.bs.tab Ovaj se događaj pokreće nakon što se prikaže nova kartica (i stoga je prethodna aktivna kartica skrivena). Koristite event.targeti event.relatedTargetza ciljanje prethodne aktivne kartice odnosno nove aktivne kartice. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})