Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

Ŋlɔ ƒuƒoƒoa ɖi

List groups nye akpa si te ŋu trɔna bɔbɔe eye ŋusẽ le eŋu hena nyatakaka siwo kplɔ wo nɔewo ɖo ɖeɖefia. Trɔ asi le wo ŋu eye nàkeke wo ɖe enu be woado alɔ nyatakaka ɖesiaɖe kloe si le eme.

Le axa sia dzi

Kpɔɖeŋu vevi aɖe

xexlẽdzesiwo ƒe ƒuƒoƒo vevitɔ kekeakee nye xexlẽdzesi siwo womeɖo ɖe ɖoɖo nu o si me xexlẽdzesiwo ƒe nuawo kple klass siwo sɔ le. Tu ɖe edzi kple tiatia siwo kplɔe ɖo, alo kple wò ŋutɔ wò CSS ne ehiã.

  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
  • Nu enelia
  • Eye atɔ̃lia hã
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>

Nusiwo le dɔ wɔm

Tsɔ kpe .activeɖe a .list-group-itemŋu nàtsɔ afia tiatia si le dɔ wɔm fifia.

  • Nusi le dɔ wɔm
  • Nu evelia
  • Nu etɔ̃lia
  • Nu enelia
  • Eye atɔ̃lia hã
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>

Nu siwo wowɔ nuwɔametɔwoe

Tsɔ kpe .disabledɖe a .list-group-itemŋu be wòadze abe nuwɔametɔ ene. De dzesii be nu aɖewo siwo le .disabledhã abia JavaScript si wowɔ ɖe ɖoɖo nu be woawɔ woƒe nuƒoƒo ƒe nudzɔdzɔwo ŋudɔ bliboe (le kpɔɖeŋu me, kadodowo).

  • Nu si wowɔ nuwɔametɔe
  • Nu evelia
  • Nu etɔ̃lia
  • Nu enelia
  • Eye atɔ̃lia hã
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>

Zã <a>s alo <button>s nàtsɔ awɔ xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nusiwo ŋu woate ŋu awɔ dɔ le kple hover, disabled, kple active states to .list-group-item-action. Míeɖea pseudo-klass siawo ɖe vovo be míakpɔ egbɔ be xexlẽdzesi ƒuƒoƒo siwo wotsɔ nusiwo mewɔa dɔ o (abe <li>s alo <div>s ene) wɔ la mena click alo tap affordance o.

Kpɔ egbɔ be yemezã klass siwo wozãna ɖaa .btnle afisia o .

Kadodo ƒe nya si li fifia Kadodo ƒe nu evelia Kadodo ƒe nu etɔ̃lia Kadodo ƒe nya enelia Kadodo ƒe nu si wowɔ nuwɔametɔe
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>

Ne èzã <button>s la, àte ŋu azã disablednɔnɔmea hã ɖe .disabledklass la teƒe. Nublanuitɔe la, <a>s medoa alɔ nɔnɔme si nye nuwɔametɔ la o.

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>

Klɔe

Tsɔ kpe ɖe eŋu .list-group-flushbe nàɖe liƒo aɖewo kple dzogoe siwo le goglo la ɖa be nàɖe xexlẽdzesiwo ƒe ƒuƒoƒo me nuawo afia tso nugbɔ vaseɖe nugbɔ le dzila ƒe nugoe me (le kpɔɖeŋu me, kaɖiwo).

  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
  • Nu enelia
  • Eye atɔ̃lia hã
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>

Xexlẽdzesiwoe

Tsɔ .list-group-numberedtɔtrɔɖenu ƒe hatsotso kpe ɖe eŋu (eye ne èdi be yeazã <ol>element aɖe) be nàtiae ɖe xexlẽdzesiwo ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nuawo me. Wowɔa xexlẽdzesiwo to CSS dzi (si to vovo na <ol>s default browser styling) hena wo ɖoɖo nyuie wu ɖe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nuawo me eye be woaɖe mɔ na asitɔtrɔ nyuie wu.

Wowɔa xexlẽdzesiwo to counter-resetle <ol>, eye emegbe wowɔa atsyã eye wotsɔa ::beforepseudo-element dana ɖe <li>with counter-incrementkple content.

  1. Nusi woŋlɔ ɖe xexlẽdzesiwo me
  2. Nusi woŋlɔ ɖe xexlẽdzesiwo me
  3. Nusi woŋlɔ ɖe xexlẽdzesiwo me
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>

Esiawo wɔa dɔ nyuie kple custom content hã.

  1. Tanya sue aɖe
    Emenyawo na xexlẽdzesi ƒe nu
    14
  2. Tanya sue aɖe
    Emenyawo na xexlẽdzesi ƒe nu
    14
  3. Tanya sue aɖe
    Emenyawo na xexlẽdzesi ƒe nu
    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>

Si mlɔ anyi

Tsɔ kpe ɖe eŋu .list-group-horizontalbe nàtrɔ xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nuawo ƒe ɖoɖo tso tsitrenu yi tsitrenu le gbagbãƒewo katã dzi. Alo, tia tɔtrɔ si .list-group-horizontal-{sm|md|lg|xl|xxl}ɖoa nya ŋu be nàwɔ xexlẽdzesiwo ƒe ƒuƒoƒo si le tsia dzi adze egɔme tso breakpoint ma ƒe min-width. Fifia la , womateŋu aƒo xexlẽdzesiwo ƒe ƒuƒoƒo siwo le tsia dzi la nu ƒu kple xexlẽdzesiwo ƒe ƒuƒoƒo siwo le tsia dzi o.

ProTip: Àdi be yeakpɔ xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu siwo ƒe kekeme sɔ ne wole tsia dzi? Tsɔ .flex-fillƒuƒoƒo ƒe nu ɖesiaɖe kpe ɖe xexlẽdzesiawo ŋu.

  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
  • Nu aɖe
  • Nu evelia
  • Nu etɔ̃lia
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>

Klass siwo ku ɖe nya siwo ƒo xlãe ŋu

Zã nya siwo ƒo xlãe ƒe klasswo nàtsɔ awɔ atsyã ŋlɔ nusiwo ŋu nɔnɔme kple amadede le.

  • Nu bɔbɔe aɖe si woɖo ɖi le xexlẽdzesiwo me ƒe ƒuƒoƒo me nu
  • Nu bɔbɔe aɖe si woŋlɔ ɖe xexlẽdzesi gbãtɔ me ƒe ƒuƒoƒo me nu
  • Nu bɔbɔe aɖe si nye evelia ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu
  • Dzidzedzekpɔkpɔ ƒe xexlẽdzesi ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
  • Afɔkuwo ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
  • Nuxlɔ̃ame ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
  • A simple info list ƒuƒoƒo ƒe nu
  • Kekeli ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
  • Viviti me xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
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>

Nya siwo ƒo xlãe ƒe klasswo hã wɔa dɔ kple .list-group-item-action. De dzesi hover ƒe atsyã siwo wotsɔ kpe ɖe eŋu le afisia si mele kpɔɖeŋu si do ŋgɔ me o. Dukɔa hã doa alɔe .active; zãe nàtsɔ afia tiatia aɖe si le dɔ wɔm le nya siwo ƒo xlãe ƒe ƒuƒoƒo ƒe nya aɖe dzi.

Nu bɔbɔe aɖe si woɖo ɖi le xexlẽdzesiwo me ƒe ƒuƒoƒo me nu Nu bɔbɔe aɖe si woŋlɔ ɖe xexlẽdzesi gbãtɔ me ƒe ƒuƒoƒo me nu Nu bɔbɔe aɖe si nye evelia ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu Dzidzedzekpɔkpɔ ƒe xexlẽdzesi ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe Afɔkuwo ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe Nuxlɔ̃ame ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe A simple info list ƒuƒoƒo ƒe nu Kekeli ƒe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe Viviti me xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu bɔbɔe aɖe
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>
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .visually-hiddenklass la ene.

Kple akɔtagbalẽviwo

Tsɔ akɔtagbalẽviwo kpe ɖe xexlẽdzesiwo ƒe ƒuƒoƒo ƒe nu ɖesiaɖe ŋu be nàɖe xexlẽme siwo womexlẽ o, dɔwɔnawo, kple bubuwo afia to dɔwɔnu aɖewo ƒe kpekpeɖeŋu me .

  • Nusi woŋlɔ ɖe xexlẽdzesiwo me14
  • Nu evelia si woŋlɔ ɖi2.
  • Nu etɔ̃lia si woŋlɔ ɖi1.
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>

Nyatakaka siwo wowɔ ɖe ɖoɖo nu

Tsɔ HTML ɖesiaɖe kloe kpe ɖe eŋu le eme, na xexlẽdzesiwo ƒe ƒuƒoƒo siwo do ƒome kplii abe esi le ete ene gɔ̃ hã, to flexbox dɔwɔnuwo ƒe kpekpeɖeŋu me .

Ŋlɔ ƒuƒoƒoa ƒe nu ƒe tanya
Ŋkeke 3 enye sia

Teƒe aɖewo siwo le memamã aɖe me.

Eye nuŋɔŋlɔ sue aɖewo hã.
Ŋlɔ ƒuƒoƒoa ƒe nu ƒe tanya
Ŋkeke 3 enye sia

Teƒe aɖewo siwo le memamã aɖe me.

Eye nuŋɔŋlɔ sue aɖewo siwo me nyawo me mekɔna o.
Ŋlɔ ƒuƒoƒoa ƒe nu ƒe tanya
Ŋkeke 3 enye sia

Teƒe aɖewo siwo le memamã aɖe me.

Eye nuŋɔŋlɔ sue aɖewo siwo me nyawo me mekɔna o.
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>

Dzesiɖakawo kple radiowo

De Bootstrap ƒe dzesiɖakawo kple radiowo ɖe xexlẽdzesi ƒuƒoƒo ƒe nuawo me eye nàtrɔ asi le wo ŋu alesi wòhiãe. Àteŋu azã wo <label>s manɔmee, gake taflatse ɖo ŋku edzi be yeade aria-labelnɔnɔme kple asixɔxɔ aɖe eme na mɔnukpɔkpɔwo.

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

Àte ŋu azã .stretched-linkon <label>s atsɔ ana xexlẽdzesi bliboa ƒe ƒuƒoƒo ƒe nu la nate ŋu azi edzi.

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 ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Abe Bootstrap ƒe CSS tɔtrɔwo ƒe mɔnu si le tɔtrɔm ƒe akpa aɖe ene la, xexlẽdzesiwo ƒe ƒuƒoƒowo zãa teƒea ƒe CSS tɔtrɔwo le fifia .list-grouphena ɣeyiɣi ŋutɔŋutɔ ƒe tɔtrɔwɔwɔ si nyo ɖe edzi. Woɖo asixɔxɔwo na CSS ƒe tɔtrɔwo to Sass dzi, eyata Sass ƒe tɔtrɔwɔwɔ gakpɔtɔ doa alɔ, hã.

  --#{$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 ƒe tɔtrɔwo

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

Nusiwo wotsɔ tsakae

Wozãnɛ kpe ɖe eŋu $theme-colorsbe woawɔ contextual variant classes na .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;
      }
    }
  }
}

Xatsa

Loop si wɔa modifier classes kple 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 ƒe nuwɔna

Zã tab JavaScript plugin—de eme ɖekaɖeka alo to bootstrap.jsfaɛl si woƒo ƒu dzi—be nàkeke míaƒe xexlẽdzesiwo ƒe ƒuƒoƒoa ɖe enu be nàwɔ teƒea me nyatakakawo ƒe akpa siwo woate ŋu aƒo tab ɖo.

Teƒe aɖewo ƒe nyawo le memama aɖe si ku ɖe "Aƒe" ŋu me. Eye nya bubu aɖewo, wozã le afisia ko be woatsɔ aɖo tab panel sia me eye woayɔ tab panel sia me. Le ewɔwɔ me la, edze ƒã be nyatakaka ŋutɔŋutɔ geɖe wu anɔ asiwò le afisia. Eye menye nuŋɔŋlɔ ɖeɖeko o. Ate ŋu anye nusianu, le nyateƒe me. Nuŋɔŋlɔ, nɔnɔmetatawo, nɔnɔmetatawo.

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>

Nyatakaka ƒe nɔnɔmewo zazã

Àteŋu awɔ xexlẽdzesiwo ƒe ƒuƒoƒo ƒe mɔfiame ŋudɔ JavaScript aɖeke maŋlɔ to nya aɖe gbɔgblɔ data-bs-toggle="list"alo ɖe element aɖe dzi ko me. Zã nyatakaka ƒe nɔnɔme siawo le .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>

To JavaScript dzi

Na tabbable list item nawɔ dɔ to JavaScript dzi (ele be woawɔ list item ɖesiaɖe ŋudɔ ɖekaɖeka):

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

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

Àte ŋu awɔ xexlẽdzesi ɖekaɖeka ƒe nu ŋudɔ le mɔ vovovowo nu:

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 ƒe ŋusẽkpɔɖeamedzi

Be nàna tabs panel naɖiɖi la, tsɔe kpe .fadeɖe wo dometɔ ɖesiaɖe .tab-paneŋu . Ele be tab ƒe akpa gbãtɔ hã .shownana nya siwo le gɔmedzedzea me la nadze.

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

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

Kpɔ míaƒe JavaScript nuŋlɔɖiwo hena nyatakaka bubuwo .

Ewɔa wò nyatakakawo ŋudɔ abe tab ƒe akpa aɖe ene.

Àteŋu awɔ tab ƒe kpɔɖeŋu kple xɔtula, le kpɔɖeŋu me:

const bsTab = new bootstrap.Tab('#myTab')
Nuwɔmɔnu Nuɖᴐɖᴐ
dispose Egblẽa nu le element aɖe ƒe tab ŋu.
getInstance Static mɔnu si ɖea mɔ na wò be nàxɔ tab ƒe kpɔɖeŋu si do ƒome kple DOM element aɖe, àteŋu azãe ale: bootstrap.Tab.getInstance(element).
getOrCreateInstance Static mɔnu si trɔa tab ƒe kpɔɖeŋu si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale: bootstrap.Tab.getOrCreateInstance(element).
show Tia tab si wona eye wòaɖe eƒe akpa si do ƒome kplii afia. Tab bubu ɖesiaɖe si wotia va yi la va zua esi wometia o eye eƒe akpa si do ƒome kplii la ɣlana. Trɔ yi yɔla gbɔ hafi woɖe tab ƒe akpaa fia ŋutɔŋutɔ (si nye hafi shown.bs.tabnudzɔdzɔa nadzɔ).

Nudzɔdzɔwo

Ne èle tab yeye aɖe ɖem fia la, nudzɔdzɔawo dzona le ɖoɖo si gbɔna nu:

  1. hide.bs.tab(le tab si le dɔ wɔm fifia dzi)
  2. show.bs.tab(le tab si woaɖe afia la dzi)
  3. hidden.bs.tab(le tab si le dɔ wɔm va yi dzi la, esi le hide.bs.tabnudzɔdzɔa gome la ke)
  4. shown.bs.tab(le tab si woɖe fia teti koe nye ema si le dɔ wɔm yeyee la dzi la, esi sɔ kple esi wowɔ na show.bs.tabwɔnaa tɔ)

Ne tab aɖeke menɔ dɔ wɔm xoxo o la, ekema womaɖe asi le hide.bs.tabkple nudzɔdzɔawo ŋu o.hidden.bs.tab

Nudzɔdzɔ ƒomevi Nuɖᴐɖᴐ
hide.bs.tab Nudzɔdzɔ sia doa dzo ne woaɖe tab yeye aɖe afia (eye to esia me la, woaɣla tab si le dɔ wɔm va yi). Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm fifia kple tab yeye si awɔ dɔ kpuie la, ɖe wo nɔewo yome.
hidden.bs.tab Nudzɔdzɔ sia dzona ne woɖe tab yeye aɖe fia vɔ (eye to esia me la, woɣla tab si le dɔ wɔm va yi). Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm va yi kple tab yeye si le dɔ wɔm la, ɖe wo nɔewo yome.
show.bs.tab Nudzɔdzɔ sia dzona le tab show dzi, gake hafi woaɖe tab yeyea afia. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome.
shown.bs.tab Nudzɔdzɔ sia dzona le tab ɖeɖefia me ne woɖe tab aɖe fia vɔ. Zã event.targetkple event.relatedTargetnàtsɔ aɖo taɖodzinu na tab si le dɔ wɔm kple tab si le dɔ wɔm va yi (ne ele eme) ɖe wo nɔewo yome. 
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
  })
})