in English

Grupa liste

Grupe lista su fleksibilna i moćna komponenta za prikazivanje niza sadržaja. Izmijenite ih i proširite kako bi podržali gotovo svaki sadržaj unutar.

Osnovni primjer

Najosnovnija grupa lista je neuređena lista sa stavkama liste i odgovarajućim klasama. Nadogradite ga s opcijama koje slijede ili sa svojim vlastitim CSS-om po potrebi.

  • Stavka
  • 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-itemda biste označili trenutni aktivni odabir.

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

Onemogućene stavke

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

  • Onemogućena 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>

Koristite <a>s ili <button>s za kreiranje aktivnih stavki grupe sa lebdećim, onemogućenim i aktivnim stanjima dodavanjem .list-group-item-action. Odvajamo ove pseudo-klase kako bismo osigurali da grupe lista napravljene od neinteraktivnih elemenata (poput <li>s ili <div>s) ne pružaju mogućnost klika ili dodira.

Budite sigurni da ovdje ne koristite standardne .btnklase .

Trenutna stavka veze Druga stavka veze Treći link stavka Četvrti link stavka 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žavaju disabled atribut.

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

Flush

Dodajte .list-group-flushda biste uklonili neke ivice i zaobljene uglove da biste prikazali stavke grupe liste od ivice do ivice u roditeljskom kontejneru (npr. kartice).

  • Stavka
  • 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-horizontalda promijenite izgled stavki grupe liste iz okomitog u horizontalan na svim tačkama prekida. Alternativno, odaberite responzivnu varijantu .list-group-horizontal-{sm|md|lg|xl}da biste grupu liste napravili horizontalnom počevši od te tačke prekida min-width. Trenutno horizontalne grupe lista ne mogu se kombinovati sa grupama flush liste.

Savjet: Želite li stavke grupe liste jednake širine kada su horizontalne? Dodajte .flex-fillu svaku stavku liste grupe.

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

Koristite kontekstualne klase za stiliziranje stavki liste s pozadinom i bojom koja sadrži stanje.

  • Jednostavna podrazumevana grupna stavka liste
  • Jednostavna primarna grupna stavka
  • Jednostavna sekundarna grupna stavka
  • Jednostavna grupna stavka liste uspjeha
  • Jednostavna stavka liste opasnosti
  • Jednostavna grupna stavka liste upozorenja
  • Jednostavna grupna stavka info liste
  • Jednostavna grupa svjetlosne liste
  • Jednostavna grupna stavka 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 sa .list-group-item-action. Obratite pažnju na dodavanje stilova lebdenja koji ovdje nije prisutan u prethodnom primjeru. Podržava i .activedržava; primijeniti ga da označite aktivan odabir na kontekstualnoj grupi stavki liste.

Jednostavna podrazumevana grupna stavka liste Jednostavna primarna grupna stavka Jednostavna sekundarna grupna stavka Jednostavna grupna stavka liste uspjeha Jednostavna stavka liste opasnosti Jednostavna grupna stavka liste upozorenja Jednostavna grupna stavka info liste Jednostavna grupa svjetlosne liste Jednostavna grupna stavka 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 pruža samo vizualnu indikaciju, koja se neće prenijeti korisnicima pomoćnih tehnologija – kao što su čitači ekrana. Osigurajte da su informacije označene bojom ili očigledne iz samog sadržaja (npr. vidljivi tekst), ili su uključene putem alternativnih sredstava, kao što je dodatni tekst skriven .sr-onlyklasom.

Sa značkama

Dodajte značke bilo kojoj grupi liste da prikažete nepročitane brojeve, aktivnost i još mnogo toga uz pomoć nekih uslužnih programa .

  • Stavka na listi14
  • Druga stavka liste2
  • Treća stavka liste1 
<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 grupe povezanih lista poput one ispod, uz pomoć flexbox uslužnih programa .

Naslov stavke grupe
prije 3 dana

Neki sadržaj u pasusu.

I malo sitnog slova.
Naslov stavke grupe
prije 3 dana

Neki sadržaj u pasusu.

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

Neki sadržaj u pasusu.

I malo prigušenog sitnog slova. 
<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

Koristite JavaScript dodatak kartice – uključite ga pojedinačno ili preko kompajlirane bootstrap.jsdatoteke – da proširite našu grupu liste da kreirate okna lokalnog sadržaja sa tabulatorima.

Neki sadržaj rezerviranog mjesta u odlomku koji se odnosi na "Kuća". I još malo sadržaja, koji se ovdje koristi samo za popunjavanje i popunjavanje ovog panela s karticama. U produkciji, ovdje biste očito imali više stvarnog sadržaja. I ne samo tekst. Moglo bi biti bilo šta, zaista. Tekst, slike, forme.

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 liste 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ćite tabulatorsku stavku liste putem JavaScripta (svaka stavka liste mora biti aktivirana pojedinačno):

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

Pojedinačnu stavku liste 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

Fade efekat

Da bi se tabla s karticama smanjila, dodajte .fadesvakom .tab-pane. Prvo okno kartica također mora imati .showda učini 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 liste i kontejner sadržaja. Tab bi trebao imati ili data-targetciljanje hrefčvora kontejnera 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 datu stavku liste i prikazuje njeno povezano okno. Bilo koja druga stavka liste koja je prethodno odabrana postaje poništena, a njeno povezano okno je skriveno. Vraća se pozivaocu prije nego što je okno kartica zapravo prikazano (na primjer, prije nego što se shown.bs.tabdogodi događaj).

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

Događaji

Kada se prikaže nova kartica, događaji se aktiviraju sljedećim redoslijedom:

  1. hide.bs.tab(na trenutno aktivnoj kartici)
  2. show.bs.tab(na kartici za prikaz)
  3. hidden.bs.tab(na prethodnoj aktivnoj kartici, ista kao i za hide.bs.tabdogađaj)
  4. shown.bs.tab(na novo-aktivnoj 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 pokrenuti.

Vrsta događaja Opis
show.bs.tab Ovaj događaj se pokreće u prikazu 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 događaj se pokreće u prikazu kartice nakon što je kartica prikazana. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
hide.bs.tab Ovaj događaj se pokreće kada se nova kartica treba prikazati (a samim tim i prethodna aktivna kartica treba biti skrivena). Koristite event.targeti event.relatedTargetda biste ciljali trenutnu aktivnu karticu i novu karticu koja će uskoro biti aktivna.
hidden.bs.tab Ovaj događaj se 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
})