Neidio i'r prif gynnwys Neidio i lywio dogfennau
in English

Rhestr grŵp

Mae grwpiau rhestr yn elfen hyblyg a phwerus ar gyfer arddangos cyfres o gynnwys. Eu haddasu a'u hymestyn i gefnogi bron unrhyw gynnwys o fewn.

Ar y dudalen hon

Enghraifft sylfaenol

Y grŵp rhestr mwyaf sylfaenol yw rhestr heb ei threfnu gydag eitemau rhestr a'r dosbarthiadau cywir. Adeiladwch arno gyda'r opsiynau sy'n dilyn, neu gyda'ch CSS eich hun yn ôl yr angen.

  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Pedwerydd eitem
  • A phumed un
<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>

Eitemau gweithredol

Ychwanegu .activeat a .list-group-itemi ddangos y dewis gweithredol cyfredol.

  • Eitem weithredol
  • Ail eitem
  • Trydydd eitem
  • Pedwerydd eitem
  • A phumed un
<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>

Eitemau anabl

Ychwanegu .disabledat .list-group-itemi wneud iddo ymddangos yn anabl. Sylwch y bydd angen JavaScript wedi'i deilwra ar rai elfennau .disabledhefyd i analluogi eu digwyddiadau clicio yn llawn (ee, dolenni).

  • Eitem anabl
  • Ail eitem
  • Trydydd eitem
  • Pedwerydd eitem
  • A phumed un
<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>

Defnyddiwch <a>s neu <button>s i greu eitemau grŵp rhestr y gellir eu gweithredu gyda chyflyrau hofran, anabl a gweithredol trwy ychwanegu .list-group-item-action. Rydyn ni'n gwahanu'r ffug-ddosbarthiadau hyn i sicrhau nad yw grwpiau rhestr sydd wedi'u gwneud o elfennau nad ydynt yn rhyngweithiol (fel <li>s neu <div>s) yn darparu fforddiadwyedd clicio neu dap.

Cofiwch beidio â defnyddio'r dosbarthiadau safonol .btnyma .

Yr eitem ddolen gyfredol Eitem ail ddolen Trydydd eitem cyswllt Pedwerydd eitem cyswllt Eitem cyswllt anabl 
<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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

Gydag <button>s, gallwch hefyd ddefnyddio'r disabledpriodoledd yn lle'r .disableddosbarth. Yn anffodus, <a>nid yw s yn cefnogi'r briodwedd anabl.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Fflysio

Ychwanegu .list-group-flushi gael gwared ar rai borderi a chorneli crwn i wneud rhestr o eitemau grŵp ymyl-i-ymyl mewn cynhwysydd rhiant (ee, cardiau).

  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Pedwerydd eitem
  • A phumed un
<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>

Wedi rhifo

Ychwanegwch y .list-group-numbereddosbarth addasydd (a defnyddiwch <ol>elfen yn ddewisol) i optio i mewn i eitemau grŵp rhestr wedi'u rhifo. Cynhyrchir niferoedd trwy CSS (yn hytrach nag <ol>arddull porwr rhagosodedig) i'w gosod yn well y tu mewn i eitemau grŵp rhestr ac i ganiatáu ar gyfer addasu gwell.

Cynhyrchir rhifau gan counter-resetar y <ol>, ac yna eu steilio a'u gosod gyda ::beforeffug-elfen ar y <li>gyda counter-incrementa content.

  1. Cras justo odio
  2. Cras justo odio
  3. Cras justo odio
<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Mae'r rhain yn gweithio'n wych gyda chynnwys wedi'i deilwra hefyd.

  1. Is-bennawd
    Cras justo odio
    14
  2. Is-bennawd
    Cras justo odio
    14
  3. Is-bennawd
    Cras justo odio
    14 
<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Cras justo odio
    </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>
      Cras justo odio
    </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>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Llorweddol

Ychwanegu .list-group-horizontali newid cynllun eitemau grŵp rhestr o fertigol i lorweddol ar draws pob torbwynt. Fel arall, dewiswch amrywiad ymatebol .list-group-horizontal-{sm|md|lg|xl|xxl}i wneud grŵp rhestr yn llorweddol gan ddechrau ar y torbwynt hwnnw min-width. Ar hyn o bryd ni ellir cyfuno grwpiau rhestr llorweddol â grwpiau rhestr fflysio.

ProTip: Eisiau eitemau grŵp rhestr lled cyfartal pan yn llorweddol? Ychwanegu .flex-fillat bob eitem grŵp rhestr.

  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Eitem
  • Ail eitem
  • Trydydd eitem
<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>

Dosbarthiadau cyd-destunol

Defnyddiwch ddosbarthiadau cyd-destunol i steilio eitemau rhestru gyda chefndir a lliw urddasol.

  • Eitem grŵp rhestr ddiofyn syml
  • Eitem grŵp rhestr gynradd syml
  • Eitem grŵp rhestr eilaidd syml
  • Eitem grŵp rhestr llwyddiant syml
  • Eitem grŵp rhestr beryglon syml
  • Eitem grŵp rhestr rhybuddio syml
  • Eitem grŵp rhestr wybodaeth syml
  • Eitem grŵp rhestr ysgafn syml
  • Eitem grŵp rhestr dywyll syml
<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>

Mae dosbarthiadau cyd-destunol hefyd yn gweithio gyda .list-group-item-action. Sylwch ar ychwanegu'r arddulliau hofran yma nad ydynt yn bresennol yn yr enghraifft flaenorol. Cefnogir hefyd y .activewladwriaeth; ei gymhwyso i nodi detholiad gweithredol ar eitem grŵp rhestr gyd-destunol.

Eitem grŵp rhestr ddiofyn syml Eitem grŵp rhestr gynradd syml Eitem grŵp rhestr eilaidd syml Eitem grŵp rhestr llwyddiant syml Eitem grŵp rhestr beryglon syml Eitem grŵp rhestr rhybuddio syml Eitem grŵp rhestr wybodaeth syml Eitem grŵp rhestr ysgafn syml Eitem grŵp rhestr dywyll syml 
<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>
Cyfleu ystyr i dechnolegau cynorthwyol

Mae defnyddio lliw i ychwanegu ystyr yn rhoi arwydd gweledol yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin. Sicrhewch fod gwybodaeth a ddynodir gan y lliw naill ai'n amlwg o'r cynnwys ei hun (ee y testun gweladwy), neu'n cael ei chynnwys trwy ddulliau amgen, megis testun ychwanegol wedi'i guddio gyda'r .visually-hiddendosbarth.

Gyda bathodynnau

Ychwanegu bathodynnau at unrhyw eitem grŵp rhestr i ddangos cyfrifon heb eu darllen, gweithgarwch, a mwy gyda chymorth rhai cyfleustodau .

  • Eitem rhestr14
  • Ail eitem rhestr2
  • Trydydd eitem rhestr1 
<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>

Cynnwys personol

Ychwanegwch bron unrhyw HTML o fewn, hyd yn oed ar gyfer grwpiau rhestr cysylltiedig fel yr un isod, gyda chymorth cyfleustodau flexbox .

Rhestrwch bennawd eitem grŵp
3 diwrnod yn ôl

Rhywfaint o gynnwys dalfan mewn paragraff.

Ac ychydig o brint mân.
Rhestrwch bennawd eitem grŵp
3 diwrnod yn ôl

Rhywfaint o gynnwys dalfan mewn paragraff.

A rhai print mân tawel.
Rhestrwch bennawd eitem grŵp
3 diwrnod yn ôl

Rhywfaint o gynnwys dalfan mewn paragraff.

A rhai print mân tawel. 
<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>

Blychau siec a radios

Rhowch flychau gwirio a radios Bootstrap o fewn eitemau grŵp rhestr a'u haddasu yn ôl yr angen. Gallwch eu defnyddio heb <label>s, ond cofiwch gynnwys aria-labelpriodoledd a gwerth ar gyfer hygyrchedd.

  • Blwch ticio cyntaf
  • Ail flwch ticio
  • Trydydd blwch ticio
  • Pedwerydd blwch ticio
  • Pumed blwch ticio
<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

Ac os ydych chi eisiau <label>s fel yr .list-group-itemar gyfer ardaloedd taro mawr, gallwch chi wneud hynny hefyd.

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

Sass

Newidynnau

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

cymysgeddau

Defnyddir ar y cyd ag $theme-colorsi gynhyrchu'r dosbarthiadau amrywiad cyd-destunol ar gyfer .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;
      }
    }
  }
}

Dolen

Dolen sy'n cynhyrchu'r dosbarthiadau addasydd gyda'r 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);
}

Ymddygiad JavaScript

Defnyddiwch yr ategyn tab JavaScript - ei gynnwys yn unigol neu drwy'r bootstrap.jsffeil a luniwyd - i ymestyn ein grŵp rhestr i greu cwareli tabable o gynnwys lleol.

Rhywfaint o gynnwys dalfan mewn paragraff sy'n ymwneud â "Cartref". A rhywfaint mwy o gynnwys, a ddefnyddir yma dim ond i padio a llenwi'r panel tab hwn. Wrth gynhyrchu, mae'n amlwg y byddai gennych fwy o gynnwys go iawn yma. Ac nid testun yn unig. Gallai fod yn unrhyw beth, mewn gwirionedd. Testun, delweddau, ffurflenni.

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>

Defnyddio priodoleddau data

Gallwch chi actifadu llywio grŵp rhestr heb ysgrifennu unrhyw JavaScript trwy nodi data-bs-toggle="list"neu ar elfen yn unig. Defnyddiwch y priodoleddau data hyn ar .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>

Trwy JavaScript

Galluogi eitem rhestr tabladwy trwy JavaScript (mae angen actifadu pob eitem rhestr yn unigol):

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

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

Gallwch chi actifadu eitem rhestr unigol mewn sawl ffordd:

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

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

Effaith pylu

I wneud i banel tabiau bylu i mewn, ychwanegwch .fadeat bob .tab-pane. Rhaid i'r cwarel tab cyntaf hefyd .showwneud y cynnwys cychwynnol yn weladwy.

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

Dulliau

constructor

Yn actifadu elfen eitem rhestr a chynhwysydd cynnwys. Dylai fod gan dab naill ai nod cynhwysydd data-bs-targetneu hrefnod targedu yn y DOM.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

dangos

Yn dewis yr eitem rhestr a roddir ac yn dangos ei phaen cysylltiedig. Mae unrhyw eitem rhestr arall a ddewiswyd yn flaenorol yn mynd yn an-ddewis ac mae ei cwarel cysylltiedig wedi'i guddio. Yn dychwelyd i'r galwr cyn i'r cwarel tab gael ei ddangos mewn gwirionedd (er enghraifft, cyn i'r shown.bs.tabdigwyddiad ddigwydd).

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

  tab.show()

gwared

Yn dinistrio tab elfen.

caelInstance

Dull statig sy'n eich galluogi i gael yr enghraifft tab yn gysylltiedig ag elfen DOM

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

getOrCreateInstance

Dull statig sy'n eich galluogi i gael yr enghraifft tab yn gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn

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

Digwyddiadau

Wrth ddangos tab newydd, mae'r digwyddiadau'n tanio yn y drefn ganlynol:

  1. hide.bs.tab(ar y tab gweithredol cyfredol)
  2. show.bs.tab(ar y tab i'w ddangos)
  3. hidden.bs.tab(ar y tab gweithredol blaenorol, yr un un ag ar gyfer y hide.bs.tabdigwyddiad)
  4. shown.bs.tab(ar y tab newydd-weithredol sydd newydd ei ddangos, yr un un ag ar gyfer y show.bs.tabdigwyddiad)

Os nad oedd unrhyw dab eisoes yn weithredol, ni fydd y hide.bs.taba hidden.bs.tabdigwyddiadau yn cael eu tanio.

Math o ddigwyddiad Disgrifiad
show.bs.tab Mae'r digwyddiad hwn yn tanio ar sioe tab, ond cyn i'r tab newydd gael ei ddangos. Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
shown.bs.tab Mae'r digwyddiad hwn yn tanio ar sioe dabiau ar ôl i dab gael ei ddangos. Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
hide.bs.tab Mae'r digwyddiad hwn yn tanio pan fydd tab newydd yn cael ei ddangos (ac felly mae'r tab gweithredol blaenorol i'w guddio). Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol cyfredol a'r tab newydd cyn bo hir, yn y drefn honno.
hidden.bs.tab Mae'r digwyddiad hwn yn tanio ar ôl i dab newydd gael ei ddangos (ac felly mae'r tab gweithredol blaenorol wedi'i guddio). Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol blaenorol a'r tab gweithredol newydd, yn y drefn honno. 
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}