Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
Check
in English

Kyerɛw kuw no din

List groups yɛ ade a ɛyɛ mmerɛw na ɛwɔ tumi a wɔde da nsɛm a ɛtoatoa so adi. Sesa na trɛw mu ma ɛboa ɛkame ayɛ sɛ nsɛm biara a ɛwɔ mu no.

Wɔ kratafa yi so

Nhwɛso titiriw

List kuw a ɛho hia sen biara ne list a wɔanhyehyɛ no yiye a list nneɛma ne adesua ahorow a ɛfata wom. Fa akwan horow a edi hɔ no si so, anaasɛ fa w’ankasa CSS sɛnea ɛho hia.

  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade a ɛto so anan
  • Na nea ɛto so anum
html na ɛwɔ hɔ 
<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>

Nneɛma a ɛyɛ nnam

Fa ka .activea ho .list-group-itemna kyerɛ mprempren a woapaw a ɛreyɛ adwuma no.

  • Ade a ɛyɛ nnam
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade a ɛto so anan
  • Na nea ɛto so anum
html na ɛwɔ hɔ 
<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>

Nneɛma a wɔadi dɛm

Fa ka .disableda ho .list-group-itemna ama ayɛ te sɛ nea wɔagyae. Hyɛ no nsow sɛ elements bi a ɛwɔ .disablednso bɛhwehwɛ JavaScript a wɔahyɛ da ayɛ no na ama wɔn click events no ayɛ adwuma koraa (sɛ nhwɛso no, links).

  • Ade a wɔadi dɛm
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade a ɛto so anan
  • Na nea ɛto so anum
html na ɛwɔ hɔ 
<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>

Fa <a>s anaa <button>s yɛ list kuw nneɛma a wotumi yɛ ho adwuma a ɛwɔ hover, disabled, ne active states denam .list-group-item-action. Yɛtetew saa pseudo-classes yi mu de hwɛ hu sɛ list akuw a wɔde nneɛma a ɛnyɛ nkitahodi (te sɛ <li>s anaa <div>s) ayɛ no remma click anaa tap affordance.

Hwɛ hu sɛ woremfa .btnadesua ahorow a ɛwɔ hɔ no nni dwuma wɔ ha .

Mprempren link ade no Link adeɛ a ɛtɔ so mmienu Link adeɛ a ɛtɔ so mmiɛnsa Link adeɛ a ɛtɔ so nnan Link adeɛ a wɔagyae
html na ɛwɔ hɔ 
<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>

Sɛ wode <button>s di dwuma a, wubetumi nso de disabledsu no adi dwuma sen sɛ wode .disabledadesuakuw no bedi dwuma. Awerɛhosɛm ne sɛ, <a>s ntumi mmoa su a wɔadi dɛm no.

html na ɛwɔ hɔ 
<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>

Flush a wɔde hyɛ mu

Fa ka .list-group-flushho na yi ahyeɛ binom ne ntwea a ɛyɛ kurukuruwa de kyerɛ list kuw nneɛma ase-kɔ-ano wɔ ɔwofoɔ ahina mu (sɛ nhwɛsoɔ, kaad).

  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade a ɛto so anan
  • Na nea ɛto so anum
html na ɛwɔ hɔ 
<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>

Wɔde nɔma ahyɛ mu

Fa .list-group-numberedmodifier class no ka ho (na sɛ wopɛ a, fa <ol>element bi di dwuma) na paw sɛ wobɛkɔ numbered list group nneɛma mu. Wɔnam CSS so na ɛyɛ nɔma (a ɛne <ol>s default browser styling bɔ abira) ma wɔde si list kuw nneɛma mu yiye na ɛma kwan ma wɔyɛ nsakrae yiye.

Wɔde akontaahyɛde ahorow no ba counter-resetwɔ <ol>, na afei wɔyɛ no sɛnea wɔyɛ no na wɔde ::beforepseudo-element bi si <li>with counter-incrementne content.

  1. Asɛm bi a wɔahyehyɛ
  2. Asɛm bi a wɔahyehyɛ
  3. Asɛm bi a wɔahyehyɛ
html na ɛwɔ hɔ 
<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>

Eyinom yɛ adwuma kɛse ne amanneɛbɔ nsɛm nso.

  1. Asɛmti ketewaa bi
    Nsɛm a ɛwɔ mu ma list item
    14. 15
  2. Asɛmti ketewaa bi
    Nsɛm a ɛwɔ mu ma list item
    14. 15
  3. Asɛmti ketewaa bi
    Nsɛm a ɛwɔ mu ma list item
    14. 15
html na ɛwɔ hɔ 
<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>

Ne tɛtrɛtɛ mu

Fa ka .list-group-horizontalho na sesa list group nneɛma no nhyehyɛe fi vertical kɔ horizontal wɔ breakpoints nyinaa so. Sɛnea ɛbɛyɛ a, paw mmuae variant .list-group-horizontal-{sm|md|lg|xl|xxl}na ama list kuw bi ayɛ horizontal a efi ase wɔ saa breakpoint no min-width. Mprempren wontumi mfa horizontal list akuw no nka flush list akuw ho.

ProTip: Wopɛ list kuw nneɛma a ne tɛtrɛtɛ yɛ pɛ bere a ɛwɔ soro no? Fa ka .flex-filllist kuw ade biara ho.

  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
  • Ade bi
  • Ade a ɛto so abien
  • Ade a ɛto so abiɛsa
html na ɛwɔ hɔ 
<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>

Adesua ahorow a ɛfa nsɛm a ɛfa ho

Fa contextual classes di dwuma fa style list nneɛma a ɛwɔ stateful akyi ne kɔla.

  • Default list kuw ade a ɛnyɛ den
  • Mfitiase list kuw ade a ɛnyɛ den
  • Asɛm a ɛnyɛ den a ɛto so abien list kuw ade
  • A simple nkonimdi list kuw ade
  • Asiane list kuw ade a ɛnyɛ den
  • Kɔkɔbɔ list kuw ade a ɛnyɛ den
  • A simple info list kuw ade
  • Hann list kuw ade a ɛnyɛ den
  • Esum list kuw ade a ɛnyɛ den
html na ɛwɔ hɔ 
<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>

Nsɛm a ɛfa ho adesua ahorow nso ne .list-group-item-action. Hyɛ hover styles a ɛwɔ ha a enni nhwɛso a atwam no mu no nsow. Ɔman no nso boa .active; fa di dwuma de kyerɛ nea wɔapaw a ɛyɛ nnam wɔ nsɛm a ɛfa ho list kuw ade bi so.

Default list kuw ade a ɛnyɛ den Mfitiase list kuw ade a ɛnyɛ den Asɛm a ɛnyɛ den a ɛto so abien list kuw ade A simple nkonimdi list kuw ade Asiane list kuw ade a ɛnyɛ den Kɔkɔbɔ list kuw ade a ɛnyɛ den A simple info list kuw ade Hann list kuw ade a ɛnyɛ den Esum list kuw ade a ɛnyɛ den
html na ɛwɔ hɔ 
<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>
Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .visually-hiddenadesuakuw no mu.

Wɔde badge ahorow ahyɛ mu

Fa badge ahorow ka list kuw ade biara ho de kyerɛ akontaabu a wonkenkanee, dwumadi, ne nea ɛkeka ho denam utilities binom mmoa so .

  • Asɛm bi a wɔahyehyɛ14. 15
  • Ade a ɛto so abien a wɔahyehyɛ2. 2.
  • Ade a ɛto so abiɛsa a wɔahyehyɛ1. 1.
html na ɛwɔ hɔ 
<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>

Nsɛm a wɔahyehyɛ a wɔahyɛ da ayɛ

Ɛkame ayɛ sɛ fa HTML biara ka ho wɔ mu, mpo ma linked list groups te sɛ nea ɛwɔ ase ha no, denam flexbox utilities mmoa so .

Kyerɛw kuw no asɛmti
Nnafua 3 a atwam ni

Nsɛm bi a ɛwɔ nkyekyɛm bi mu a wɔde besi hɔ.

Na nsɛm nketenkete bi nso.
Kyerɛw kuw no asɛmti
Nnafua 3 a atwam ni

Nsɛm bi a ɛwɔ nkyekyɛm bi mu a wɔde besi hɔ.

Na ebinom nso yɛɛ mum nkyerɛwee nketewa.
Kyerɛw kuw no asɛmti
Nnafua 3 a atwam ni

Nsɛm bi a ɛwɔ nkyekyɛm bi mu a wɔde besi hɔ.

Na ebinom nso yɛɛ mum nkyerɛwee nketewa.
html na ɛwɔ hɔ 
<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>

Nnaka a wɔde hyɛ mu ne radio ahorow

Fa Bootstrap no checkboxes ne radio ahorow no gu list group nneɛma mu na yɛ sɛnea ɛho hia. Wubetumi de adi dwuma a <label>s nka ho, nanso yɛsrɛ wo kae sɛ wode aria-labelsu ne bo bi bɛka ho ama kwan a wobɛfa so anya bi.

html na ɛwɔ hɔ 
<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>
html na ɛwɔ hɔ 
<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>

Wubetumi de adi dwuma .stretched-linkwɔ <label>s so ama list kuw ade no nyinaa ayɛ nea wotumi klik so.

html na ɛwɔ hɔ 
<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 a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren list akuw ahorow de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .list-groupma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no ​​da so ara boa, nso.

  --#{$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 nsakrae ahorow

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

Nneɛma a wɔde frafra

Wɔde di dwuma de ka bom ne $theme-colorssɛ wɔde bɛma nsɛm a ɛfa ho no mu nsakrae adesua ahorow no aba ma .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;
      }
    }
  }
}

Ɛpɔ

Loop a ɛma modifier classes no ne list-group-item-variant()mixin no.

// 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 nneyɛe

Fa tab JavaScript plugin no di dwuma—fa ka ho mmiako mmiako anaa fa bootstrap.jsfael a wɔaboaboa ano no so—na trɛw yɛn list kuw no mu ma yɛ tabbable panes a ɛwɔ mpɔtam hɔ nsɛm no mu.

Ebinom placeholder nsɛm wɔ nkyekyɛm bi a ɛfa "Fie" ho. Na ebinom bio nsɛm, a wɔde di dwuma wɔ ha kɛkɛ sɛ pad out na ahyɛ tab panel yi ma. Wɔ production mu no, ɛda adi sɛ anka wubenya nsɛm ankasa pii wɔ ha. Na ɛnyɛ text kɛkɛ. Ebetumi ayɛ biribiara, ampa. Nsɛm a wɔakyerɛw, mfonini ahorow, nkyerɛwde ahorow.

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>

Data su ahorow a wɔde bedi dwuma

data-bs-toggle="list"Wubetumi ama list group navigation ayɛ adwuma a worenkyerɛw JavaScript biara denam element bi a wobɛkyerɛ kɛkɛ anaasɛ wobɛda so. Fa saa data su ahorow yi di dwuma wɔ .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>

Ɛdenam JavaScript so

Ma tabbable list item no nyɛ adwuma denam JavaScript so (ɛsɛ sɛ wode list item biara yɛ adwuma mmiako mmiako):

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

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

Wubetumi ama ankorankoro list item no ayɛ adwuma wɔ akwan horow pii so:

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

Fade nkɛntɛnso

Sɛ wopɛ sɛ tabs panel no bɛyera a, fa ka .fadeemu biara ho .tab-pane. Ɛsɛ sɛ tab pane a edi kan no nso .showma nsɛm a edi kan no da adi.

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

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no ​​no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii .

Ɛma wo nsɛm no yɛ adwuma sɛ tab element.

Wubetumi de constructor no ayɛ tab instance, sɛ nhwɛso no:

const bsTab = new bootstrap.Tab('#myTab')
Ɔkwan Nkyerɛmu
dispose Ɔsɛe element bi tab no.
getInstance Static kwan a ɛma wo kwan ma wo nya tab instance a ɛbata DOM element bi ho, wubetumi de adi dwuma sɛnea eyi te: bootstrap.Tab.getInstance(element).
getOrCreateInstance Static kwan a ɛsan de tab nhwɛsoɔ a ɛbata DOM element bi ho anaasɛ ɛbɔ foforɔ sɛ ɛba sɛ wɔanhyɛ aseɛ a. Wubetumi de adi dwuma sɛnea eyi te: bootstrap.Tab.getOrCreateInstance(element).
show Paw tab a wɔde ama no na ɛkyerɛ ne pane a ɛbata ho. Tab foforo biara a na wɔadi kan apaw no bɛyɛ nea wɔanpaw na ne pane a ɛbata ho no sie. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ tab pane no ankasa (kyerɛ sɛ ansa na shown.bs.tabasɛm no asi).

Nsɛm a esisi

Sɛ worekyerɛ tab foforo a, nsɛm a esisi no bɛtow nnidiso nnidiso a edidi so yi:

  1. hide.bs.tab(wɔ tab a ɛreyɛ adwuma mprempren no so)
  2. show.bs.tab(wɔ tab a wɔrebɛkyerɛ no so)
  3. hidden.bs.tab(wɔ active tab a atwam no so no, nea ɛwɔ hide.bs.tabadeyɛ no ho no ara)
  4. shown.bs.tab(wɔ tab a wɔakyerɛ seesei ara a ɛyɛ adwuma foforo no so no, nea ɛwɔ show.bs.tabadeyɛ no ho no ara)

Sɛ na tab biara nni hɔ a ɛyɛ adwuma dedaw a, ɛnde wɔrentow hide.bs.tabne hidden.bs.tabnsɛm a esisi no.

Adeyɛ no su Nkyerɛmu
hide.bs.tab Saa adeyɛ yi tow bere a ɛsɛ sɛ wɔkyerɛ tab foforo (na ɛnam saa kwan yi so no ɛsɛ sɛ wɔde tab a ɛyɛ adwuma a atwam no sie). Fa event.targetne di dwuma event.relatedTargetfa w’ani si tab a ɛreyɛ adwuma mprempren ne tab foforo a ɛrenkyɛ na ɛreyɛ adwuma no so, sɛnea ɛte biara.
hidden.bs.tab Saa adeyɛ yi tow bere a wɔakyerɛ tab foforo akyi (na ɛnam saa kwan yi so no wɔde tab a ɛyɛ adwuma a atwam no asie). Fa event.targetne di dwuma event.relatedTargetfa w’ani si tab a ɛreyɛ adwuma a atwam no ne tab a ɛreyɛ adwuma foforo no so, sɛnea ɛte biara.
show.bs.tab Saa adeyɛ yi tow wɔ tab show so, nanso ansa na wɔakyerɛ tab foforo no. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara.
shown.bs.tab Saa adeyɛ yi tow wɔ tab show so bere a wɔakyerɛ tab bi akyi. Fa event.targetne di dwuma event.relatedTargetfa w’ani si active tab ne active tab a atwam no so (sɛ ɛwɔ hɔ a) sɛnea ɛte biara. 
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
  })
})