in English

Senaraikan kumpulan

Kumpulan senarai ialah komponen yang fleksibel dan berkuasa untuk memaparkan satu siri kandungan. Ubah suai dan lanjutkan untuk menyokong hampir mana-mana kandungan di dalamnya.

Pada halaman ini

Contoh asas

Kumpulan senarai paling asas ialah senarai tidak tertib dengan item senarai dan kelas yang betul. Bina di atasnya dengan pilihan yang berikut, atau dengan CSS anda sendiri seperti yang diperlukan.

Barang
Item kedua
Item ketiga
Item keempat
Dan yang kelima

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>

Item aktif

Tambahkan .activepada a .list-group-itemuntuk menunjukkan pemilihan aktif semasa.

Item aktif
Item kedua
Item ketiga
Item keempat
Dan yang kelima

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>

Item yang dilumpuhkan

Tambahkan .disabledpada a .list-group-itemuntuk menjadikannya kelihatan dilumpuhkan. Ambil perhatian bahawa sesetengah elemen dengan .disabledjuga memerlukan JavaScript tersuai untuk melumpuhkan sepenuhnya peristiwa klik mereka (cth, pautan).

Item yang dilumpuhkan
Item kedua
Item ketiga
Item keempat
Dan yang kelima

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>

Pautan dan butang

Gunakan <a>s atau <button>s untuk membuat item kumpulan senarai boleh diambil tindakan dengan keadaan tuding, dilumpuhkan dan aktif dengan menambahkan .list-group-item-action. Kami memisahkan kelas pseudo ini untuk memastikan kumpulan senarai yang diperbuat daripada unsur tidak interaktif (seperti <li>s atau <div>s) tidak memberikan kemampuan klik atau ketik.

Pastikan anda tidak menggunakan kelas standard .btndi sini .

Item pautan semasa Item pautan kedua Item pautan ketiga Item pautan keempat Item pautan yang dilumpuhkan

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>

Dengan <button>s, anda juga boleh menggunakan disabledatribut dan bukannya .disabledkelas. Malangnya, <a>s tidak menyokong atribut yang dilumpuhkan.

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>

Siram

Tambahkan .list-group-flushuntuk mengalih keluar beberapa jidar dan bucu bulat untuk memaparkan item kumpulan senarai tepi ke tepi dalam bekas induk (cth, kad).

Barang
Item kedua
Item ketiga
Item keempat
Dan yang kelima

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>

Bernombor

Tambahkan .list-group-numberedkelas pengubah suai (dan gunakan <ol>elemen secara pilihan) untuk mengikut serta item kumpulan senarai bernombor. Nombor dijana melalui CSS (berbanding dengan <ol>penggayaan penyemak imbas lalai) untuk penempatan yang lebih baik di dalam item kumpulan senarai dan untuk membolehkan penyesuaian yang lebih baik.

Nombor dijana oleh counter-resetpada <ol>, dan kemudian digayakan dan diletakkan dengan ::beforeunsur pseudo pada <li>dengan counter-incrementdan content.

Item senarai
Item senarai
Item senarai

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>

Ini berfungsi hebat dengan kandungan tersuai juga.

Subtajuk
Kandungan untuk item senarai
14
Subtajuk
Kandungan untuk item senarai
14
Subtajuk
Kandungan untuk item senarai
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>

Mendatar

Tambahkan .list-group-horizontaluntuk menukar reka letak item kumpulan senarai daripada menegak kepada mendatar merentas semua titik putus. Sebagai alternatif, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl|xxl}untuk menjadikan kumpulan senarai mendatar bermula pada titik putus itu min-width. Pada masa ini kumpulan senarai mendatar tidak boleh digabungkan dengan kumpulan senarai siram.

ProTip: Inginkan item kumpulan senarai lebar yang sama apabila mendatar? Tambahkan .flex-fillpada setiap item kumpulan senarai.

Barang
Item kedua
Item ketiga

Barang
Item kedua
Item ketiga

Barang
Item kedua
Item ketiga

Barang
Item kedua
Item ketiga

Barang
Item kedua
Item ketiga

Barang
Item kedua
Item ketiga

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>

Kelas kontekstual

Gunakan kelas kontekstual untuk menggayakan item senarai dengan latar belakang dan warna stateful.

Item kumpulan senarai lalai yang mudah
Item kumpulan senarai utama yang mudah
Item kumpulan senarai sekunder yang mudah
Item kumpulan senarai kejayaan yang mudah
Item kumpulan senarai bahaya yang mudah
Item kumpulan senarai amaran yang mudah
Item kumpulan senarai maklumat mudah
Item kumpulan senarai ringan yang ringkas
Item kumpulan senarai gelap yang ringkas

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>

Kelas kontekstual juga berfungsi dengan .list-group-item-action. Perhatikan penambahan gaya tuding di sini tidak terdapat dalam contoh sebelumnya. Turut disokong ialah .activenegeri; gunakannya untuk menunjukkan pilihan aktif pada item kumpulan senarai kontekstual.

Item kumpulan senarai lalai yang mudah Item kumpulan senarai utama yang mudah Item kumpulan senarai sekunder yang mudah Item kumpulan senarai kejayaan yang mudah Item kumpulan senarai bahaya yang mudah Item kumpulan senarai amaran yang mudah Item kumpulan senarai maklumat mudah Item kumpulan senarai ringan yang ringkas Item kumpulan senarai gelap yang ringkas

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>

Menyampaikan makna kepada teknologi bantuan

Menggunakan warna untuk menambah makna hanya memberikan petunjuk visual, yang tidak akan disampaikan kepada pengguna teknologi bantuan - seperti pembaca skrin. Pastikan maklumat yang dilambangkan dengan warna sama ada jelas daripada kandungan itu sendiri (cth teks yang boleh dilihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang tersembunyi dengan .visually-hiddenkelas.

Dengan lencana

Tambahkan lencana pada mana-mana item kumpulan senarai untuk menunjukkan kiraan yang belum dibaca, aktiviti dan banyak lagi dengan bantuan beberapa utiliti .

Item senarai14
Item senarai kedua2
Item senarai ketiga1

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>

Kandungan tersuai

Tambahkan hampir mana-mana HTML dalam, walaupun untuk kumpulan senarai terpaut seperti di bawah, dengan bantuan utiliti flexbox .

Senaraikan tajuk item kumpulan

3 hari yang lepas

Beberapa kandungan pemegang tempat dalam perenggan.

Dan beberapa cetakan kecil.

Senaraikan tajuk item kumpulan

3 hari yang lepas

Beberapa kandungan pemegang tempat dalam perenggan.

Dan beberapa cetakan kecil yang diredamkan.

Senaraikan tajuk item kumpulan

3 hari yang lepas

Beberapa kandungan pemegang tempat dalam perenggan.

Dan beberapa cetakan kecil yang diredamkan.

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>

Kotak semak dan radio

Letakkan kotak pilihan dan radio Bootstrap dalam senarai item kumpulan dan sesuaikan mengikut keperluan. Anda boleh menggunakannya tanpa <label>s, tetapi sila ingat untuk memasukkan aria-labelatribut dan nilai untuk kebolehaksesan.

Kotak semak pertama
Kotak semak kedua
Kotak semak ketiga

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>

Radio pertama
Radio kedua
Radio ketiga

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>

Anda boleh menggunakan .stretched-linkpada <label>s untuk menjadikan keseluruhan item kumpulan senarai boleh diklik.

Kotak semak pertama
Kotak semak kedua
Kotak semak ketiga

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

Pembolehubah

Ditambah dalam v5.2.0

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang berkembang, kumpulan senarai kini menggunakan pembolehubah CSS tempatan .list-groupuntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

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

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

Campuran

Digunakan dalam kombinasi dengan $theme-colorsuntuk menjana kelas varian kontekstual untuk .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;
      }
    }
  }
}

gelung

Gelung yang menjana kelas pengubah suai dengan 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);
}

Tingkah laku JavaScript

Gunakan pemalam JavaScript tab—masukkannya secara individu atau melalui bootstrap.jsfail yang disusun—untuk memanjangkan kumpulan senarai kami untuk mencipta anak tetingkap tab kandungan tempatan.

Rumah Profil Mesej tetapan

Beberapa kandungan pemegang tempat dalam perenggan yang berkaitan dengan "Rumah". Dan beberapa lagi kandungan, digunakan di sini hanya untuk mengisi dan mengisi panel tab ini. Dalam pengeluaran, anda jelas akan mempunyai lebih banyak kandungan sebenar di sini. Dan bukan hanya teks. Ia boleh jadi apa sahaja, sungguh. Teks, imej, borang.

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>

Menggunakan atribut data

Anda boleh mengaktifkan navigasi kumpulan senarai tanpa menulis sebarang JavaScript dengan hanya menentukan data-bs-toggle="list"atau pada elemen. Gunakan atribut data ini pada .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>

Melalui JavaScript

Dayakan item senarai boleh tab melalui JavaScript (setiap item senarai perlu diaktifkan secara individu):

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

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

Anda boleh mengaktifkan item senarai individu dalam beberapa cara:

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

Kesan pudar

Untuk membuat panel tab menjadi pudar, tambahkan .fadepada setiap .tab-pane. Anak tetingkap tab pertama juga mesti perlu .showmembuat kandungan awal kelihatan.

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

Kaedah

Kaedah dan peralihan tak segerak

Semua kaedah API adalah tak segerak dan mulakan peralihan . Mereka kembali kepada pemanggil sebaik sahaja peralihan dimulakan tetapi sebelum ia tamat . Selain itu, panggilan kaedah pada komponen peralihan akan diabaikan .

Lihat dokumentasi JavaScript kami untuk mendapatkan maklumat lanjut .

Mengaktifkan kandungan anda sebagai elemen tab.

Anda boleh membuat contoh tab dengan pembina, contohnya:

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

Kaedah	Penerangan
`dispose`	Memusnahkan tab elemen.
`getInstance`	Kaedah statik yang membolehkan anda mendapatkan contoh tab yang dikaitkan dengan elemen DOM, anda boleh menggunakannya seperti ini: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Kaedah statik yang mengembalikan tika tab yang dikaitkan dengan elemen DOM atau mencipta yang baharu sekiranya ia tidak dimulakan. Anda boleh menggunakannya seperti ini: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Memilih tab yang diberikan dan menunjukkan anak tetingkap yang berkaitan. Mana-mana tab lain yang sebelum ini dipilih menjadi tidak dipilih dan anak tetingkap berkaitannya disembunyikan. Kembali kepada pemanggil sebelum anak tetingkap tab sebenarnya telah ditunjukkan (iaitu sebelum `shown.bs.tab`peristiwa berlaku).

Peristiwa

Apabila menunjukkan tab baharu, peristiwa berlaku dalam susunan berikut:

hide.bs.tab(pada tab aktif semasa)
show.bs.tab(pada tab yang akan ditunjukkan)
hidden.bs.tab(pada tab aktif sebelumnya, sama seperti untuk hide.bs.tabacara)
shown.bs.tab(pada tab yang baru aktif ditunjukkan, sama seperti untuk show.bs.tabacara itu)

Jika tiada tab sudah aktif, maka acara hide.bs.tabdan hidden.bs.tabtidak akan dicetuskan.

Jenis acara	Penerangan
`hide.bs.tab`	Peristiwa ini berlaku apabila tab baharu hendak ditunjukkan (dan oleh itu tab aktif sebelumnya akan disembunyikan). Gunakan `event.target`dan `event.relatedTarget`untuk menyasarkan tab aktif semasa dan tab baru yang akan aktif, masing-masing.
`hidden.bs.tab`	Peristiwa ini berlaku selepas tab baharu ditunjukkan (dan dengan itu tab aktif sebelumnya disembunyikan). Gunakan `event.target`dan `event.relatedTarget`untuk menyasarkan tab aktif sebelumnya dan tab aktif baharu, masing-masing.
`show.bs.tab`	Peristiwa ini berlaku pada rancangan tab, tetapi sebelum tab baharu dipaparkan. Gunakan `event.target`dan `event.relatedTarget`untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
`shown.bs.tab`	Peristiwa ini berlaku pada rancangan tab selepas tab ditunjukkan. Gunakan `event.target`dan `event.relatedTarget`untuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.

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