Liosta grúpa

Is comhpháirt sholúbtha chumhachtach iad grúpaí liosta chun sraith ábhar a thaispeáint. Déan iad a mhodhnú agus a leathnú chun tacú le beagnach aon ábhar laistigh.

Ar an leathanach seo

Sampla bunúsach

Is é an grúpa liosta is bunúsaí ná liosta neamhordaithe le míreanna liosta agus na ranganna cearta. Tóg air leis na roghanna a leanann, nó le do CSS féin de réir mar is gá.

Mír
An dara mír
An tríú mír
An ceathrú mír
Agus an cúigiú cuid

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>

Míreanna gníomhacha

Cuir .activele a .list-group-itemchun an roghnú gníomhach reatha a léiriú.

Mír gníomhach
An dara mír
An tríú mír
An ceathrú mír
Agus an cúigiú cuid

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>

Míreanna faoi mhíchumas

Cuir .disabledle a .list-group-itemchun é a dhéanamh díchumasaithe . Tabhair faoi deara go .disabledmbeidh gá le JavaScript saincheaptha freisin chun a n-imeachtaí cliceáil a dhíchumasú go hiomlán (m.sh., naisc).

Mír díchumasaithe
An dara mír
An tríú mír
An ceathrú mír
Agus an cúigiú cuid

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>

Naisc agus cnaipí

Úsáid <a>s nó s chun míreanna grúpa liosta inghníomhaithe<button> a chruthú le hover, díchumasaithe, agus stáit ghníomhacha trí . Scaraimid na bréige-ranganna seo lena chinntiú nach soláthraíonn grúpaí liostaí déanta d’eilimintí neamh-idirghníomhacha (cosúil le s nó s) acmhainn cliceáil nó sconna..list-group-item-action<li><div>

Déan cinnte nach n-úsáideann tú na gnáth- .btnranganna anseo .

An mhír naisc reatha An dara mír naisc An tríú mír nasc An ceathrú mír nasc Mír naisc díchumasaithe

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, is féidir leat úsáid a bhaint as an disabledtréith in ionad an .disabledranga. Faraor, <a>ní thacaíonn s leis an aitreabúid díchumasaithe.

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>

Sruthán

Cuir .list-group-flushleis chun roinnt teorainneacha agus coirnéil chothromaithe a bhaint chun liosta a dhéanamh de mhíreanna grúpa imeall go himeall i gcoimeádán tuismitheora (m.sh., cártaí).

Mír
An dara mír
An tríú mír
An ceathrú mír
Agus an cúigiú cuid

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>

Uimhrithe

Cuir an .list-group-numberedrang mionathraithe leis (agus úsáid <ol>eilimint go roghnach) chun rogha a dhéanamh de liosta míreanna grúpa uimhrithe. Gintear uimhreacha trí CSS (seachas <ol>stíliú réamhshocraithe brabhsálaí) chun socrú níos fearr a dhéanamh laistigh de mhíreanna an ghrúpa liosta agus chun oiriúnú níos fearr a cheadú.

Gintear na huimhreacha ag counter-resetar an <ol>, agus ansin déantar iad a stíliú agus a chur le ::beforeeilimint bhréagach ar an <li>le counter-incrementagus content.

Mír liosta
Mír liosta
Mír 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>

Oibríonn siad seo go hiontach le hábhar saincheaptha freisin.

Fo-cheannteideal
Ábhar don mhír liosta
14
Fo-cheannteideal
Ábhar don mhír liosta
14
Fo-cheannteideal
Ábhar don mhír 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>

Cothrománach

Cuir .list-group-horizontalleis chun leagan amach na míreanna liostaí a athrú ó cheartingearach go cothrománach trasna gach brisphointe. Nó, roghnaigh malairt sofhreagrach .list-group-horizontal-{sm|md|lg|xl|xxl}chun liosta a dhéanamh cothrománach ag tosú ag an brisphointe sin min-width. Faoi láthair ní féidir grúpaí liosta cothrománacha a chomhcheangal le grúpaí liostaí sruthlaithe.

ProTip: Ar mhaith leat míreanna grúpa liosta comhionann-leithead agus iad cothrománach? Cuir .flex-fillle gach mír ghrúpa liosta.

Mír
An dara mír
An tríú mír

Mír
An dara mír
An tríú mír

Mír
An dara mír
An tríú mír

Mír
An dara mír
An tríú mír

Mír
An dara mír
An tríú mír

Mír
An dara mír
An tríú mír

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>

Ranganna comhthéacsúla

Bain úsáid as ranganna comhthéacsúla chun míreanna a liostáil le cúlra agus dath státmhar.

Mír ghrúpa simplí de liosta réamhshocraithe
Príomh-mhír ghrúpa liosta simplí
Mír ghrúpa liosta tánaisteach simplí
Mír ghrúpa simplí den liosta rathúlachta
Liosta contúirte simplí grúpa
Liosta rabhaidh shimplí mír ghrúpa
Mír grúpa liosta faisnéise simplí
Mír grúpa liosta éadrom simplí
Mír grúpa simplí liosta dorcha

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>

Oibríonn ranganna comhthéacsúla le .list-group-item-action. Tabhair faoi deara go bhfuil na stíleanna hover curtha leis anseo nach bhfuil i láthair sa sampla roimhe seo. Tá tacaíocht freisin ag an .activestát; cuir i bhfeidhm é chun roghnú gníomhach a léiriú ar mhír ghrúpa ar liosta comhthéacs.

Mír ghrúpa simplí de liosta réamhshocraithe Príomh-mhír ghrúpa liosta simplí Mír ghrúpa liosta tánaisteach simplí Mír ghrúpa simplí den liosta rathúlachta Liosta contúirte simplí grúpa Liosta rabhaidh shimplí mír ghrúpa Mír grúpa liosta faisnéise simplí Mír grúpa liosta éadrom simplí Mír grúpa simplí liosta dorcha

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>

Brí a chur in iúl do theicneolaíochtaí cúnta

Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .visually-hiddenrang.

Le suaitheantais

Cuir suaitheantais le haon mhír ghrúpa liosta chun comhaireamh neamhléite, gníomhaíocht agus tuilleadh a thaispeáint le cabhair ó roinnt fóntais .

Mír liosta14
An dara mír liosta2
An tríú mír 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>

Ábhar saincheaptha

Cuir beagnach aon HTML istigh leis, fiú do ghrúpaí liostaí nasctha mar an ceann thíos, le cabhair ó fhóntais flexbox .

Liosta ceannteideal míre grúpa

3 lá ó shin

Roinnt ábhar áitsealbhóra i mír.

Agus roinnt cló beag.

Liosta ceannteideal míre grúpa

3 lá ó shin

Roinnt ábhar áitsealbhóra i mír.

Agus roinnt cló beag balbh.

Liosta ceannteideal míre grúpa

3 lá ó shin

Roinnt ábhar áitsealbhóra i mír.

Agus roinnt cló beag balbh.

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>

Seiceálacha agus raidiónna

Cuir ticbhoscaí agus raidiónna Bootstrap laistigh de liosta míreanna grúpa agus saincheap de réir mar is gá. Is féidir leat iad a úsáid gan <label>s, ach cuimhnigh le do thoil aria-labeltréith agus luach inrochtaineachta a chur san áireamh.

An chéad ticbhosca
Dara ticbhosca
Tríú ticbhosca

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>

An chéad raidió
Dara raidió
Tríú raidió

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>

Is féidir leat úsáid a bhaint as .stretched-links <label>chun an liosta iomlán a dhéanamh ar mhír ghrúpa inchliceáilte.

An chéad ticbhosca
Dara ticbhosca
Tríú ticbhosca

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

Athróga

Curtha leis in v5.2.0

Mar chuid de chur chuige athróg CSS Bootstrap atá ag teacht chun cinn, úsáideann grúpaí liosta anois athróga áitiúla CSS ar aghaidh .list-grouple haghaidh saincheaptha feabhsaithe fíor-ama. Socraítear luachanna na n-athróg CSS trí Sass, mar sin tacaítear le saincheaptha Sass fós freisin.

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

Athróga 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;

Meascáin

Úsáidtear é in éineacht le chun na haicmí athraitheacha comhthéacsúla$theme-colors a ghiniúint le haghaidh 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 ghineann na ranganna mionathraithe leis an 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);
}

Iompar javascript

Bain úsáid as an breiseán JavaScript cluaisín - cuir san áireamh é ina n-aonar nó tríd an bootstrap.jsgcomhad tiomsaithe - chun ár ngrúpa liosta a leathnú chun pannaí cluaisíní d'ábhar áitiúil a chruthú.

Baile Próifíl Teachtaireachtaí Socruithe

Roinnt ábhar áitsealbhóra i mír a bhaineann le "Baile". Agus roinnt ábhar breise, a úsáidtear anseo ach a eochaircheapadh agus a líonadh painéal seo tab. I dtáirgeadh, is léir go mbeadh níos mó ábhar fíor agat anseo. Agus ní hamháin téacs. D'fhéadfadh sé a bheith rud ar bith, i ndáiríre. Téacs, íomhánna, foirmeacha.

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>

Ag baint úsáide as tréithe sonraí

Is féidir leat nascleanúint grúpa liosta a ghníomhachtú gan aon JavaScript a scríobh ach go simplí a shonrú data-bs-toggle="list"nó ar eilimint. Úsáid na tréithe sonraí seo 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>

Trí JavaScript

Cumasaigh mír liosta tabbable trí JavaScript (ní mór gach mír liosta a ghníomhachtú ina n-aonar):

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

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

Is féidir leat mír liosta aonair a ghníomhachtú ar go leor bealaí:

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

Éifeacht céimnithe

Chun an painéal cluaisíní a mhaolú, cuir .fadele gach .tab-pane. Ní mór go mbeadh ar an gcéad phána cluaisín freisin .showan t-ábhar tosaigh a dhéanamh le feiceáil.

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

Modhanna

Modhanna agus aistrithe asincrónacha

Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .

Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .

Gníomhachtaíonn sé d'inneachar mar eilimint cluaisíní.

Is féidir leat sampla cluaisín a chruthú leis an cruthaitheoir, mar shampla:

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

Modh	Cur síos
`dispose`	Scriosann cluaisín eilimint.
`getInstance`	Modh statach a ligeann duit an t-ús cluaisín a bhaineann le heilimint DOM a fháil, is féidir leat é a úsáid mar seo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Modh statach a thugann ar ais ásc cluaisín a bhaineann le heilimint DOM nó a chruthaíonn ceann nua ar eagla nach dtosófaí é. Is féidir leat é a úsáid mar seo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Roghnaíonn sé an cluaisín tugtha agus taispeánann sé an phána a bhaineann leis. Éiríonn aon chluaisín eile a roghnaíodh roimhe seo díroghnaithe agus tá an phána a bhaineann leis i bhfolach. Filleann sé ar an nglaoiteoir sula dtaispeántar an phána cluaisín (ie sula `shown.bs.tab`dtarlaíonn an teagmhas).

Imeachtaí

Agus cluaisín nua á thaispeáint, cuirtear na himeachtaí ar lasadh san ord seo a leanas:

hide.bs.tab(ar an gcluaisín gníomhach reatha)
show.bs.tab(ar an gcluaisín le taispeáint)
hidden.bs.tab(ar an gcluaisín gníomhach roimhe seo, an ceann céanna leis an hide.bs.tabimeacht)
shown.bs.tab(ar an gcluaisín nua-ghníomhach díreach taispeánta, mar an gcéanna leis an show.bs.tabimeacht)

Mura raibh aon chluaisín gníomhach cheana féin, ní dhéanfar an hide.bs.tabagus na hidden.bs.tabhimeachtaí a bhácáil.

Cineál imeachta	Cur síos
`hide.bs.tab`	Tineann an teagmhas seo nuair atá cluaisín nua le taispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo le cur i bhfolach). Bain úsáid as `event.target`agus `event.relatedTarget`chun an cluaisín gníomhach reatha agus an cluaisín nua luath-le-bheith-ghníomhach a dhíriú, faoi seach.
`hidden.bs.tab`	Tineann an teagmhas seo tar éis cluaisín nua a thaispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo i bhfolach). Úsáid `event.target`agus `event.relatedTarget`chun an cluaisín gníomhach roimhe seo agus an cluaisín gníomhach nua a dhíriú, faoi seach.
`show.bs.tab`	Teann an teagmhas seo ar thaispeántas cluaisíní, ach sula dtaispeántar an cluaisín nua. Úsáid `event.target`agus `event.relatedTarget`chun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
`shown.bs.tab`	Teann an teagmhas seo ar thaispeántas cluaisíní tar éis cluaisín a thaispeáint. Úsáid `event.target`agus `event.relatedTarget`chun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.

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