Preskoči na glavni sadržaj Preskoči na navigaciju dokumenata
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.

Na ovoj stranici

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 sa .disabledtakođe zahtevati 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 (kao što su <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>

Numerisano

Dodajte .list-group-numberedklasu modifikatora (i opciono koristite <ol>element) da biste se uključili u numerisane stavke grupe. Brojevi se generišu putem CSS-a (za razliku od <ol>standardnog stila pretraživača) radi boljeg postavljanja unutar stavki grupe liste i omogućavanja boljeg prilagođavanja.

Brojevi se generiraju pomoću counter-resetna <ol>, a zatim se stiliziraju i postavljaju ::beforepseudo-elementom na <li>sa counter-incrementi content.

  1. Stavka na listi
  2. Stavka na listi
  3. Stavka na listi
<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Oni odlično funkcioniraju i s prilagođenim sadržajem.

  1. Podnaslov
    Sadržaj za stavku liste
    14
  2. Podnaslov
    Sadržaj za stavku liste
    14
  3. Podnaslov
    Sadržaj za stavku liste
    14 
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

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|xxl}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
  • 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>
<ul class="list-group list-group-horizontal-xxl">
  <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 .visually-hiddenklasom.

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 bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-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" aria-current="true">
    <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>

Polje za potvrdu i radio

Postavite Bootstrap-ove potvrdne okvire i radio u okviru stavki grupe liste i prilagodite ih po potrebi. Možete ih koristiti bez <label>s, ali ne zaboravite uključiti aria-labelatribut i vrijednost za pristupačnost.

  • Prvo polje za potvrdu
  • Drugo polje za potvrdu
  • Treći potvrdni okvir
  • Četvrto polje za potvrdu
  • Peto polje za potvrdu
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

A ako želite <label>s kao .list-group-itemza velika pogođena područja, možete i to učiniti.

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Sass

Varijable

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixins

Koristi se u kombinaciji sa $theme-colorsza generiranje kontekstualnih klasa varijanti za .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Petlja

Petlja koja generiše klase modifikatora sa list-group-item-variant()miksinom.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Fade efekat

Da bi se tabla s karticama smanjila, dodajte .fadesvakom .tab-pane. Prvo okno kartica također mora imati .showda početni sadržaj bude vidljiv.

<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

constructor

Aktivira element stavke liste i kontejner sadržaja. Tab bi trebao imati ili data-bs-targetciljni hrefčvor kontejnera u DOM-u.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-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>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

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.tabdogađaj dogodi).

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

dispose

Uništava karticu elementa.

getInstance

Statička metoda koja vam omogućava da dobijete instancu kartice koja je povezana sa DOM elementom

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Statička metoda koja vam omogućava da dobijete instancu kartice povezanu s DOM elementom ili kreirate novu u slučaju da nije inicijalizirana

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

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 nova kartica prikaže. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
shown.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. 
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}