Zerrenda taldea

Zerrenda-taldeak osagai malgu eta indartsuak dira eduki sorta bat bistaratzeko. Aldatu eta hedatu ia edozein eduki onartzeko.

Orrialde honetan

Oinarrizko adibidea

Zerrenda talde oinarrizkoena ordenatu gabeko zerrenda bat da, zerrendako elementuekin eta klase egokiekin. Eraiki ezazu ondoko aukerekin, edo zure CSSarekin behar duzunean.

Elementu bat
Bigarren elementu bat
Hirugarren elementu bat
Laugarren elementu bat
Eta bosgarren bat

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>

Elementu aktiboak

Gehitu .activea .list-group-item-ri uneko hautapen aktiboa adierazteko.

Elementu aktibo bat
Bigarren elementu bat
Hirugarren elementu bat
Laugarren elementu bat
Eta bosgarren bat

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>

Desgaitutako elementuak

Gehitu .disableda- .list-group-itemri desgaituta agertzeko . Kontuan izan elementu batzuek .disabledJavaScript pertsonalizatua ere beharko dutela klik-gertaerak guztiz desgaitzeko (adibidez, estekak).

Desgaitutako elementu bat
Bigarren elementu bat
Hirugarren elementu bat
Laugarren elementu bat
Eta bosgarren bat

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>

Estekak eta botoiak

Erabili <a>s edo <button>s zerrendako talde-elementuak pasatzeko, desgaituta eta aktibo dauden egoerak sortzeko, gehituz.list-group-item-action . Sasi-klase hauek bereizten ditugu elementu ez-interaktiboez osatutako zerrenda-taldeek ( <li>s edo <div>s bezalakoak) ez dutela klik edo ukipen affordagarririk ematen ziurtatzeko.

Ziurtatu ez dituzula hemen klase estandarrak erabiltzen.btn .

Uneko esteka elementua Bigarren esteka elementu bat Hirugarren esteka elementu bat Laugarren esteka-elementua Desgaitutako esteka-elementua

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>

S- rekin , klasearen ordez atributua <button>ere erabil dezakezu . Zoritxarrez, s-k ez du onartzen desgaitutako atributua.disabled.disabled<a>

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>

Hustu

Gehitu .list-group-flushertz eta ertz biribildu batzuk kentzeko zerrenda-taldearen elementuak ertz-ertz errendatzeko edukiontzi nagusi batean (adibidez, txartelak).

Elementu bat
Bigarren elementu bat
Hirugarren elementu bat
Laugarren elementu bat
Eta bosgarren bat

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>

Zenbakituta

Gehitu .list-group-numberedmodifikatzaile klasea (eta, aukeran, erabili <ol>elementu bat) zenbakidun zerrendako talde-elementuak aukeratzeko. Zenbakiak CSS bidez sortzen dira ( <ol>arakatzailearen estilo lehenetsiaren aldean) zerrendako elementuen barruan hobeto kokatzeko eta pertsonalizazio hobea ahalbidetzeko.

Zenbakiak erabiliz sortzen dira counter-reset, <ol>eta, ondoren, estiloarekin eta ::beforesasi-elementu <li>batekin counter-incrementjartzen dira content.

Zerrendako elementu bat
Zerrendako elementu bat
Zerrendako elementu bat

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>

Hauek oso ondo funtzionatzen dute eduki pertsonalizatuarekin ere.

Azpititulua
Zerrendako elementuaren edukia
14
Azpititulua
Zerrendako elementuaren edukia
14
Azpititulua
Zerrendako elementuaren edukia
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>

Horizontala

Gehitu .list-group-horizontalzerrenda-taldeko elementuen diseinua bertikaletik horizontalera aldatzeko eten puntu guztietan. Bestela, aukeratu aldaera sentikor .list-group-horizontal-{sm|md|lg|xl|xxl}bat zerrenda-talde bat horizontal bihurtzeko eten-puntu horretan hasita min-width. Une honetan zerrenda-talde horizontalak ezin dira konbinatu zerrenda-talde hutsekin.

Aholkua: zabalera berdineko zerrendako talde-elementuak nahi dituzu horizontalean? Gehitu .flex-fillzerrenda taldeko elementu bakoitzari.

Elementu bat
Bigarren elementu bat
Hirugarren elementu bat

Elementu bat
Bigarren elementu bat
Hirugarren elementu bat

Elementu bat
Bigarren elementu bat
Hirugarren elementu bat

Elementu bat
Bigarren elementu bat
Hirugarren elementu bat

Elementu bat
Bigarren elementu bat
Hirugarren elementu bat

Elementu bat
Bigarren elementu bat
Hirugarren elementu bat

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>

Testuinguruko klaseak

Erabili testuinguru-klaseak zerrendako elementuak atzeko planoa eta kolorea duten estiloa jartzeko.

Zerrendako talde-elementu lehenetsi sinplea
Zerrenda talde nagusiko elementu sinple bat
Bigarren mailako zerrenda taldeko elementu sinple bat
Arrakasta-zerrendako talde-elementu sinple bat
Arrisku zerrendako talde-elementu sinple bat
Abisu-zerrendako talde-elementu sinple bat
Informazio-zerrendako talde-elementu sinple bat
Argi-zerrenda talde-elementu sinple bat
Zerrenda iluneko talde-elementu sinple bat

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>

Testuinguruko klaseek ere lan egiten dute .list-group-item-action. Kontuan izan aurreko adibidean ez dauden pasabide-estiloen gehitzea. Estatua ere onartzen da .active; aplikatu ezazu hautapen aktibo bat adierazteko testuinguru-zerrendako talde-elementu batean.

Zerrendako talde-elementu lehenetsi sinplea Zerrenda talde nagusiko elementu sinple bat Bigarren mailako zerrenda taldeko elementu sinple bat Arrakasta-zerrendako talde-elementu sinple bat Arrisku zerrendako talde-elementu sinple bat Abisu-zerrendako talde-elementu sinple bat Informazio-zerrendako talde-elementu sinple bat Argi-zerrenda talde-elementu sinple bat Zerrenda iluneko talde-elementu sinple bat

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>

Laguntza-teknologiei esanahia ematea

Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .visually-hiddenklasearekin ezkutatuta dagoen testu gehigarria.

Txapekin

Gehitu bereizgarriak zerrendako edozein elementuri irakurri gabeko zenbaketak, jarduerak eta gehiago erakusteko utilitate batzuen laguntzarekin .

Zerrendako elementu bat14
Bigarren zerrendako elementu bat2
Hirugarren zerrendako elementu bat1

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>

Eduki pertsonalizatuak

Gehitu ia edozein HTML barruan, baita estekatutako zerrenda taldeetarako ere, behean dagoena bezalakoa, flexbox utilitateen laguntzarekin .

Zerrenda taldeko elementuen goiburua

duela 3 egun

Paragrafo bateko leku-markaren eduki batzuk.

Eta letra txiki batzuk.

Zerrenda taldeko elementuen goiburua

duela 3 egun

Paragrafo bateko leku-markaren eduki batzuk.

Eta letra txiki isildu batzuk.

Zerrenda taldeko elementuen goiburua

duela 3 egun

Paragrafo bateko leku-markaren eduki batzuk.

Eta letra txiki isildu batzuk.

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>

Koadroak eta irratiak

Jarri Bootstrap-en kontrol-laukiak eta irratiak zerrendako elementuen barruan eta pertsonalizatu behar den moduan. S- rik gabe erabil ditzakezu <label>, baina gogoratu aria-labelirisgarritasunerako atributu eta balio bat sartzen duzula.

Lehenengo kontrol-laukia
Bigarren kontrol-laukia
Hirugarren kontrol-laukia

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>

Lehen irratia
Bigarren irratia
Hirugarren irratia

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>

.stretched-linkOn s erabil dezakezu <label>zerrenda-taldearen elementua klikagarria izan dadin.

Lehenengo kontrol-laukia
Bigarren kontrol-laukia
Hirugarren kontrol-laukia

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

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren zati gisa, zerrenda taldeek CSS aldagai lokalak erabiltzen dituzte orain .list-groupdenbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

  --#{$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 aldagaiak

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

Mixinak

S -rako testuinguru-aldaera-klaseak$theme-colors sortzeko konbinatuta erabiltzen da ..list-group-item

@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;
      }
    }
  }
}

Begizta

list-group-item-variant()Mixin -arekin modifikatzaile-klaseak sortzen dituen begizta.

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

Erabili fitxa JavaScript plugina —sartu banan-banan edo konpilatutako bootstrap.jsfitxategiaren bidez— gure zerrenda taldea zabaltzeko tokiko edukiaren fitxa-panelak sortzeko.

Hasiera Profila Mezuak Ezarpenak

Leku-markaren edukia "Etxea"-ri buruzko paragrafo batean. Eta eduki gehiago, hemen erabiltzen da fitxa-panel hau bete eta betetzeko. Ekoizpenean, jakina, hemen eduki erreal gehiago izango zenuke. Eta ez testua bakarrik. Edozer izan daiteke, benetan. Testua, irudiak, formularioak.

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>

Datu-atributuak erabiltzea

Zerrenda taldeen nabigazioa aktiba dezakezu JavaScript idatzi gabe data-bs-toggle="list"edo elementu batean zehaztuta. Erabili datu-atributu hauek .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>

JavaScript bidez

Gaitu tabulatzeko zerrendako elementua JavaScript bidez (zerrendako elementu bakoitza banan-banan aktibatu behar da):

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

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

Banakako zerrendako elementua hainbat modutara aktiba dezakezu:

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

Desagertzeko efektua

Fitxen panela desagertzeko, gehitu .fadebakoitzari .tab-pane. Lehen fitxa-panelak .showhasierako edukia ikusgai jarri behar du.

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

Metodoak

Metodo asinkronoak eta trantsizioak

API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .

Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .

Zure edukia fitxa-elementu gisa aktibatzen du.

Fitxa-instantzia bat sor dezakezu konstruktorearekin, adibidez:

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

Metodoa	Deskribapena
`dispose`	Elementu baten fitxa suntsitzen du.
`getInstance`	Metodo estatikoa DOM elementu batekin lotutako fitxa-instantzia lortzeko aukera ematen duena, honela erabil dezakezu: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Metodo estatikoa, DOM elementu bati lotutako fitxa-instantzia bat itzultzen duena edo berri bat sortzen duena hasieratu ez bazen. Honela erabil dezakezu: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Emandako fitxa hautatzen du eta hari lotutako panela erakusten du. Aurretik hautatutako beste edozein fitxa hautatu gabe geratzen da eta hari lotutako panela ezkutatu egiten da. Deitzen duenari itzultzen zaio fitxa-panela benetan erakutsi aurretik (hau da, `shown.bs.tab`gertaera gertatu baino lehen).

Gertaerak

Fitxa berri bat erakustean, gertaerak ordena honetan piztuko dira:

hide.bs.tab(uneko fitxa aktiboan)
show.bs.tab(Erakutsi beharreko fitxan)
hidden.bs.tab(aurreko fitxa aktiboan, ekitaldiaren berdina hide.bs.tab)
shown.bs.tab(Aktibatu berri den fitxan, ekitaldiaren berdina show.bs.tab)

Fitxarik ez bazegoen aktibo, orduan hide.bs.tabeta hidden.bs.tabgertaerak ez dira abiaraziko.

Gertaera mota	Deskribapena
`hide.bs.tab`	Gertaera hau fitxa berri bat erakutsi nahi denean abiarazten da (eta, beraz, aurreko fitxa aktiboa ezkutatu behar da). Erabili `event.target`eta `event.relatedTarget`uneko fitxa aktibora eta laster aktibo egongo den fitxa berria bideratzeko, hurrenez hurren.
`hidden.bs.tab`	Gertaera hau fitxa berri bat erakutsi ondoren abiarazten da (eta, beraz, aurreko fitxa aktiboa ezkutatu egiten da). Erabili `event.target`eta `event.relatedTarget`aurreko fitxa aktibora eta fitxa aktibo berria bideratzeko, hurrenez hurren.
`show.bs.tab`	Gertaera hau fitxen erakustaldian abiarazten da, baina fitxa berria erakutsi aurretik. Erabili `event.target`eta `event.relatedTarget`fitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren.
`shown.bs.tab`	Gertaera hau fitxen erakustaldian abiarazten da fitxa bat erakutsi ondoren. Erabili `event.target`eta `event.relatedTarget`fitxa aktibora eta aurreko fitxa aktibora bideratzeko (eskuragarri badago), hurrenez hurren.

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