Kundi la orodha

Vikundi vya orodha ni sehemu inayoweza kunyumbulika na yenye nguvu ya kuonyesha mfululizo wa maudhui. Zirekebishe na zipanue ili kusaidia takriban maudhui yoyote ndani.

Katika ukurasa huu

Mfano wa msingi

Kikundi cha orodha cha msingi zaidi ni orodha isiyo na mpangilio iliyo na vitu vya orodha na madarasa sahihi. Jenga juu yake na chaguo zinazofuata, au na CSS yako kama inahitajika.

Kipengee
Kipengee cha pili
Kipengee cha tatu
Kipengee cha nne
Na ya tano

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

Vipengee vinavyotumika

Ongeza .activekwa a .list-group-itemili kuonyesha uteuzi unaotumika sasa.

Kipengee kinachotumika
Kipengee cha pili
Kipengee cha tatu
Kipengee cha nne
Na ya tano

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

Vipengee vilivyozimwa

Ongeza .disabledkwa .list-group-itemili kuifanya ionekane kuwa imezimwa. Kumbuka kuwa vipengee vingine vilivyo na .disabledpia vitahitaji JavaScript maalum ili kuzima kabisa matukio yao ya kubofya (kwa mfano, viungo).

Kipengee kilichozimwa
Kipengee cha pili
Kipengee cha tatu
Kipengee cha nne
Na ya tano

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

Viungo na vifungo

Tumia <a>s au <button>s kuunda vipengee vya kikundi vinavyoweza kutekelezeka kwa hali ya kuelea, iliyozimwa, na amilifu kwa kuongeza .list-group-item-action. Tunatenganisha madarasa haya ya uwongo ili kuhakikisha vikundi vya orodha vilivyoundwa na vipengee visivyoingiliana (kama vile <li>s au <div>s) havitoi uwezo wa kubofya au kugusa.

Hakikisha hutumii madarasa ya kawaida .btnhapa .

Kipengee cha kiungo cha sasa Kipengee cha pili cha kiungo Kipengee cha tatu cha kiungo Kipengee cha nne cha kiungo Kipengee cha kiungo kilichozimwa

<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, unaweza pia kutumia disabledsifa badala ya .disableddarasa. Cha kusikitisha ni kwamba, <a>s haiungi mkono sifa ya walemavu.

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

Suuza

Ongeza .list-group-flushili kuondoa baadhi ya mipaka na pembe zilizoviringwa ili kutoa vipengee vya orodha ukingo-kwa-kingo katika kontena kuu (km, kadi).

Kipengee
Kipengee cha pili
Kipengee cha tatu
Kipengee cha nne
Na ya tano

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

Nambari

Ongeza .list-group-numbereddarasa la kirekebishaji (na kwa hiari tumia <ol>kipengee) kuchagua vipengee vya kikundi vilivyo na nambari. Nambari hutolewa kupitia CSS (kinyume na mtindo wa <ol>kivinjari chaguo-msingi) kwa uwekaji bora ndani ya vipengee vya kikundi na kuruhusu ubinafsishaji bora.

Nambari hutolewa na counter-resetkwenye <ol>, na kisha kutengenezwa kwa mtindo na kuwekwa na ::beforekipengele cha uwongo kwenye <li>with counter-incrementna content.

Kipengee cha orodha
Kipengee cha orodha
Kipengee cha orodha

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

Hizi hufanya kazi vizuri na yaliyomo maalum pia.

Kichwa kidogo
Maudhui ya kipengee cha orodha
14
Kichwa kidogo
Maudhui ya kipengee cha orodha
14
Kichwa kidogo
Maudhui ya kipengee cha orodha
14

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

Mlalo

Ongeza .list-group-horizontalili kubadilisha mpangilio wa orodha ya vipengee vya kikundi kutoka wima hadi mlalo katika sehemu zote za kukatisha. Vinginevyo, chagua lahaja jibu .list-group-horizontal-{sm|md|lg|xl|xxl}ili kufanya kikundi cha orodha kiwe mlalo kuanzia kwenye sehemu hiyo ya kuvunja min-width. Kwa sasa vikundi vya orodha za mlalo haviwezi kuunganishwa na vikundi vya orodha ya safisha.

ProTip: Je, unataka vipengee vya kikundi vya upana wa usawa vikiwa mlalo? Ongeza .flex-fillkwa kila kipengee cha kikundi cha orodha.

Kipengee
Kipengee cha pili
Kipengee cha tatu

Kipengee
Kipengee cha pili
Kipengee cha tatu

Kipengee
Kipengee cha pili
Kipengee cha tatu

Kipengee
Kipengee cha pili
Kipengee cha tatu

Kipengee
Kipengee cha pili
Kipengee cha tatu

Kipengee
Kipengee cha pili
Kipengee cha tatu

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

Madarasa ya muktadha

Tumia madarasa ya muktadha ili kuunda vipengee vya orodha vilivyo na usuli na rangi maridadi.

Kipengee rahisi cha orodha chaguo-msingi cha kikundi
Kipengee rahisi cha orodha ya msingi
Kipengee rahisi cha kikundi cha sekondari
Kipengee rahisi cha orodha ya mafanikio
Kipengee rahisi cha orodha ya hatari
Kipengee rahisi cha orodha ya onyo
Kipengee rahisi cha orodha ya habari
Kipengee rahisi cha orodha ya mwanga
Kipengee rahisi cha kikundi cha orodha nyeusi

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

Madarasa ya muktadha pia hufanya kazi na .list-group-item-action. Kumbuka nyongeza ya mitindo ya kuelea hapa haipo katika mfano uliopita. Pia inaungwa mkono na .activeserikali; itumie ili kuonyesha uteuzi unaotumika kwenye kipengee cha kikundi cha muktadha.

Kipengee rahisi cha orodha chaguo-msingi cha kikundi Kipengee rahisi cha orodha ya msingi Kipengee rahisi cha kikundi cha sekondari Kipengee rahisi cha orodha ya mafanikio Kipengee rahisi cha orodha ya hatari Kipengee rahisi cha orodha ya onyo Kipengee rahisi cha orodha ya habari Kipengee rahisi cha orodha ya mwanga Kipengee rahisi cha kikundi cha orodha nyeusi

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

Kuwasilisha maana kwa teknolojia za usaidizi

Kutumia rangi ili kuongeza maana hutoa tu kielelezo cha kuona, ambacho hakitawasilishwa kwa watumiaji wa teknolojia saidizi - kama vile visoma skrini. Hakikisha kwamba maelezo yanayoashiriwa na rangi ni dhahiri kutoka kwa maudhui yenyewe (km maandishi yanayoonekana), au yanajumuishwa kupitia njia mbadala, kama vile maandishi ya ziada yaliyofichwa na .visually-hiddendarasa.

Na beji

Ongeza beji kwa bidhaa yoyote ya kikundi ili kuonyesha hesabu ambazo hazijasomwa, shughuli na zaidi kwa usaidizi wa baadhi ya huduma .

Kipengee cha orodha14
Kipengee cha orodha ya pili2
Kipengee cha orodha ya tatu1

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

Maudhui maalum

Ongeza karibu HTML yoyote ndani, hata kwa vikundi vya orodha vilivyounganishwa kama ilivyo hapa chini, kwa usaidizi wa huduma za flexbox .

Orodhesha kichwa cha kipengee cha kikundi

siku 3 zilizopita

Baadhi ya maudhui ya kishika nafasi katika aya.

Na nakala ndogo.

Orodhesha kichwa cha kipengee cha kikundi

siku 3 zilizopita

Baadhi ya maudhui ya kishika nafasi katika aya.

Na baadhi ya maandishi madogo yamenyamazishwa.

Orodhesha kichwa cha kipengee cha kikundi

siku 3 zilizopita

Baadhi ya maudhui ya kishika nafasi katika aya.

Na baadhi ya maandishi madogo yamenyamazishwa.

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

Visanduku vya kuteua na redio

Weka visanduku vya kuteua vya Bootstrap na redio ndani ya orodha ya vipengee vya kikundi na ubadilishe kukufaa inavyohitajika. Unaweza kuzitumia bila <label>s, lakini tafadhali kumbuka kujumuisha aria-labelsifa na thamani ya ufikivu.

Kisanduku cha kuteua cha kwanza
Kisanduku cha kuteua cha pili
Kisanduku cha kuteua cha tatu
Kisanduku cha kuteua cha nne
Kisanduku cha kuteua cha tano

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

Na kama unataka <label>s kama .list-group-itemkwa maeneo makubwa hit, unaweza kufanya hivyo, pia.

Kisanduku cha kuteua cha kwanza Kisanduku cha kuteua cha pili Kisanduku cha kuteua cha tatu Kisanduku cha kuteua cha nne Kisanduku cha kuteua cha tano

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Sass

Vigezo

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

Mchanganyiko

Inatumika pamoja na $theme-colorskutengeneza lahaja za muktadha za .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;
      }
    }
  }
}

Kitanzi

Kitanzi ambacho hutoa madarasa ya kurekebisha na list-group-item-variant()mchanganyiko.

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

Tabia ya JavaScript

Tumia kichupo cha programu-jalizi ya JavaScript—ijumuishe kibinafsi au kupitia faili iliyokusanywa bootstrap.js—ili kupanua kikundi chetu cha orodha ili kuunda vidirisha vya kichupo vya maudhui ya ndani.

Nyumbani Wasifu Ujumbe Mipangilio

Baadhi ya maudhui ya kishika nafasi katika aya inayohusiana na "Nyumbani". Na baadhi ya maudhui zaidi, yanayotumika hapa ili tu kuweka na kujaza kidirisha hiki cha kichupo. Katika uzalishaji, bila shaka ungekuwa na maudhui halisi zaidi hapa. Na sio maandishi tu. Inaweza kuwa chochote, kwa kweli. Nakala, picha, fomu.

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>

Kutumia sifa za data

Unaweza kuwezesha urambazaji wa kikundi cha orodha bila kuandika JavaScript yoyote kwa kubainisha tu data-bs-toggle="list"au kwa kipengele. Tumia sifa hizi za data kwenye .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>

Kupitia JavaScript

Washa kipengee cha orodha kinachoweza kutekelezeka kupitia JavaScript (kila kipengee cha orodha kinahitaji kuamilishwa kibinafsi):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Unaweza kuwezesha kipengee cha orodha kwa njia kadhaa:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Fifisha athari

Ili kufanya kidirisha cha vichupo kufifia, ongeza .fadekwa kila .tab-pane. Kidirisha cha kichupo cha kwanza lazima pia kiwe na .showmaudhui ya awali kuonekana.

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

Mbinu

constructor

Huwasha kipengele cha kipengee cha orodha na kontena ya maudhui. Kichupo kinapaswa kuwa na nodi ya chombo data-bs-targetau inayolenga kwenye DOM.href

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

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

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

onyesha

Huchagua kipengee cha orodha kilichotolewa na kuonyesha kidirisha chake kinachohusiana. Kipengee kingine chochote cha orodha ambacho kilichaguliwa hapo awali kitaacha kuchaguliwa na kidirisha chake kinachohusishwa hufichwa. Hurejesha kwa mpigaji kabla kidirisha cha kichupo hakijaonyeshwa (kwa mfano, kabla ya shown.bs.tabtukio kutokea).

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

tupa

Huharibu kichupo cha kipengele.

getInstance

Njia tuli ambayo hukuruhusu kupata mfano wa kichupo unaohusishwa na kipengee cha DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Njia tuli ambayo hukuruhusu kupata mfano wa kichupo unaohusishwa na kipengee cha DOM, au kuunda mpya ikiwa haikuanzishwa.

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Matukio

Wakati wa kuonyesha kichupo kipya, matukio huwaka kwa mpangilio ufuatao:

hide.bs.tab(kwenye kichupo kinachotumika sasa)
show.bs.tab(kwenye kichupo cha-kuonyeshwa)
hidden.bs.tab(kwenye kichupo amilifu kilichotangulia, sawa na cha hide.bs.tabtukio)
shown.bs.tab(kwenye kichupo kipya-kilichoonyeshwa, sawa na cha show.bs.tabtukio)

Ikiwa hakuna kichupo kilichokuwa tayari kinatumika, matukio hide.bs.tabna hidden.bs.tabmatukio hayatafutwa.

Aina ya tukio	Maelezo
`show.bs.tab`	Tukio hili linawaka kwenye onyesho la kichupo, lakini kabla ya kichupo kipya kuonyeshwa. Tumia `event.target`na `event.relatedTarget`kulenga kichupo amilifu na kichupo amilifu cha awali (kama kinapatikana) mtawalia.
`shown.bs.tab`	Tukio hili huwashwa kwenye onyesho la kichupo baada ya kichupo kuonyeshwa. Tumia `event.target`na `event.relatedTarget`kulenga kichupo amilifu na kichupo amilifu cha awali (kama kinapatikana) mtawalia.
`hide.bs.tab`	Tukio hili huwaka wakati kichupo kipya kitaonyeshwa (na kwa hivyo kichupo amilifu cha awali kitafichwa). Tumia `event.target`na `event.relatedTarget`kulenga kichupo kinachotumika sasa na kichupo kipya kitakachotumika hivi karibuni, mtawalia.
`hidden.bs.tab`	Tukio hili huwaka baada ya kichupo kipya kuonyeshwa (na kwa hivyo kichupo amilifu cha awali kimefichwa). Tumia `event.target`na `event.relatedTarget`kulenga kichupo amilifu cha awali na kichupo kipya kinachotumika, mtawalia.

var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}