Ndepụta otu

Otu ndepụta bụ ihe na-agbanwe agbanwe ma dị ike maka igosipụta usoro ọdịnaya. Gbanwee ma gbasaa ha iji kwado naanị ọdịnaya ọ bụla dị n'ime.

Na ibe a

Ihe atụ bụ isi

Otu ndepụta kachasị ewu ewu bụ ndepụta edeghị aha nke nwere ihe ndepụta yana klaasị kwesịrị ekwesị. Jiri nhọrọ ndị na-eso wulite ya, ma ọ bụ jiri CSS nke gị dị ka achọrọ.

Otu ihe
Ihe nke abụọ
Ihe nke atọ
Ihe nke anọ
Na nke ise

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>

Ihe na-arụ ọrụ

Tinye .activena a .list-group-itemiji gosi nhọrọ nọ n'ọrụ ugbu a.

Ihe na-arụ ọrụ
Ihe nke abụọ
Ihe nke atọ
Ihe nke anọ
Na nke ise

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>

Ihe ndị nwere nkwarụ

Tinye .disabledna a .list-group-itemka ọ yie enweghị nkwarụ. Rịba ama na ụfọdụ ihe nwere .disabledga-achọkwa Javascript omenala iji gbanyụọ mmemme ọpịpị ha (dịka ọmụmaatụ, njikọ).

Ihe nwere nkwarụ
Ihe nke abụọ
Ihe nke atọ
Ihe nke anọ
Na nke ise

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>

Njikọ na bọtịnụ

Jiri <a>s ma ọ bụ <button>s mepụta ndepụta otu ihe nwere ike ime ya na hover, nwere nkwarụ na steeti nọ n'ọrụ site na ịgbakwunye .list-group-item-action. Anyị na-ekewa klaasị pseudo ndị a iji hụ na otu ndepụta nke ihe anaghị emekọrịta ihe (dị ka <li>s ma ọ bụ <div>s) anaghị enye ohere ọpịpị ma ọ bụ kpatụ ego.

Jide n'aka na ị gaghị eji .btnklas ọkọlọtọ ebe a .

Ihe njikọ dị ugbu a Ihe njikọ nke abụọ Ihe njikọ nke atọ Ihe njikọ nke anọ Ihe njikọ nwere nkwarụ

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>

Na <button>s, ị nwekwara ike iji disablednjirimara kama .disabledklaasị. Ọ dị nwute, <a>s anaghị akwado njirimara nkwarụ.

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>

Ghichaa

Tinye .list-group-flushka iwepu ụfọdụ oke na nkuku gburugburu iji nye otu ihe ndepụta n'akụkụ ruo n'ọnụ n'ime akpa nne na nna (dịka ọmụmaatụ, kaadị).

Otu ihe
Ihe nke abụọ
Ihe nke atọ
Ihe nke anọ
Na nke ise

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>

Akpọrọ ọnụ

Tinye .list-group-numberedklaasị mgbanwe (ma jiri nhọrọ ma ọ bụrụ <ol>na ị họrọ) ịbanye n'ime ihe otu ndetu nwere nọmba. A na-ewepụta ọnụọgụgụ site na CSS (na-emegide ụdị <ol>nhazi ihe nchọgharị ndabere) maka ntinye ka mma n'ime ndepụta otu yana inye ohere maka nhazi nke ọma.

A na-emepụta ọnụọgụgụ site counter-resetna na <ol>, wee hazie ya ma tinye ya na ::beforepseudo-element na <li>ya counter-incrementna content.

Ihe ndepụta
Ihe ndepụta
Ihe ndepụta

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>

Ndị a na-arụkwa ọrụ nke ọma na ọdịnaya omenala.

Isi isiokwu
Ọdịnaya maka ihe ndepụta
14
Isi isiokwu
Ọdịnaya maka ihe ndepụta
14
Isi isiokwu
Ọdịnaya maka ihe ndepụta
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>

Kehoraizin

Tinye .list-group-horizontalka ịgbanwee okirikiri nhọrọ ukwuu nke ihe otu ndetu site na vetikal gaa na kehoraizin gafee ebe nkwụsịtụ niile. N'aka nke ọzọ, họrọ ụdị dị iche iche na-anabata .list-group-horizontal-{sm|md|lg|xl|xxl}iji mee ka otu ndepụta dị n'ahịrị malite na ebe nkwụsịtụ ahụ min-width. Ugbu a enweghị ike ijikọ otu ndepụta kewapụrụ na otu ndepụta mkpocha.

ProTip: Chọrọ ihe ndị otu ndepụta obosara nhata nhata mgbe ọ kwụ ọtọ? Tinye .flex-filln'ime ihe ndepụta nke ọ bụla.

Otu ihe
Ihe nke abụọ
Ihe nke atọ

Otu ihe
Ihe nke abụọ
Ihe nke atọ

Otu ihe
Ihe nke abụọ
Ihe nke atọ

Otu ihe
Ihe nke abụọ
Ihe nke atọ

Otu ihe
Ihe nke abụọ
Ihe nke atọ

Otu ihe
Ihe nke abụọ
Ihe nke atọ

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>

Klaasị ihe atụ

Jiri klaasị okirikiri mee ndepụta ihe ndị nwere nzụlite na agba mara mma.

Otu ihe ndepụta ndabara dị mfe
Otu ihe ndepụta izizi dị mfe
Otu ihe ndepụta nke abụọ dị mfe
Otu ihe ndepụta ihe ịga nke ọma dị mfe
Otu ihe ndepụta ihe egwu dị mfe
Otu ihe ndepụta ịdọ aka ná ntị dị mfe
Otu ihe ndepụta ozi dị mfe
Otu ihe ndepụta ọkụ dị mfe
Otu ihe ndepụta gbara ọchịchịrị dị mfe

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>

Klas Contextual na-arụkwa ọrụ na .list-group-item-action. Rịba ama mgbakwunye na ụdị hover ebe a adịghị na ihe atụ gara aga. Ihe na-akwadokwa bụ .activesteeti; tinye ya iji gosi nhọrọ na-arụ ọrụ n'ime ihe otu ndepụta okwu.

Otu ihe ndepụta ndabara dị mfe Otu ihe ndepụta izizi dị mfe Otu ihe ndepụta nke abụọ dị mfe Otu ihe ndepụta ihe ịga nke ọma dị mfe Otu ihe ndepụta ihe egwu dị mfe Otu ihe ndepụta ịdọ aka ná ntị dị mfe Otu ihe ndepụta ozi dị mfe Otu ihe ndepụta ọkụ dị mfe Otu ihe ndepụta gbara ọchịchịrị dị mfe

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>

Na-eme ka ọ pụta ìhè na teknụzụ enyemaka

Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .visually-hiddenklaasị.

Na baajị

Tinye baajị na ihe otu ndepụta ọ bụla iji gosi ọnụọgụgụ, mmemme na ndị ọzọ site n'enyemaka nke ụfọdụ ngwa .

Ihe ndepụta14
Ihe ndepụta nke abụọ2
Ihe ndepụta nke atọ1

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>

Ọdịnaya ahaziri ahazi

Tinye ihe fọrọ nke nta ka ọ bụrụ HTML ọ bụla n'ime, ọbụlagodi maka otu ndepụta ejikọtara dị ka nke dị n'okpuru, site na enyemaka nke flexbox utilities .

Depụta isiokwu isiokwu otu

Ụbọchị 3 gara aga

Ụfọdụ ọdịnaya edebe ebe dị na paragraf.

Na ụfọdụ obere mbipụta.

Depụta isiokwu isiokwu otu

Ụbọchị 3 gara aga

Ụfọdụ ọdịnaya edebe ebe dị na paragraf.

Ma ụfọdụ mechiri obere mbipụta.

Depụta isiokwu isiokwu otu

Ụbọchị 3 gara aga

Ụfọdụ ọdịnaya edebe ebe dị na paragraf.

Ma ụfọdụ mechiri obere mbipụta.

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>

Igbe nlele na redio

Debe igbe nlele na redio Bootstrap n'ime ndepụta otu ma hazie dịka achọrọ ya. Ị nwere ike iji ha na-enweghị <label>s, mana biko cheta itinye aria-labelàgwà na uru maka nnweta.

Igbe nrịbama nke mbụ
Igbe nrịbama nke abụọ
Igbe nrịbama nke atọ

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 mbụ
Redio nke abụọ
Redio nke atọ

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>

Ị nwere ike iji .stretched-linkna <label>s iji mee ka ihe niile dị n'otu listi pịa.

Igbe nrịbama nke mbụ
Igbe nrịbama nke abụọ
Igbe nrịbama nke atọ

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

Mgbanwe

Agbakwunyere na v5.2.0

Dịka akụkụ nke mgbanwe mgbanwe CSS nke Bootstrap, ndị otu ndepụta na-ejizi mgbanwe CSS mpaghara .list-groupmaka ịhazi nhazi oge. A na-edozi ụkpụrụ maka mgbanwe CSS site na Sass, yabụ ka na-akwado nhazi Sass, kwa.

  --#{$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 variables

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

Ngwakọta

Ejikọtara ya na $theme-colorsiwepụta klaasị dị iche iche maka .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 nke na-ewepụta klaasị modifier na 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);
}

Omume Javascript

Jiri ngwa mgbakwunye Javascript taabụ-gụnye ya n'otu n'otu ma ọ bụ site na bootstrap.jsfaịlụ ekpokọtara-iji gbasaa otu ndepụta anyị iji mepụta paịlị ọdịnaya mpaghara.

Ụlọ Profaịlụ Ozi Ntọala

Ụfọdụ ọdịnaya njide na paragraf metụtara "Ụlọ". Na ụfọdụ ọdịnaya ndị ọzọ, nke a na-eji ebe a naanị iji mejupụta panel tab a. Na mmepụta, o doro anya na ị ga-enwe ezigbo ọdịnaya ebe a. Ọ bụghịkwa naanị ederede. O nwere ike ịbụ ihe ọ bụla, n'ezie. Ederede, onyonyo, ụdị.

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>

Iji njirimara data

Ị nwere ike rụọ ọrụ igodo otu ndepụta na-edeghị Javascript ọ bụla site na ịkọwapụta data-bs-toggle="list"ma ọ bụ na mmewere. Jiri njirimara data ndị a na .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>

Site JavaScript

Kwado ihe ndepụta tabbable site na Javascript (ihe ndepụta ọ bụla kwesịrị ịgbalite n'otu n'otu):

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

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

Ị nwere ike ịgbalite ihe ndepụta onye ọ bụla n'ụzọ dị iche iche:

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

Mbelata mmetụta

Iji mee ka panel tabs daa, tinye .fadena nke ọ bụla .tab-pane. Iberibe taabụ nke mbụ ga-enwerịrịrịrị .showime ka a hụ ọdịnaya mbụ.

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

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka mmewere taabụ.

Ị nwere ike ịmepụta ihe atụ taabụ na onye nrụpụta, dịka ọmụmaatụ:

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

Usoro	Nkọwa
`dispose`	Na-emebi taabụ mmewere.
`getInstance`	Ụzọ kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ taabụ jikọtara ya na ihe DOM, ị nwere ike iji ya dị ka nke a: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Ụzọ kwụ ọtọ nke na-eweghachi ihe atụ taabụ jikọtara na ihe DOM ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya. Ị nwere ike iji ya dị ka nke a `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Na-ahọpụta taabụ enyere wee gosi pane metụtara ya. Taabụ ọ bụla ọzọ ahọpụtara na mbụ na-aghọ nke anaghị ahọpụtara yana pane ejikọtara ya na-ezo. Na-alaghachi na onye na-akpọ oku tupu egosiri pane taabụ n'ezie (ya bụ tupu `shown.bs.tab`mmemme emee).

Ihe omume

Mgbe ị na-egosi taabụ ọhụrụ, mmemme ahụ na-agba ọkụ n'usoro a:

hide.bs.tab(na taabụ na-arụ ọrụ ugbu a)
show.bs.tab(na taabụ a ga-egosi)
hidden.bs.tab(na taabụ arụ ọrụ gara aga, otu maka mmemme hide.bs.tabahụ)
shown.bs.tab(na taabụ egosiri ọhụrụ na-arụ ọrụ, otu maka mmemme show.bs.tabahụ)

Ọ bụrụ na ọ nweghị taabụ na-arụ ọrụ, mgbe ahụ, agaghị achụpụ ihe omume hide.bs.tabna mmemme.hidden.bs.tab

Ụdị mmemme	Nkọwa
`hide.bs.tab`	Ihe omume a na-agba ọkụ mgbe a ga-egosi taabụ ọhụrụ (ya mere a ga-ezobe taabụ arụ ọrụ gara aga). Jiri `event.target`na `event.relatedTarget`dobe taabụ na-arụ ọrụ ugbu a yana taabụ ọhụrụ ga-arụ ọrụ n'oge adịghị anya, n'otu n'otu.
`hidden.bs.tab`	Ihe omume a na-agba ọkụ ka egosiri taabụ ọhụrụ (ma yabụ na-ezobe taabụ arụ ọrụ gara aga). Jiri `event.target`ma `event.relatedTarget`dobe taabụ nọ n'ọrụ gara aga yana taabụ arụ ọrụ ọhụrụ, n'otu n'otu.
`show.bs.tab`	Ihe omume a na-agba ọkụ na ihe ngosi taabụ, mana tupu egosiri taabụ ọhụrụ. Jiri `event.target`ma `event.relatedTarget`tụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
`shown.bs.tab`	Ihe omume a na-agba ọkụ na ihe ngosi taabụ ka egosiri taabụ. Jiri `event.target`ma `event.relatedTarget`tụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.

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