in English

Buidheann liosta

Tha buidhnean liosta nam pàirt sùbailte is cumhachdach airson sreath de shusbaint a thaisbeanadh. Atharraich agus leudaich iad gus taic a thoirt do cha mhòr susbaint sam bith a-staigh.

Air an duilleig seo

Eisimpleir bunaiteach

Is e am buidheann liosta as bunaitiche liosta gun òrdugh le nithean liosta agus na clasaichean ceart. Tog air leis na roghainnean a leanas, no leis an CSS agad fhèin mar a dh’ fheumar.

Nì
An dàrna nì
An treas nì
An ceathramh nì
Agus an còigeamh fear

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

Nithean gnìomhach

Cuir .activeri a .list-group-itemgus an taghadh gnìomhach làithreach a chomharrachadh.

Rud gnìomhach
An dàrna nì
An treas nì
An ceathramh nì
Agus an còigeamh fear

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

Nithean ciorramach

Cuir .disabledri a .list-group-itemgus am bi e ciorramach . Thoir an aire gum feum cuid de na h-eileamaidean le .disabledJavaScript àbhaisteach gus na tachartasan cliog aca a chuir dheth gu tur (me, ceanglaichean).

Rud à comas
An dàrna nì
An treas nì
An ceathramh nì
Agus an còigeamh fear

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

Ceanglaichean agus putanan

Cleachd <a>s no <button>s gus nithean buidhne liosta gnìomh a chruthachadh le hover , ciorramach, agus stàitean gnìomhach le bhith a’ cur .list-group-item-action. Bidh sinn a’ sgaradh nan clasaichean meallta sin gus dèanamh cinnteach nach toir buidhnean liosta air an dèanamh le eileamaidean neo-eadar-ghnìomhach (mar <li>s no <div>s) cosgais cliog no tap.

Dèan cinnteach nach cleachd thu na .btnclasaichean àbhaisteach an seo .

An nì ceangail làithreach An dàrna nì ceangail An treas nì ceangail An ceathramh nì ceangail Nì ceangail à comas

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

Le <button>s, faodaidh tu cuideachd am disabledfeart a chleachdadh an àite a’ .disabledchlas. Gu mì-fhortanach, <a>chan eil s a’ toirt taic don fheart ciorramach.

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

Fliuch

Cuir .list-group-flushris gus cuid de chrìochan agus oiseanan cruinn a thoirt air falbh gus liosta de nithean buidhne a thoirt seachad oir ri oir ann an soitheach pàrant (me, cairtean).

Nì
An dàrna nì
An treas nì
An ceathramh nì
Agus an còigeamh fear

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

Air an àireamhachadh

Cuir ris a’ .list-group-numberedchlas mion-atharrachaidh (agus cleachd <ol>eileamaid gu roghnach) gus roghnachadh a-steach do nithean buidhne liosta àireamhaichte. Bithear a’ cruthachadh àireamhan tro CSS (an taca ri <ol>stoidhle brabhsair àbhaisteach) airson suidheachadh nas fheàrr taobh a-staigh nithean buidhne liosta agus gus gnàthachadh nas fheàrr a cheadachadh.

Bithear a’ cruthachadh àireamhan le counter-resetair an <ol>, agus an uairsin air an stialladh agus air an cur le ::beforeeileamaid bhrèige air an <li>le counter-incrementagus content.

Dìreach odio
Dìreach odio
Dìreach 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>

Bidh iad sin ag obair gu math le susbaint àbhaisteach cuideachd.

Fo-cheannard
Dìreach odio
14
Fo-cheannard
Dìreach odio
14
Fo-cheannard
Dìreach 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>

Cothromach

Cuir ris .list-group-horizontalgus cruth nithean buidhne liosta atharrachadh bho dhìreach gu còmhnard thar gach briseadh. Air neo, tagh caochladair freagairteach .list-group-horizontal-{sm|md|lg|xl|xxl}gus buidheann liosta a dhèanamh còmhnard a’ tòiseachadh aig a’ phuing-bhriseadh sin min-width. An- dràsta chan urrainnear buidhnean liosta còmhnard a chur còmhla ri buidhnean liosta sruthach.

ProTip: Ag iarraidh nithean buidhne liosta co-ionann nuair a tha iad còmhnard? Cuir .flex-fillri gach nì buidhne liosta.

Nì
An dàrna nì
An treas nì

Nì
An dàrna nì
An treas nì

Nì
An dàrna nì
An treas nì

Nì
An dàrna nì
An treas nì

Nì
An dàrna nì
An treas nì

Nì
An dàrna nì
An treas nì

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

Clasaichean co-theacsail

Cleachd clasaichean co-theacsail gus rudan a liostadh le cùl-fhiosrachadh agus dath stàiteil.

Nì buidheann liosta bunaiteach sìmplidh
Earrann buidheann liosta bun-sgoile sìmplidh
Nì buidheann liosta àrd-sgoile sìmplidh
Nì buidheann liosta soirbheachail sìmplidh
Buidheann liosta de chunnartan sìmplidh
Nì buidheann liosta rabhaidh sìmplidh
Nì buidheann liosta fiosrachaidh sìmplidh
Rud buidheann liosta aotrom sìmplidh
Rud buidheann liosta dorcha sìmplidh

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

Bidh clasaichean co-theacsa cuideachd ag obair le .list-group-item-action. Thoir an aire gu bheil na stoidhlichean hover air an cur ris an seo nach eil an làthair san eisimpleir roimhe. Cuideachd a 'faighinn taic tha an .activestàit; cuir an sàs e gus taghadh gnìomhach a chomharrachadh air nì buidheann liosta co-theacsail.

Nì buidheann liosta bunaiteach sìmplidh Earrann buidheann liosta bun-sgoile sìmplidh Nì buidheann liosta àrd-sgoile sìmplidh Nì buidheann liosta soirbheachail sìmplidh Buidheann liosta de chunnartan sìmplidh Nì buidheann liosta rabhaidh sìmplidh Nì buidheann liosta fiosrachaidh sìmplidh Rud buidheann liosta aotrom sìmplidh Rud buidheann liosta dorcha sìmplidh

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

A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (me an teacsa faicsinneach), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .visually-hiddenchlas.

Le bràistean

Cuir bràistean ri nì buidhne liosta sam bith gus cunntasan gun leughadh, gnìomhachd agus barrachd a shealltainn le cuideachadh bho chuid de ghoireasan .

Rud liosta14
An dàrna nì liosta2
An treas nì liosta1

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

Susbaint gnàthaichte

Cuir cha mhòr HTML sam bith a-staigh, eadhon airson buidhnean liosta ceangailte mar an tè gu h-ìosal, le cuideachadh bho ghoireasan flexbox .

Dèan liosta de cheann nan nithean buidhne

3 làithean air ais

Cuid de shusbaint neach-àite ann am paragraf.

Agus beagan clò-bhualaidh.

Dèan liosta de cheann nan nithean buidhne

3 làithean air ais

Cuid de shusbaint neach-àite ann am paragraf.

Agus bha cuid a’ sèimheachadh clò beag.

Dèan liosta de cheann nan nithean buidhne

3 làithean air ais

Cuid de shusbaint neach-àite ann am paragraf.

Agus bha cuid a’ sèimheachadh clò beag.

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

Bogsaichean sgrùdaidh agus rèidiothan

Cuir bogsaichean sgrùdaidh agus rèidiothan Bootstrap taobh a-staigh nithean buidhne liosta agus gnàthaich mar a dh’ fheumar. Faodaidh tu an cleachdadh às aonais <label>s, ach cuimhnich gun cuir thu a-steach aria-labelfeart agus luach airson ruigsinneachd.

A 'chiad bhogsa-dearbhaidh
An dàrna bogsa-dearbhaidh
An treas bogsa-dearbhaidh
An ceathramh bogsa-dearbhaidh
An còigeamh bogsa-dearbhaidh

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

Agus ma tha thu ag iarraidh <label>s mar an .list-group-itemairson raointean mòra a tha air am bualadh, faodaidh tu sin a dhèanamh cuideachd.

A 'chiad bhogsa-dearbhaidh An dàrna bogsa-dearbhaidh An treas bogsa-dearbhaidh An ceathramh bogsa-dearbhaidh An còigeamh bogsa-dearbhaidh

<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

Caochlaidhean

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

Measgachadh

Air a chleachdadh còmhla ri gus na clasaichean caochladair co-theacsail$theme-colors a ghineadh airson s..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;
      }
    }
  }
}

Lùb

Lùb a ghineas na clasaichean mion-atharrachaidh leis a’ list-group-item-variant()mheasgachadh.

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

Giùlan JavaScript

Cleachd am plugan tab JavaScript - cuir a-steach e leotha fhèin no tron bootstrap.jsfhaidhle cruinnichte - gus ar buidheann liosta a leudachadh gus panaichean tabable de shusbaint ionadail a chruthachadh.

Dhachaigh Pròifil Teachdaireachdan Suidhichidhean

Cuid de shusbaint neach-àite ann am paragraf co-cheangailte ri “Dachaigh”. Agus beagan a bharrachd susbaint, air a chleachdadh an seo dìreach airson am pannal taba seo a lìonadh agus a lìonadh. Ann an riochdachadh, tha e soilleir gum biodh barrachd susbaint fìor agad an seo. Agus chan e dìreach teacsa. Dh’ fhaodadh e a bhith na rud sam bith, dha-rìribh. Teacs, ìomhaighean, foirmean.

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>

A’ cleachdadh feartan dàta

Faodaidh tu seòladh buidhne liosta a chuir an gnìomh gun JavaScript sam bith a sgrìobhadh le bhith dìreach a’ sònrachadh data-bs-toggle="list"no air eileamaid. Cleachd na feartan dàta seo air .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>

Air sgàth javascript

Dèan comas air nì liosta tabbable tro JavaScript (feumaidh gach nì liosta a chuir an gnìomh leotha fhèin):

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

Faodaidh tu nì liosta fa leth a chuir an gnìomh ann an grunn dhòighean:

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

A 'bhuaidh a dh' fhalbh

Gus am bi am pannal tabaichean a’ seargadh a-steach, cuir .faderis gach faidhle .tab-pane. Feumaidh a’ chiad phana taba cuideachd .showan susbaint tùsail a dhèanamh follaiseach.

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

Dòighean-obrach

constructor

Cuir an gnìomh eileamaid nì liosta agus inneal susbaint. Bu chòir gum biodh an dàrna cuid data-bs-targetno hrefnòta targaideach aig tab anns an 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>

seall

Tagh an nì liosta a chaidh a thoirt seachad agus seallaidh e am pana co-cheangailte ris. Bidh nì liosta sam bith eile a chaidh a thaghadh roimhe gun a bhith air a thaghadh agus tha am pana co-cheangailte ris falaichte. Tillidh e chun neach-fios mus deach am pana taba a shealltainn (mar eisimpleir, mus tachair an shown.bs.tabtachartas).

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

  tab.show()

cuidhteas

A 'sgrios tab eileamaid.

faighinn a-steach

Dòigh statach a leigeas leat an eisimpleir tab fhaighinn co-cheangailte ri eileamaid DOM

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

faighOrCreateInstance

Dòigh statach a leigeas leat eisimpleir an taba fhaighinn co-cheangailte ri eileamaid DOM, no fear ùr a chruthachadh gun fhios nach deach a thòiseachadh

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

Tachartasan

Nuair a sheallas tu taba ùr, bidh na tachartasan a’ losgadh san òrdugh a leanas:

hide.bs.tab(air an taba gnìomhach làithreach)
show.bs.tab(air an taba a tha ri fhaicinn)
hidden.bs.tab(air an taba gnìomhach roimhe, an aon fhear ris an hide.bs.tabtachartas)
shown.bs.tab(air an taba a tha dìreach air a thaisbeanadh gu gnìomhach, an aon fhear ris an show.bs.tabtachartas)

Mura robh taba gnìomhach mu thràth, cha tèid na tachartasan hide.bs.tabagus na tachartasan a chuir às.hidden.bs.tab

Seòrsa tachartas	Tuairisgeul
`show.bs.tab`	Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
`shown.bs.tab`	Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
`hide.bs.tab`	Bidh an tachartas seo a’ losgadh nuair a tha taba ùr gu bhith air a shealltainn (agus mar sin tha an taba gnìomhach roimhe gu bhith falaichte). Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach gnàthach agus an taba ùr a dh’ aithghearr gu bhith gnìomhach, fa leth.
`hidden.bs.tab`	Bidh an tachartas seo a’ losgadh às deidh taba ùr a nochdadh (agus mar sin tha an taba gnìomhach roimhe falaichte). Cleachd `event.target`agus `event.relatedTarget`gus cuimseachadh air an taba gnìomhach roimhe agus an taba gnìomhach ùr, fa leth.

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