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.

Na ovoj stranici

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

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-itemza označavanje trenutno aktivnog odabira.

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>

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

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>

Veze i gumbi

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

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žava atribut onemogućen.

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>

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

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>

Numerirano

Dodajte .list-group-numberedklasu modifikatora (i izborno upotrijebite <ol>element) da biste se uključili u numerirane stavke grupe popisa. Brojevi se generiraju putem CSS-a (za razliku od <ol>zadanog stila preglednika) radi boljeg postavljanja unutar stavki grupe popisa i omogućavanja bolje prilagodbe.

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

Stavka popisa
Stavka popisa
Stavka popisa

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 također izvrsno funkcioniraju s prilagođenim sadržajem.

Podnaslov
Sadržaj za stavku popisa
14
Podnaslov
Sadržaj za stavku popisa
14
Podnaslov
Sadržaj za stavku popisa
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-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|xxl}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

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

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

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

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

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

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 Bootstrapove potvrdne okvire i radio unutar stavki grupe popisa i prilagodite ih prema potrebi. Možete ih koristiti bez <label>s, ali ne zaboravite uključiti aria-labelatribut i vrijednost za pristupačnost.

Prvi potvrdni okvir
Drugi potvrdni okvir
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 kako biste cijelu stavku grupe popisa mogli kliknuti.

Prvi potvrdni okvir
Drugi potvrdni okvir
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

Dodano u v5.2.0

Kao dio Bootstrapovog pristupa CSS varijablama koji se razvija, grupe popisa sada koriste lokalne CSS varijable .list-groupza poboljšanu prilagodbu u stvarnom vremenu. Vrijednosti za CSS varijable postavljaju se putem Sass-a, tako da je i dalje podržana prilagodba Sass-a.

  --#{$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 s $theme-colorsza generiranje klasa kontekstualne varijante 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 generira klase modifikatora s 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

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.

Dom Profil Poruke postavke

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-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 popisa 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ći stavku popisa koja se može tabbirati putem JavaScripta (svaku stavku popisa potrebno je zasebno aktivirati):

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

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

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

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

Aktivira vaš sadržaj kao element kartice.

Možete stvoriti 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ćuje dobivanje instance kartice povezane s DOM elementom, možete je koristiti ovako: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statička metoda koja vraća instancu kartice pridruženu DOM elementu ili stvara novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Odabire zadanu karticu i prikazuje povezano okno. Bilo koja druga kartica koja je prethodno bila odabrana postaje neodabrana, a povezano okno skriveno. Vraća se pozivatelju prije nego što se okno kartice stvarno prikaže (tj. prije nego što se `shown.bs.tab`događaj dogodi).

Događaji

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

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

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

Vrsta događaja	Opis
`hide.bs.tab`	Ovaj se događaj pokreće kada se treba prikazati nova kartica (i stoga se prethodna aktivna kartica treba sakriti). Koristite `event.target`i `event.relatedTarget`za ciljanje trenutno aktivne kartice i nove kartice koja će uskoro biti aktivna.
`hidden.bs.tab`	Ovaj se događaj 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 se događaj aktivira prilikom prikaza kartice, ali prije nego što se prikaže nova kartica. Koristite `event.target`i `event.relatedTarget`za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
`shown.bs.tab`	Ovaj se događaj pokreće na 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
  })
})