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

html

<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

html

<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

html

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

Linkovi i dugmad

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

html

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

html

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

html

<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 da bi se omogućilo bolje prilagođavanje.

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

Stavka na listi
Stavka na listi
Stavka na listi

html

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

Podnaslov
Sadržaj za stavku liste
14
Podnaslov
Sadržaj za stavku liste
14
Podnaslov
Sadržaj za stavku liste
14

html

<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

html

<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

html

<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

html

<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

html

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

html

<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 uređaje unutar 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

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

Prvi radio
Drugi radio
Treći radio

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Možete koristiti .stretched-linkon <label>s da biste omogućili klikanje na cijelu stavku grupe liste.

Prvo polje za potvrdu
Drugo polje za potvrdu
Treći potvrdni okvir

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

Varijable

Dodato u v5.2.0

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, grupe lista sada koriste lokalne CSS varijable .list-groupza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

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()mixinom.

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

Dom Profil Poruke Postavke

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

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

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

Asinhrone metode i prijelazi

Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija .

Aktivira vaš sadržaj kao element kartice.

Možete kreirati instancu kartice pomoću konstruktora, na primjer:

const bsTab = new bootstrap.Tab('#myTab')

Metoda	Opis
`dispose`	Uništava karticu elementa.
`getInstance`	Statička metoda koja vam omogućava da dobijete instancu kartice pridruženu DOM elementu, možete je koristiti ovako: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statička metoda koja vraća instancu kartice pridruženu DOM elementu ili kreira novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Odabire datu karticu i prikazuje pridruženo okno. Bilo koja druga kartica koja je prethodno odabrana postaje poništena, a povezano okno je skriveno. Vraća se pozivaocu prije nego što je tab pano zapravo prikazan (tj. prije nego što se `shown.bs.tab`događaj dogodi).

Događaji

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

hide.bs.tab(na trenutno aktivnoj kartici)
show.bs.tab(na kartici za prikaz)
hidden.bs.tab(na prethodnoj aktivnoj kartici, ista kao i za hide.bs.tabdogađaj)
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
`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.target`i `event.relatedTarget`za ciljanje trenutne aktivne kartice i nove kartice 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.target`i `event.relatedTarget`za ciljanje prethodne aktivne kartice, odnosno nove aktivne kartice.
`show.bs.tab`	Ovaj događaj se pokreće u prikazu kartice, ali prije nego što se nova kartica prikaže. Koristite `event.target`i `event.relatedTarget`za 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.target`i `event.relatedTarget`za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})