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

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>

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

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>

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

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>

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

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>

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.

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>

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

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>

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.

Rud liosta
Rud liosta
Rud liosta

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>

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

Fo-cheannard
Susbaint airson nì liosta
14
Fo-cheannard
Susbaint airson nì liosta
14
Fo-cheannard
Susbaint airson nì liosta
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>

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ì

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>

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

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>

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

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>

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

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>

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.

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>

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

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>

A ' chiad radio
An dàrna radio
An treas radio

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Faodaidh tu .stretched-linkair <label>s a chleachdadh gus an nì buidhne liosta gu lèir a bhriogadh.

A 'chiad bhogsa-dearbhaidh
An dàrna bogsa-dearbhaidh
An treas bogsa-dearbhaidh

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

Caochlaidhean

Air a chur ris ann an v5.2.0

Mar phàirt de dhòigh-obrach caochladairean CSS Bootstrap, tha buidhnean liosta a-nis a’ cleachdadh caochladairean CSS ionadail air adhart .list-groupairson gnàthachadh fìor-ùine leasaichte. Tha luachan airson caochladairean CSS air an suidheachadh tro Sass, agus mar sin tha gnàthachadh Sass fhathast a’ faighinn taic, cuideachd.

  --#{$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};

caochladairean Sass

$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):

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

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

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

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

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

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .

Cuir an susbaint agad an gnìomh mar eileamaid tab.

Faodaidh tu eisimpleir tab a chruthachadh leis an neach-togail, mar eisimpleir:

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

Dòigh-obrach	Tuairisgeul
`dispose`	A 'sgrios tab eileamaid.
`getInstance`	Dòigh statach a leigeas leat an eisimpleir tab fhaighinn co-cheangailte ri eileamaid DOM, faodaidh tu a chleachdadh mar seo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Modh statach a thilleas eisimpleir taba co-cheangailte ri eileamaid DOM no cruthaich fear ùr gun fhios nach deach a thòiseachadh. Faodaidh tu a chleachdadh mar seo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Tagh an taba a chaidh a thoirt seachad agus seallaidh e am pana co-cheangailte ris. Bidh taba 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 (ie mus tachair an `shown.bs.tab`tachartas).

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

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