Slaan oor na hoofinhoud Slaan oor na dokumentnavigasie
Check
in English

Lys groep

Lysgroepe is 'n buigsame en kragtige komponent om 'n reeks inhoud te vertoon. Verander en brei dit uit om omtrent enige inhoud binne te ondersteun.

Op hierdie bladsy

Basiese voorbeeld

Die mees basiese lysgroep is 'n ongeordende lys met lysitems en die regte klasse. Bou daarop met die opsies wat volg, of met jou eie CSS soos nodig.

  • N item
  • 'n Tweede item
  • 'n Derde item
  • 'n Vierde item
  • En 'n vyfde een
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>

Aktiewe items

Voeg .activeby 'n .list-group-itemom die huidige aktiewe keuse aan te dui.

  • 'n Aktiewe item
  • 'n Tweede item
  • 'n Derde item
  • 'n Vierde item
  • En 'n vyfde een
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>

Gedeaktiveerde items

Voeg .disabledby 'n .list-group-itemom dit gedeaktiveer te laat lyk . Let daarop dat sommige elemente met .disabledook gepasmaakte JavaScript sal vereis om hul klikgebeurtenisse (bv. skakels) ten volle te deaktiveer.

  • 'n Gestremde item
  • 'n Tweede item
  • 'n Derde item
  • 'n Vierde item
  • En 'n vyfde een
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>

Gebruik <a>s of <button>s om uitvoerbare lys groepitems te skep met sweef, gedeaktiveerde en aktiewe toestande deur by te voeg .list-group-item-action. Ons skei hierdie pseudo-klasse om te verseker dat lysgroepe wat van nie-interaktiewe elemente (soos <li>e of <div>s) gemaak is, nie 'n klik of tik bekostigbaarheid bied nie.

Maak seker dat jy nie die standaard .btnklasse hier gebruik nie .

Die huidige skakelitem 'n Tweede skakelitem 'n Derde skakelitem 'n Vierde skakelitem 'n Gedeaktiveerde skakelitem
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>

Met <button>s kan jy ook gebruik maak van die disabledkenmerk in plaas van die .disabledklas. Ongelukkig <a>ondersteun s nie die gestremde kenmerk nie.

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>

Spoel

Voeg .list-group-flushby om sommige grense en afgeronde hoeke te verwyder om lysgroepitems rand-tot-rand in 'n ouerhouer (bv. kaarte) weer te gee.

  • N item
  • 'n Tweede item
  • 'n Derde item
  • 'n Vierde item
  • En 'n vyfde een
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>

Genommer

Voeg die .list-group-numberedwysigerklas by (en gebruik opsioneel 'n <ol>element) om in te teken op genommerde lysgroepitems. Getalle word gegenereer via CSS (in teenstelling met 'n <ol>se verstekblaaierstilering) vir beter plasing binne lysgroepitems en om beter aanpassing moontlik te maak.

Getalle word gegenereer deur counter-resetop die <ol>, en dan gestileer en geplaas met 'n ::beforepseudo-element op die <li>met counter-incrementen content.

  1. 'n Lysitem
  2. 'n Lysitem
  3. 'n Lysitem
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>

Dit werk ook uitstekend met persoonlike inhoud.

  1. Subopskrif
    Inhoud vir lysitem
    14
  2. Subopskrif
    Inhoud vir lysitem
    14
  3. Subopskrif
    Inhoud vir lysitem
    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>

Horisontaal

Voeg .list-group-horizontalby om die uitleg van lysgroepitems van vertikaal na horisontaal oor alle breekpunte te verander. Alternatiewelik, kies 'n responsiewe variant .list-group-horizontal-{sm|md|lg|xl|xxl}om 'n lysgroep horisontaal te maak wat by daardie breekpunt begin min-width. Tans kan horisontale lysgroepe nie met spoellysgroepe gekombineer word nie.

ProTip: Wil jy groepitems met gelyke breedte lys hê wanneer dit horisontaal is? Voeg .flex-fillby elke lys groep item.

  • N item
  • 'n Tweede item
  • 'n Derde item
  • N item
  • 'n Tweede item
  • 'n Derde item
  • N item
  • 'n Tweede item
  • 'n Derde item
  • N item
  • 'n Tweede item
  • 'n Derde item
  • N item
  • 'n Tweede item
  • 'n Derde item
  • N item
  • 'n Tweede item
  • 'n Derde item
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>

Kontekstuele klasse

Gebruik kontekstuele klasse om lysitems met 'n statige agtergrond en kleur te styl.

  • 'n Eenvoudige verstek lys groep item
  • 'n Eenvoudige primêre lys groep item
  • 'n Eenvoudige sekondêre lys groep item
  • 'n Eenvoudige sukseslysgroepitem
  • 'n Eenvoudige gevaarlysgroepitem
  • 'N Eenvoudige waarskuwing lys groep item
  • 'N Eenvoudige inligting lys groep item
  • 'n Eenvoudige ligte lys groep item
  • 'N Eenvoudige donker lys groep item
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>

Kontekstuele klasse werk ook met .list-group-item-action. Let op die byvoeging van die sweefstyle wat hier nie in die vorige voorbeeld voorkom nie. Die staat word ook ondersteun .active; pas dit toe om 'n aktiewe seleksie op 'n kontekstuele lysgroepitem aan te dui.

'n Eenvoudige verstek lys groep item 'n Eenvoudige primêre lys groep item 'n Eenvoudige sekondêre lys groep item 'n Eenvoudige sukseslysgroepitem 'n Eenvoudige gevaarlysgroepitem 'N Eenvoudige waarskuwing lys groep item 'N Eenvoudige inligting lys groep item 'n Eenvoudige ligte lys groep item 'N Eenvoudige donker lys groep item
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>
Betekenis oordra aan ondersteunende tegnologieë

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.

Met kentekens

Voeg kentekens by enige lysgroepitem om ongeleesde tellings, aktiwiteit en meer te wys met behulp van sommige nutsprogramme .

  • 'n Lysitem14
  • 'n Tweede lysitem2
  • 'n Derde lysitem1
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>

Pasgemaakte inhoud

Voeg byna enige HTML binne, selfs vir gekoppelde lysgroepe soos die een hieronder, met behulp van flexbox-nutsprogramme .

Lys groepitem opskrif
3 dae gelede

Sommige plekhouer-inhoud in 'n paragraaf.

En 'n paar kleinletters.
Lys groepitem opskrif
3 dae gelede

Sommige plekhouer-inhoud in 'n paragraaf.

En 'n gedempte kleinskrif.
Lys groepitem opskrif
3 dae gelede

Sommige plekhouer-inhoud in 'n paragraaf.

En 'n gedempte kleinskrif.
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>

Merkblokkies en radio's

Plaas Bootstrap se merkblokkies en radio's binne lys groepitems en pasmaak soos nodig. Jy kan hulle sonder <label>s gebruik, maar onthou asseblief om 'n aria-labeleienskap en waarde vir toeganklikheid in te sluit.

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

Jy kan .stretched-linkop <label>s gebruik om die hele lys groepitem klikbaar te maak.

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

Veranderlikes

Bygevoeg in v5.2.0

As deel van Bootstrap se ontwikkelende CSS-veranderlikebenadering, gebruik lysgroepe nou plaaslike CSS-veranderlikes .list-groupvir verbeterde intydse aanpassing. Waardes vir die CSS-veranderlikes word via Sass ingestel, so Sass-aanpassing word ook steeds ondersteun.

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

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

Mengsels

Gebruik in kombinasie met $theme-colorsom die kontekstuele variantklasse vir .list-group-items te genereer.

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

Lus

Lus wat die wysigerklasse genereer met die list-group-item-variant()mixin.

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

Gebruik die oortjie JavaScript-inprop—sluit dit individueel of deur die saamgestelde bootstrap.jslêer in—om ons lysgroep uit te brei om oortjies van plaaslike inhoud te skep.

Sommige plekhouer-inhoud in 'n paragraaf wat met "Tuis" verband hou. En nog 'n bietjie inhoud, wat hier net gebruik word om hierdie oortjiepaneel uit te vul en te vul. In produksie sou jy natuurlik meer werklike inhoud hier hê. En nie net teks nie. Dit kan enigiets wees, regtig. Teks, beelde, vorms.

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>

Die gebruik van data-kenmerke

Jy kan 'n lysgroepnavigasie aktiveer sonder om enige JavaScript te skryf deur bloot 'n element te spesifiseer data-bs-toggle="list"of op 'n element. Gebruik hierdie data-kenmerke op .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>

Via JavaScript

Aktiveer tabbare lysitem via JavaScript (elke lysitem moet individueel geaktiveer word):

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

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

Jy kan individuele lysitem op verskeie maniere aktiveer:

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

Vervaag effek

Om oortjiespaneel te laat vervaag, voeg .fadeby elke .tab-pane. Die eerste oortjie-venster moet ook .showdie aanvanklike inhoud sigbaar maak.

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

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting .

Aktiveer jou inhoud as 'n oortjie-element.

Jy kan 'n oortjie-instansie met die konstruktor skep, byvoorbeeld:

const bsTab = new bootstrap.Tab('#myTab')
Metode Beskrywing
dispose Vernietig 'n element se oortjie.
getInstance Statiese metode wat jou toelaat om die oortjie-instansie te kry wat met 'n DOM-element geassosieer word, jy kan dit so gebruik: bootstrap.Tab.getInstance(element).
getOrCreateInstance Statiese metode wat 'n oortjie-instansie wat aan 'n DOM-element geassosieer word terugstuur of 'n nuwe een skep ingeval dit nie geïnisialiseer is nie. Jy kan dit so gebruik: bootstrap.Tab.getOrCreateInstance(element).
show Kies die gegewe oortjie en wys die gepaardgaande paneel. Enige ander oortjie wat voorheen gekies is, word ongeselekteer en die gepaardgaande paneel word versteek. Keer terug na die beller voordat die oortjie-venster werklik gewys is (dws voor die shown.bs.tabgebeurtenis plaasvind).

Gebeurtenisse

Wanneer 'n nuwe oortjie gewys word, begin die gebeure in die volgende volgorde:

  1. hide.bs.tab(op die huidige aktiewe oortjie)
  2. show.bs.tab(op die om te wys-oortjie)
  3. hidden.bs.tab(op die vorige aktiewe oortjie, dieselfde een as vir die hide.bs.tabgeleentheid)
  4. shown.bs.tab(op die nuut-aktiewe oortjie wat pas gewys is, dieselfde een as vir die show.bs.tabgeleentheid)

As geen oortjie reeds aktief was nie, sal die hide.bs.taben hidden.bs.tabgebeure nie geaktiveer word nie.

Soort gebeurtenis Beskrywing
hide.bs.tab Hierdie gebeurtenis begin wanneer 'n nuwe oortjie gewys moet word (en dus moet die vorige aktiewe oortjie versteek word). Gebruik event.targeten event.relatedTargetom onderskeidelik die huidige aktiewe oortjie en die nuwe wat binnekort aktief sal wees te teiken.
hidden.bs.tab Hierdie gebeurtenis begin nadat 'n nuwe oortjie gewys is (en dus word die vorige aktiewe oortjie versteek). Gebruik event.targeten event.relatedTargetom onderskeidelik die vorige aktiewe oortjie en die nuwe aktiewe oortjie te teiken.
show.bs.tab Hierdie gebeurtenis begin op oortjievertoning, maar voordat die nuwe oortjie gewys is. Gebruik event.targeten event.relatedTargetom onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
shown.bs.tab Hierdie gebeurtenis begin op oortjievertoning nadat 'n oortjie gewys is. Gebruik event.targeten event.relatedTargetom onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken. 
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
  })
})