Lembani gulu

Magulu amndandanda ndi gawo losinthika komanso lamphamvu powonetsa mndandanda wazinthu. Sinthani ndi kukulitsa kuti zithandizire chilichonse mkati.

Patsamba ili

Chitsanzo choyambirira

Gulu la mndandanda wofunikira kwambiri ndi mndandanda wosasankhidwa wokhala ndi mndandanda wazinthu ndi makalasi oyenera. Mangani pa izo ndi zosankha zomwe zikutsatira, kapena ndi CSS yanu ngati pakufunika.

Chinthu
Chinthu chachiwiri
Chinthu chachitatu
Chinthu chachinayi
Ndipo wachisanu

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>

Zinthu zogwira ntchito

Onjezani .activeku a .list-group-itemkuti muwonetse zomwe zasankhidwa.

Chinthu chogwira ntchito
Chinthu chachiwiri
Chinthu chachitatu
Chinthu chachinayi
Ndipo wachisanu

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>

Zinthu zolemala

Onjezani .disabledku a .list-group-itemkuti iwoneke ngati yoyimitsa. Dziwani kuti zinthu zina zomwe zili nazo .disabledzidzafunikanso JavaScript yokhazikika kuti izimitsa zochitika zawo zodina (mwachitsanzo, maulalo).

Chinthu cholemala
Chinthu chachiwiri
Chinthu chachitatu
Chinthu chachinayi
Ndipo wachisanu

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>

Maulalo ndi mabatani

Gwiritsani ntchito <a>s kapena <button>s kuti mupange mndandanda wazinthu zomwe zingachitike m'magulu okhala ndi ma hover, olemala, ndi omwe akugwira ntchito powonjezera .list-group-item-action. Timalekanitsa magulu abodzawa kuti tiwonetsetse kuti magulu opangidwa ndi zinthu zosalumikizana (monga <li>s kapena <div>s) sapereka kudina kapena kukwanitsa.

Onetsetsani kuti musagwiritse ntchito .btnmakalasi okhazikika apa .

Ulalo wapano Chinthu chachiwiri cholumikizira Chinthu chachitatu cholumikizira Chinthu chachinayi cholumikizira Ulalo woyimitsidwa

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>

Ndi <button>s, mutha kugwiritsanso ntchito mawonekedwe disabledm'malo mwa .disabledkalasi. Zachisoni, <a>s sizigwirizana ndi zomwe olumala.

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

Onjezani .list-group-flushkuti muchotse malire ndi ngodya zozungulira kuti mupereke mndandanda wazinthu zamagulu m'mphepete mwa chidebe cha makolo (mwachitsanzo, makadi).

Chinthu
Chinthu chachiwiri
Chinthu chachitatu
Chinthu chachinayi
Ndipo wachisanu

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>

Nambala

Onjezani gulu la .list-group-numberedzosintha (ndipo mwasankha gwiritsani ntchito <ol>chinthu) kuti musankhe mndandanda wazinthu zamagulu. Manambala amapangidwa kudzera pa CSS (kusiyana ndi <ol>masitayilo a msakatuli osasintha) kuti akhazikike bwino mkati mwazinthu zamagulu ndikulola kuti musinthe mwamakonda.

Manambala amapangidwa ndi counter-resetpa <ol>, kenako amasinthidwa ndikuyikidwa ndi chinthu ::beforechabodza pa <li>ndi counter-incrementndi content.

Mndandanda wazinthu
Mndandanda wazinthu
Mndandanda wazinthu

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>

Izi zimagwiranso ntchito bwino ndi zomwe mumakonda.

Mutu waung'ono
Zomwe zili pamndandanda
14
Mutu waung'ono
Zomwe zili pamndandanda
14
Mutu waung'ono
Zomwe zili pamndandanda
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>

Chopingasa

Onjezani .list-group-horizontalkuti musinthe masanjidwe a mndandanda wazinthu zamagulu kuchokera kumayendedwe mpaka opingasa pamagawo onse. Kapenanso, sankhani mtundu wotsatira .list-group-horizontal-{sm|md|lg|xl|xxl}kuti gulu la mndandanda likhale lopingasa kuyambira pa breakpoint's min-width. Panopa magulu a mndandanda wopingasa sangathe kuphatikizidwa ndi magulu a mndandanda wa flush.

ProTip: Mukufuna mndandanda wamagulu amtundu wofanana mukakhala yopingasa? Onjezani .flex-fillku gulu lililonse la gulu.

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

Chinthu
Chinthu chachiwiri
Chinthu chachitatu

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>

Maphunziro a Contextual

Gwiritsani ntchito makalasi amndandanda kuti musinthe zinthu zomwe zili ndi mbiri yabwino komanso mtundu.

Chinthu chosavuta cha mndandanda wamagulu
Chinthu chosavuta chamagulu agulu
Chinthu chosavuta cha gulu lachiwiri
Chinthu chosavuta cha mndandanda wamagulu
Gulu losavuta la mndandanda wazowopsa
Gulu losavuta la mndandanda wazinthu
Chidziwitso chosavuta cha gulu lazinthu
Gulu losavuta la mndandanda wazinthu
Chinthu chosavuta cha gulu lakuda

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>

Maphunziro a Contextual amagwiranso ntchito ndi .list-group-item-action. Zindikirani kuwonjezera kwa masitaelo a hover pano omwe sakupezeka mu chitsanzo chapitacho. Komanso kuthandizidwa ndi .activeboma; igwiritseni ntchito kusonyeza kusankha komwe kukuchitika pagulu lachinthu.

Chinthu chosavuta cha mndandanda wamagulu Chinthu chosavuta chamagulu agulu Chinthu chosavuta cha gulu lachiwiri Chinthu chosavuta cha mndandanda wamagulu Gulu losavuta la mndandanda wazowopsa Gulu losavuta la mndandanda wazinthu Chidziwitso chosavuta cha gulu lazinthu Gulu losavuta la mndandanda wazinthu Chinthu chosavuta cha gulu lakuda

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>

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .visually-hiddenkalasi.

Ndi mabaji

Onjezani mabaji pagulu lililonse kuti muwonetse mawerengedwe osawerengeka, zochitika, ndi zina mothandizidwa ndi zina .

Mndandanda wazinthu14
Chinthu chachiwiri chamndandanda2
Mndandanda wachitatu1

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>

Zomwe zili mwamakonda

Onjezani pafupifupi ma HTML aliwonse mkati, ngakhale pamndandanda wamagulu olumikizidwa monga pansipa, mothandizidwa ndi flexbox utilities .

Lembani mutu wazinthu zamagulu

Masiku 3 apitawo

Zina zotengera malo mu ndime.

Ndipo zilembo zina zazing'ono.

Lembani mutu wazinthu zamagulu

Masiku 3 apitawo

Zina zotengera malo mu ndime.

Ndipo zilembo zazing'ono zosalankhula.

Lembani mutu wazinthu zamagulu

Masiku 3 apitawo

Zina zotengera malo mu ndime.

Ndipo zilembo zazing'ono zosalankhula.

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>

Mabokosi ndi mawailesi

Ikani mabokosi ndi ma wayilesi a Bootstrap pamndandanda wazinthu zamagulu ndikusintha momwe mungafunire. Mutha kuzigwiritsa ntchito popanda <label>s, koma chonde kumbukirani kuphatikizira mawonekedwe aria-labelndi mtengo wopezeka.

Bokosi loyamba
Bokosi loyang'ana lachiwiri
Bokosi lachitatu

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>

Wailesi yoyamba
Wailesi yachiwiri
Wailesi yachitatu

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>

Mutha kugwiritsa ntchito .stretched-linkpa <label>s kuti gulu lonse la gulu lidulidwe.

Bokosi loyamba
Bokosi loyang'ana lachiwiri
Bokosi lachitatu

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

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la njira yosinthira ya CSS ya Bootstrap, magulu amndandanda tsopano akugwiritsa ntchito zosintha za CSS zakumaloko .list-groupkuti apititse patsogolo makonda anthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

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

Zosintha za 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;

Zosakaniza

Amagwiritsidwa ntchito limodzi ndi $theme-colorskupanga makalasi osinthika a s .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;
      }
    }
  }
}

Lupu

Loop yomwe imapanga makalasi osintha ndi 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);
}

Makhalidwe a JavaScript

Gwiritsani ntchito pulogalamu yowonjezera ya JavaScript-iphatikizepo payekhapayekha kapena kudzera pa bootstrap.jsfayilo yophatikizidwa-kuti muwonjezere gulu lathu la mndandanda kuti mupange mapanelo azomwe zili m'deralo.

Kunyumba Mbiri Mauthenga Zokonda

Zina zosungira malo mu ndime yokhudzana ndi "Kunyumba". Ndi zina zambiri, zomwe zimagwiritsidwa ntchito pano kungowonjezera ndikudzaza gululi. Popanga, mwachiwonekere mungakhale ndi zenizeni zenizeni pano. Osati kulemba chabe. Izo zikhoza kukhala chirichonse, kwenikweni. Zolemba, zithunzi, mawonekedwe.

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>

Kugwiritsa ntchito mawonekedwe a data

Mutha kuyambitsa kusanja kwamagulu osalemba JavaScript pongotchula data-bs-toggle="list"kapena pa chinthu. Gwiritsani ntchito ma data awa pa .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>

Kudzera pa JavaScript

Yambitsani chinthu chamndandanda kudzera pa JavaScript (chinthu chilichonse pamndandanda chikuyenera kutsegulidwa pachokha):

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

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

Mutha kuyambitsa chinthu chamndandanda m'njira zingapo:

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

Kuzimiririka

Kuti ma tabo azitha kuzimiririka, onjezani .fadechilichonse .tab-pane. Gawo loyamba la tabu liyeneranso .showkupangitsa kuti zomwe zili zoyamba ziwonekere.

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

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

Imatsegula zomwe zili ngati tabu.

Mukhoza kupanga chitsanzo cha tabu ndi womanga, mwachitsanzo:

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

Njira	Kufotokozera
`dispose`	Iwononga tabu ya chinthu.
`getInstance`	Njira yosasunthika yomwe imakupatsani mwayi wopeza tabu yolumikizidwa ndi chinthu cha DOM, mutha kuyigwiritsa ntchito motere: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Njira yosasunthika yomwe imabweretsanso tabu yolumikizidwa ndi chinthu cha DOM kapena kupanga ina yatsopano ngati sichinayambike. Mutha kugwiritsa ntchito motere `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Imasankha tabu yomwe yapatsidwa ndikuwonetsa gawo lomwe likugwirizana nalo. Tabu ina iliyonse yomwe idasankhidwa kale imakhala yosasankhidwa ndipo gawo lomwe limalumikizidwa limabisika. Imabwereranso kwa woyimbayo tsamba la tabu lisanasonyezedwe (ie zisanachitike `shown.bs.tab`).

Zochitika

Mukawonetsa tabu yatsopano, zochitika zimayaka motere:

hide.bs.tab(pa tabu yomwe ikugwira ntchito pano)
show.bs.tab(pa tabu yomwe ikuyenera kuwonetsedwa)
hidden.bs.tab(pa tabu yogwira kale, yofanana ndi ya hide.bs.tabchochitikacho)
shown.bs.tab(pa tabu yomwe yangowonetsedwa kumene, yofanana ndi ya show.bs.tabchochitikacho)

Ngati palibe tabu yomwe idagwira kale, ndiye kuti hide.bs.tabndi hidden.bs.tabzochitika sizidzachotsedwa.

Mtundu wa chochitika	Kufotokozera
`hide.bs.tab`	Chochitikachi chimayaka pomwe tabu yatsopano iyenera kuwonetsedwa (ndipo chifukwa chake tabu yogwira kale iyenera kubisika). Gwiritsani ntchito `event.target`ndi `event.relatedTarget`kulunjika tabu yomwe ikugwira ntchito ndi tsamba latsopano lomwe lizigwira ntchito posachedwa, motsatana.
`hidden.bs.tab`	Chochitikachi chimayaka pambuyo poti tabu yatsopano yawonetsedwa (ndipo chifukwa chake tabu yogwira kale yabisika). Gwiritsani `event.target`ntchito `event.relatedTarget`ndikulunjika tabu yomwe idagwira kale ndi tabu yatsopano, motsatana.
`show.bs.tab`	Chochitikachi chikuyaka pa tabu chiwonetsero, koma tabu yatsopano isanasonyezedwe. Gwiritsani ntchito `event.target`ndikuwongolera `event.relatedTarget`tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
`shown.bs.tab`	Chochitika ichi chikuyaka pa tabu chiwonetsero pambuyo poti tabu yawonetsedwa. Gwiritsani ntchito `event.target`ndikuwongolera `event.relatedTarget`tabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.

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