in English

Garee tarreessi

Gareen tarree qabiyyee walduraa duubaan agarsiisuuf qaama jijjiiramaa fi humna qabuudha. Qabiyyee keessa jiru kamiyyuu jechuun ni danda'ama deeggaruuf fooyyessii fi dheeressi.

Fuula kana irratti

Fakkeenya bu’uuraa

Gareen tarree hunda caalaa bu'uuraa tarree hin tartiibamin wanta tarree fi gita sirrii ta'e qabudha. Filannoowwan itti aanan waliin, ykn akka barbaachisummaa isaatti CSS mataa keetiin irratti ijaari.

Meeshaa tokko
Wanti lammaffaan
Wanti sadaffaa
Qabxii afraffaan
Shanaffaa immoo

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>

Wantoota sochii qaban

Filannoo socho'aa ammaa agarsiisuuf gara .activeatti dabali ..list-group-item

Wanti socho'aa ta'e
Wanti lammaffaan
Wanti sadaffaa
Qabxii afraffaan
Shanaffaa immoo

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>

Wantoota hanqifaman

Akka hanqifameetti akka mul'atu.disabled gochuuf atti dabali . Hubadhu, elementoonni tokko tokko kan qaban taateewwan cuqaasuu isaanii guutummaatti hanqisuuf (fkn, hidhannoowwan) JaavaScript amala barbaadus ni barbaadu..list-group-item.disabled

Wanti hanqifame
Wanti lammaffaan
Wanti sadaffaa
Qabxii afraffaan
Shanaffaa immoo

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>

Hidhamtootaa fi buttooni

Wantoota garee tarree gochaan hojjetamuu danda'an kanneen haalata hover, hanqifame, fi socho'aa qaban dabaluudhaan uumuuf s <a>ykn s fayyadami . Gareen tarree elementoota wal-qunnamtii hin taane irraa hojjetaman (akka s ykn s) akka cuqaasuu ykn tuquu ga'umsa hin kennine mirkaneessuuf gita-sobaa kana addaan baasna.<button>.list-group-item-action<li><div>

Kutaawwan istaandaardii .btnasitti akka hin fayyadamne mirkaneessi .

Wanti hidhaa ammaa Wanti hidhaa lammaffaa Wanti hidhaa sadaffaa Wanti hidhaa afraffaan Wanti hidhaa hanqifame

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>

s waliin , akkasumas bakka gitaa amaloota <button>fayyadamuu dandeessa . Kan nama gaddisiisu, s amalli hanqifame hin deeggaran.disabled.disabled<a>

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>

Flush gochuu

.list-group-flushWantoota garee tarree qarqara irraa gara qarqaraatti qabduu warraa keessatti agarsiisuuf daangaawwan tokko tokkoo fi goleewwan geengoo ta'an haquuf dabali (fkn, kaardii).

Meeshaa tokko
Wanti lammaffaan
Wanti sadaffaa
Qabxii afraffaan
Shanaffaa immoo

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>

Lakkoofsa qabu

Wantoota garee tarree lakkoofsa qaban filachuuf gita fooyyessaa dabali .list-group-numbered(fi filannoodhaan qaama fayyadami ). <ol>Lakkoofsi karaa CSS (faallaa <ol>akkaataa biraawzari durtii s) wantoota garee tarree keessaa iddoo fooyya'aa fi dhuunfachiisaa fooyya'aa hayyamuuf uumamu.

Lakkoofsi , counter-resetirratti kan uumamu <ol>, sana booda akkaataa fi ::beforeelementii sobaa <li>waliin kan counter-incrementfi irratti kaa'amu content.

Wanti tarree tokko
Wanti tarree tokko
Wanti tarree tokko

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>

Isaan kun qabiyyee amala waliin akkasumas baayyee hojjetu.

Mata duree xiqqaa
Qabiyyee wanta tarreef
14.
Mata duree xiqqaa
Qabiyyee wanta tarreef
14.
Mata duree xiqqaa
Qabiyyee wanta tarreef
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>

Dalga-galii

.list-group-horizontalHaalata wanta garee tarree dhaabbataa irraa gara qajeelaa tuqaawwan cabbii hunda irratti jijjiiruuf dabali . Akka filannootti, garee tarree qajeelaa gochuuf garaagarummaa deebii kennuu filadhu .list-group-horizontal-{sm|md|lg|xl|xxl}qabxii cabbii sanaa irraa eegalee min-width. Yeroo ammaa gareewwan tarree qajeeloo gareewwan tarree flush waliin walitti makamuu hin danda'an.

ProTip: Wantoota garee tarree bal'ina walqixaa yeroo horizontal barbaaddaa? .flex-fillTokkoon tokkoo wanta garee tarree irratti dabali .

Meeshaa tokko
Wanti lammaffaan
Wanti sadaffaa

Meeshaa tokko
Wanti lammaffaan
Wanti sadaffaa

Meeshaa tokko
Wanti lammaffaan
Wanti sadaffaa

Meeshaa tokko
Wanti lammaffaan
Wanti sadaffaa

Meeshaa tokko
Wanti lammaffaan
Wanti sadaffaa

Meeshaa tokko
Wanti lammaffaan
Wanti sadaffaa

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>

Kutaalee haala dubbii (contextual classes).

Wantoota duubbee fi halluu haalata qaban tarreessuuf gitaalee yaadannoo fayyadami.

Wanti garee tarree durtii salphaa
Wanti garee tarree jalqabaa salphaa
Wanti garee tarree lammaffaa salphaa
Wanti garee tarree milkaa'ina salphaa
Wanti garee tarree balaa salphaa
Wanti garee tarree akeekkachiisaa salphaa
Wanti garee tarree info salphaa
Wanti garee tarree ifaa salphaa
Wanti garee tarree dukkanaa'aa salphaa

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>

Kutaawwan haala dubbii (contextual classes) waliinis ni hojjetu .list-group-item-action. Hubadhu dabalata akkaataawwan hover asitti fakkeenya duraa keessatti hin argamne. Akkasumas mootummaan deeggaramee .active; wanta garee tarree yaadannoo irratti filannoo socho'aa agarsiisuuf hojii irra oolchi.

Wanti garee tarree durtii salphaa Wanti garee tarree jalqabaa salphaa Wanti garee tarree lammaffaa salphaa Wanti garee tarree milkaa'ina salphaa Wanti garee tarree balaa salphaa Wanti garee tarree akeekkachiisaa salphaa Wanti garee tarree info salphaa Wanti garee tarree ifaa salphaa Wanti garee tarree dukkanaa'aa salphaa

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>

Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .visually-hiddengita waliin dhokatee.

Baajiiwwan waliin

Lakkoofsa hin dubbifamne, sochii, fi kanneen biroo gargaarsa faayidaa tokko tokkoon agarsiisuuf wanta garee tarree kamiyyuu irratti baajiiwwan dabali .

Wanti tarree tokko14.
Wanti tarree lammaffaa2. 2.
Wanti tarree sadaffaa1. 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>

Qabiyyee amala

HTML kamiyyuu jechuun ni danda'ama keessaa dabali, gareewwan tarree walitti hidhaman akka isa armaan gadiitiif illee, gargaarsa flexbox utilities tiin .

Mata duree wanta garee tarreessi

Guyyaa 3 dura

Qabiyyee iddoo tokko tokko keewwata tokko keessatti.

Akkasumas maxxansaa xixiqqoo tokko tokko.

Mata duree wanta garee tarreessi

Guyyaa 3 dura

Qabiyyee iddoo tokko tokko keewwata tokko keessatti.

Akkasumas tokko tokko qubee xixiqqoo callise.

Mata duree wanta garee tarreessi

Guyyaa 3 dura

Qabiyyee iddoo tokko tokko keewwata tokko keessatti.

Akkasumas tokko tokko qubee xixiqqoo callise.

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>

Sanduuqawwan filannoo fi raadiyoo

Sanduuqawwan filannoo fi raadiyoowwan Bootstrap wanta garee tarree keessa kaa'iitii akka barbaachisummaa isaatti dhuunfachiisi. s malee isaan fayyadamuu dandeessa , garuu maaloo dhaqqabummaaf amalootaa fi gatii <label>hammachuu yaadadhu .aria-label

Sanduuqa filannoo jalqabaa
Sanduuqa filannoo lammaffaa
Sanduuqa filannoo sadaffaa

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>

Raadiyoo jalqabaa
Raadiyoo lammaffaa
Raadiyoo sadaffaa

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>

Wanti garee tarree guutuu akka cuqaafamuu danda'u gochuuf s .stretched-linkirratti fayyadamuu dandeessa .<label>

Sanduuqa filannoo jalqabaa
Sanduuqa filannoo lammaffaa
Sanduuqa filannoo sadaffaa

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

Jijjiiramoota

v5.2.0 keessatti dabalameera

Akka qaama mala jijjiiramoota CSS guddachaa jiran Bootstrap, gareewwan tarree amma jijjiiramoota CSS naannoo irratti fayyadamu .list-groupdhuunfachiisa yeroo dhugaa fooyya'eef. Gatiin jijjiiramoota CSS karaa Sass qindaa'u, kanaafuu dhuunfachiisuun Sass ammallee ni deeggarama, akkasumas.

  --#{$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};

Jijjiiramoota Sass

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixins jedhaman

Gitoota garaagarummaa haalata s tiif $theme-colorsuumuuf waliin walqabatee fayyadama ..list-group-item

@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;
      }
    }
  }
}

Furgaasuu

Looppii gita fooyyessaa list-group-item-variant()mixin waliin uumu.

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

Amala JaavaScript

Caancala JaavaScript plugin fayyadami—dhuunfaadhaan ykn karaa faayilii qindaa'ee hammachiisi- bootstrap.jsgaree tarree keenya bal'isuuf foddaawwan caancala qabiyyee naannoo uumuuf.

Mana Ibsama Ergaawwan Sajoolee

Qabiyyee iddoo tokko tokko keewwata "Mana" wajjin walqabatu keessatti. Akkasumas qabiyyee dabalataa tokko tokko, asitti fayyadamnu qofa pad out fi paanaalii caancala kana guutuuf. Omisha keessatti, qabiyyee dhugaa caalaa asitti akka qabaattu ifaadha. Akkasumas barreeffama qofa miti. Waan fedhe ta'uu danda'a, dhuguma. Barreeffama, fakkiiwwan, unkaalee.

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>

Amaloota deetaa fayyadamuu

Salphaatti ifteessuudhaan data-bs-toggle="list"ykn elementii tokko irratti osoo JaavaScript kamiyyuu osoo hin barreessiin qajeelcha garee tarree kakaasuu dandeessa. Amaloota deetaa kana irratti fayyadami .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>

Karaa JaavaScript

Wanti tarree caancala karaa JaavaScript dandeessisi (tokkoon tokkoon wanta tarree dhuunfaan hojii irra oolchuu qaba):

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

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

Wanti tarree dhuunfaa karaa hedduudhaan hojii irra oolchuu dandeessa:

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 effect jedhamuun beekama

Qaaqa caancalaa akka keessaa bahu gochuuf, .fadetokkoon tokkootti dabali .tab-pane. Qaaqa caancala .showjalqabaa qabiyyee jalqabaa akka mul'atu gochuus qaba.

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

Malawwan

Malawwanii fi ce’umsawwan wal hin simne

Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .

Odeeffannoo dabalataaf galmee JaavaScript keenya ilaali .

Qabiyyee kee akka qaama caancalaatti hojii irra oolcha.

Ijaarsa waliin fakkeenya caancala uumuu dandeessa, fakkeenyaaf:

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

Mala	Ibsa
`dispose`	Caancala elementii tokkoo balleessa.
`getInstance`	Mala istaatiksii kan fakkeenya caancala qaama DOM wajjin walqabate argachuuf si dandeessisu, akkasitti fayyadamuu dandeessa: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Mala istaatiksii kan fakkeenya caancala qaama DOM waliin walqabate deebisu ykn yoo hin jalqabne haaraa uumuu. Akkasitti fayyadamuu dandeessa: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Caancala kenname filatee foddaa isaa walqabate agarsiisa. Caancalli biraa kamiyyuu kan duraan filatame hin filatamne ta'ee foddaan isaa walqabate dhokata. Osoo foddaan caancala qabatamaan hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis osoo `shown.bs.tab`taatee hin uumamin dura).

Taateewwan

Yeroo caancala haaraa agarsiisu, taateewwan tartiiba armaan gadiitiin dhukaasu:

hide.bs.tab(caancala amma socho'aa jiru irratti)
show.bs.tab(caancala agarsiifamu irratti)
hidden.bs.tab(caancala socho'aa duraa irratti, kan taatee sanaaf walfakkaatu hide.bs.tab)
shown.bs.tab(caancala haaraa-socho'aa reefuu agarsiifame irratti, kan show.bs.tabtaatee sanaaf walfakkaatu)

Yoo caancala duraan socho'aa hin turre, sana booda taateewwan hide.bs.tabfi hidden.bs.tabhin dhukaafaman.

Gosa taatee	Ibsa
`hide.bs.tab`	Taatee kun yeroo caancala haaraa agarsiifamuu qabutti dhukaasa (kanaanis caancala socho'aa duraanii dhokfamuu qaba). Caancala socho'aa ammaa fi caancala haaraa yeroo dhiyootti socho'u irratti xiyyeeffachuuf `event.target`fi fayyadami , akkaataa wal duraa duubaan.`event.relatedTarget`
`hidden.bs.tab`	Taatee kun erga caancala haaraa agarsiifamee booda dhukaasa (kanaanis caancala socho'aa duraanii dhokata). Caancala socho'aa duraa fi caancala socho'aa haaraa irratti xiyyeeffachuuf `event.target`fi fayyadami , akkaataa wal duraa duubaan.`event.relatedTarget`
`show.bs.tab`	Taatee kun agarsiisa caancalaa irratti dhukaasa, garuu osoo caancala haaraan hin agarsiifamiin dura. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf `event.target`fi fayyadami .`event.relatedTarget`
`shown.bs.tab`	Taatee kun agarsiisa caancala irratti erga caancala agarsiifamee booda dhukaasa. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf `event.target`fi fayyadami .`event.relatedTarget`

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