Ẹgbẹ akojọ

Awọn ẹgbẹ atokọ jẹ ẹya to rọ ati agbara fun iṣafihan lẹsẹsẹ ti akoonu. Ṣatunṣe ki o faagun wọn lati ṣe atilẹyin fun eyikeyi akoonu laarin.

Lori iwe yi

Apẹẹrẹ ipilẹ

Ẹgbẹ atokọ ipilẹ julọ jẹ atokọ ti a ko paṣẹ pẹlu awọn ohun atokọ ati awọn kilasi to dara. Kọ sori rẹ pẹlu awọn aṣayan ti o tẹle, tabi pẹlu CSS tirẹ bi o ṣe nilo.

Ohun kan
Nkan keji
Ohun kẹta
Ohun kẹrin
Ati ọkan karun

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>

Awọn nkan ti nṣiṣe lọwọ

Ṣafikun .active-un lati .list-group-itemtọka si yiyan ti nṣiṣe lọwọ lọwọlọwọ.

Ohun ti nṣiṣe lọwọ
Nkan keji
Ohun kẹta
Ohun kẹrin
Ati ọkan karun

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>

Awọn nkan alaabo

Fikun -un .disabledlati jẹ .list-group-itemki o dabi alaabo. Ṣe akiyesi pe diẹ ninu awọn eroja pẹlu .disabledyoo tun nilo JavaScript aṣa lati pa awọn iṣẹlẹ titẹ wọn ni kikun (fun apẹẹrẹ, awọn ọna asopọ).

Nkan alaabo
Nkan keji
Ohun kẹta
Ohun kẹrin
Ati ọkan karun

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>

Awọn ọna asopọ ati awọn bọtini

Lo <a>awọn s tabi <button>s lati ṣẹda awọn ohun ẹgbẹ ti o le ṣiṣẹ pẹlu rababa, alaabo, ati awọn ipinlẹ ti nṣiṣe lọwọ nipa fifi .list-group-item-action. A ya awọn kilasi afarape wọnyi sọtọ lati rii daju pe awọn ẹgbẹ atokọ ti a ṣe ti awọn eroja ti kii ṣe ibaraenisepo (bii awọn <li>s tabi <div>s) ko pese titẹ tabi tẹ owo ni kia kia.

Rii daju pe o ko lo awọn .btnkilasi boṣewa nibi .

Nkan ọna asopọ lọwọlọwọ Ohun kan ọna asopọ keji Ohun kan ọna asopọ kẹta Ohun kan ọna asopọ kẹrin Nkan ọna asopọ alaabo

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>

Pẹlu <button>s, o tun le ṣe awọn lilo ti awọn disabledabuda dipo ti .disabledkilasi. Ibanujẹ, <a>s ko ṣe atilẹyin abuda alaabo.

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>

Fọ

Fikun -un .list-group-flushlati yọ diẹ ninu awọn aala ati awọn igun yika lati ṣe awọn ohun ẹgbẹ akojọ eti-si-eti ninu apo obi kan (fun apẹẹrẹ, awọn kaadi).

Ohun kan
Nkan keji
Ohun kẹta
Ohun kẹrin
Ati ọkan karun

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>

Ti ṣe nọmba

Ṣafikun .list-group-numberedkilasi modifier (ati ni yiyan lo ipin <ol>kan) lati jade si awọn ohun ẹgbẹ atokọ nọmba. Awọn nọmba ti wa ni ipilẹṣẹ nipasẹ CSS (ni idakeji si a <ol>s aiyipada aṣa aṣawakiri) fun dara placement inu awọn ohun ẹgbẹ akojọ ati lati gba fun dara isọdi.

Awọn nọmba ti wa ni ipilẹṣẹ nipasẹ counter-resetlori <ol>, ati ki o si ara ati ki o gbe pẹlu kan ::beforepseudo-ano lori <li>pẹlu counter-incrementati content.

Ohun akojọ kan
Ohun akojọ kan
Ohun akojọ kan

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>

Awọn wọnyi ṣiṣẹ nla pẹlu akoonu aṣa bi daradara.

Akọle-ọrọ
Akoonu fun ohun akojọ
14
Akọle-ọrọ
Akoonu fun ohun akojọ
14
Akọle-ọrọ
Akoonu fun ohun akojọ
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>

Petele

Ṣafikun .list-group-horizontallati yi ifilelẹ awọn ohun ẹgbẹ atokọ pada lati inaro si petele kọja gbogbo awọn aaye fifọ. Ni omiiran, yan iyatọ idahun .list-group-horizontal-{sm|md|lg|xl|xxl}lati ṣe akojọpọ atokọ petele ti o bẹrẹ ni aaye fifọ yẹn min-width. Lọwọlọwọ petele akojọ awọn ẹgbẹ ko le wa ni idapo pelu danu akojọ awọn ẹgbẹ.

ProTip: Ṣe o fẹ awọn ohun ẹgbẹ atokọ iwọn-dogba nigbati petele? Fi .flex-fillsi kọọkan akojọ ẹgbẹ ohun kan.

Ohun kan
Nkan keji
Ohun kẹta

Ohun kan
Nkan keji
Ohun kẹta

Ohun kan
Nkan keji
Ohun kẹta

Ohun kan
Nkan keji
Ohun kẹta

Ohun kan
Nkan keji
Ohun kẹta

Ohun kan
Nkan keji
Ohun kẹta

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>

Awọn kilasi asọye

Lo awọn kilasi ọrọ-ọrọ si awọn ohun atokọ ara pẹlu abẹlẹ ipinlẹ ati awọ.

A o rọrun akojọ aiyipada akojọ ohun kan
Nkan ẹgbẹ atokọ akọkọ ti o rọrun
A o rọrun Atẹle akojọ Ẹgbẹ ohun kan
A o rọrun akojọ ohun ẹgbẹ aseyori
A o rọrun akojọ ewu Ẹgbẹ ohun kan
A o rọrun Ikilọ akojọ Ẹgbẹ ohun kan
A o rọrun info akojọ ohun kan ẹgbẹ
A o rọrun ina akojọ Ẹgbẹ ohun kan
A o rọrun dudu akojọ Ẹgbẹ ohun kan

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>

Awọn kilasi asọye tun ṣiṣẹ pẹlu .list-group-item-action. Ṣe akiyesi afikun ti awọn aza rababa nibi ko wa ninu apẹẹrẹ ti tẹlẹ. Tun ni atilẹyin ni .activeipinle; lo lati ṣe afihan yiyan ti nṣiṣe lọwọ lori ohun ẹgbẹ atokọ ọrọ-ọrọ kan.

A o rọrun akojọ aiyipada akojọ ohun kan Nkan ẹgbẹ atokọ akọkọ ti o rọrun A o rọrun Atẹle akojọ Ẹgbẹ ohun kan A o rọrun akojọ ohun ẹgbẹ aseyori A o rọrun akojọ ewu Ẹgbẹ ohun kan A o rọrun Ikilọ akojọ Ẹgbẹ ohun kan A o rọrun info akojọ ohun kan ẹgbẹ A o rọrun ina akojọ Ẹgbẹ ohun kan A o rọrun dudu akojọ Ẹgbẹ ohun kan

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>

Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .visually-hiddenkilasi naa.

Pẹlu awọn baaji

Ṣafikun awọn baagi si eyikeyi ohun ẹgbẹ atokọ lati ṣafihan awọn iṣiro ti a ko ka, iṣẹ ṣiṣe, ati diẹ sii pẹlu iranlọwọ ti diẹ ninu awọn ohun elo .

Ohun akojọ kan14
A keji akojọ ohun kan2
A kẹta akojọ ohun kan1

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>

Aṣa akoonu

Ṣafikun fere eyikeyi HTML laarin, paapaa fun awọn ẹgbẹ atokọ ti o sopọ bi eyiti o wa ni isalẹ, pẹlu iranlọwọ ti awọn ohun elo flexbox .

Atokọ nkan ẹgbẹ

3 ọjọ seyin

Diẹ ninu akoonu dimu ni ìpínrọ kan.

Ati diẹ ninu awọn titẹ kekere.

Atokọ nkan ẹgbẹ

3 ọjọ seyin

Diẹ ninu akoonu dimu ni ìpínrọ kan.

Ati diẹ ninu awọn titẹ kekere ti o dakẹ.

Atokọ nkan ẹgbẹ

3 ọjọ seyin

Diẹ ninu akoonu dimu ni ìpínrọ kan.

Ati diẹ ninu awọn titẹ kekere ti o dakẹ.

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>

Awọn apoti ayẹwo ati awọn redio

Gbe awọn apoti ayẹwo Bootstrap ati awọn redio laarin awọn ohun ẹgbẹ atokọ ati ṣe akanṣe bi o ṣe nilo. O le lo wọn laisi <label>s, ṣugbọn jọwọ ranti lati fi ẹya kan kun aria-labelati iye fun iraye si.

Apoti akọkọ
Apoti ayẹwo keji
Apoti ayẹwo kẹta

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>

Redio akọkọ
Redio keji
Redio kẹta

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>

O le lo .stretched-linklori <label>s lati ṣe gbogbo akojọ ẹgbẹ ohun kan tẹ.

Apoti akọkọ
Apoti ayẹwo keji
Apoti ayẹwo kẹta

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

Awọn oniyipada

Fi kun v5.2.0

Gẹ́gẹ́ bí ara Bootstrap’s títúnṣe àwọn àyípadà CSS, àtòjọ àwọn ẹgbẹ́ ń lo àwọn oniyipada CSS ti agbegbe .list-groupfun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass oniyipada

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

Mixins

Ti a lo ni apapo pẹlu $theme-colorslati ṣe ipilẹṣẹ awọn kilasi iyatọ ọrọ -ọrọ fun .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;
      }
    }
  }
}

Loop

Loop ti o ṣe agbekalẹ awọn kilasi modifier pẹlu list-group-item-variant()mixin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

JavaScript ihuwasi

Lo ohun itanna JavaScript taabu-pẹlu ẹyọkan tabi nipasẹ bootstrap.jsfaili ti a ṣajọpọ—lati faagun ẹgbẹ atokọ wa lati ṣẹda awọn panee ti akoonu agbegbe.

Ile Profaili Awọn ifiranṣẹ Ètò

Diẹ ninu akoonu dimu ni ìpínrọ kan ti o jọmọ “Ile”. Ati diẹ ninu akoonu diẹ sii, ti a lo nibi kan lati pad jade ati kun nronu taabu yii. Ni iṣelọpọ, o han gedegbe ni akoonu gidi diẹ sii nibi. Ati ki o ko o kan ọrọ. O le jẹ ohunkohun, looto. Ọrọ, awọn aworan, awọn fọọmu.

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>

Lilo awọn abuda data

O le mu lilọ kiri ẹgbẹ akojọ kan ṣiṣẹ laisi kikọ eyikeyi JavaScript nipa sisọ pato data-bs-toggle="list"tabi lori nkan kan. Lo awọn abuda data wọnyi lori .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>

Nipasẹ JavaScript

Jeki ohun atokọ tabbable ṣiṣẹ nipasẹ JavaScript (ohun atokọ kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):

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

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

O le mu nkan atokọ kọọkan ṣiṣẹ ni awọn ọna pupọ:

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

Ipa ipare

Lati jẹ ki nronu awọn taabu ipare sinu, fi .fadesi kọọkan .tab-pane. PAN taabu akọkọ gbọdọ tun ni .showlati jẹ ki akoonu ibẹrẹ han.

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

Awọn ọna

Awọn ọna Asynchronous ati awọn iyipada

Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .

Wo iwe JavaScript wa fun alaye diẹ sii .

Mu akoonu rẹ ṣiṣẹ bi eroja taabu.

O le ṣẹda apẹẹrẹ taabu pẹlu oluṣeto, fun apẹẹrẹ:

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

Ọna	Apejuwe
`dispose`	Pa taabu eroja run.
`getInstance`	Ọna aimi eyiti o fun ọ laaye lati gba apẹẹrẹ taabu ti o ni nkan ṣe pẹlu nkan DOM, o le lo bii eyi: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Ọna aimi eyiti o da apẹẹrẹ taabu kan ti o ni nkan ṣe si nkan DOM tabi ṣẹda ọkan tuntun ni ọran ti ko ṣe ipilẹṣẹ. O le lo bi eleyi `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Yan taabu ti a fun ati ṣafihan PAN ti o somọ. Eyikeyi taabu miiran ti o ti yan tẹlẹ di aiyan ati pe iwe ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (ie ṣaaju ki `shown.bs.tab`iṣẹlẹ naa to waye).

Awọn iṣẹlẹ

Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:

hide.bs.tab(lori taabu lọwọ lọwọlọwọ)
show.bs.tab(lori taabu ti yoo han)
hidden.bs.tab(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna fun hide.bs.tabiṣẹlẹ naa)
shown.bs.tab(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna fun show.bs.tabiṣẹlẹ naa)

Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, lẹhinna hide.bs.tabati awọn hidden.bs.tabiṣẹlẹ kii yoo jẹ ina.

Iru iṣẹlẹ	Apejuwe
`hide.bs.tab`	Iṣẹlẹ yii n ṣiṣẹ nigbati taabu tuntun yoo han (ati nitorinaa taabu ti nṣiṣe lọwọ tẹlẹ ni lati farapamọ). Lo `event.target`ati `event.relatedTarget`lati fojusi taabu ti nṣiṣe lọwọ lọwọlọwọ ati taabu tuntun lai-lati-ṣiṣẹ, ni atele.
`hidden.bs.tab`	Iṣẹlẹ yii n tan lẹhin ti taabu tuntun ti han (ati nitorinaa taabu ti nṣiṣe lọwọ iṣaaju ti farapamọ). Lo `event.target`ati `event.relatedTarget`lati fojusi taabu ti nṣiṣe lọwọ iṣaaju ati taabu ti nṣiṣe lọwọ tuntun, lẹsẹsẹ.
`show.bs.tab`	Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo `event.target`ati `event.relatedTarget`lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.
`shown.bs.tab`	Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo `event.target`ati `event.relatedTarget`lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele.

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