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.

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

<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

<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

<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

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

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

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

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

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

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

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

<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

<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 .sr-onlykelas.

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

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-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.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <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>

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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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-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-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-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):

$('#myList a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Anda boleh mengaktifkan item senarai individu dalam beberapa cara:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third 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

$().tab

Mengaktifkan elemen item senarai dan bekas kandungan. Tab harus mempunyai sama ada data-targetatau hrefmenyasarkan nod bekas dalam DOM.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('show')

Memilih item senarai yang diberikan dan menunjukkan anak tetingkap yang berkaitan. Mana-mana item senarai lain yang dipilih sebelum ini menjadi tidak dipilih dan anak tetingkap yang berkaitan disembunyikan. Kembali kepada pemanggil sebelum anak tetingkap tab sebenarnya telah ditunjukkan (contohnya, sebelum shown.bs.tabperistiwa berlaku).

$('#someListItem').tab('show')

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, acara hide.bs.tabdan hidden.bs.tabtidak akan dicetuskan.

Jenis acara	Penerangan
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.
ditunjukkan.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.
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.

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})