Source

Senaraikan kumpulan

Kumpulan senarai ialah komponen yang fleksibel dan berkuasa untuk memaparkan satu siri kandungan. Ubah suai dan lanjutkan untuk menyokong hampir semua 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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum dan eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Item aktif

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum dan eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum dan eros
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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 .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum dan eros 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</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">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</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).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum dan eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Kelas kontekstual

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

  • Dapibus ac facilisis in
  • 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 ringkas
  • Item kumpulan senarai ringan yang ringkas
  • Item kumpulan senarai gelap yang ringkas
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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.

Dapibus ac facilisis in 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 ringkas 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">Dapibus ac facilisis in</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 .

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <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

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit bukan mi porta.
Senaraikan tajuk item kumpulan
3 hari yang lepas

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit bukan mi porta.
Senaraikan tajuk item kumpulan
3 hari yang lepas

Donec id elit non mi porta gravida and eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit bukan mi porta. 
<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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minimum tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugit aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

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

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

Melalui JavaScript

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

$('#myList a').on('click', function (e) {
  e.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:

  1. hide.bs.tab(pada tab aktif semasa)
  2. show.bs.tab(pada tab yang akan ditunjukkan)
  3. hidden.bs.tab(pada tab aktif sebelumnya, sama seperti untuk hide.bs.tabacara)
  4. 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.targetdan event.relatedTargetuntuk 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.targetdan event.relatedTargetuntuk menyasarkan tab aktif dan tab aktif sebelumnya (jika tersedia) masing-masing.
hide.bs.tab Peristiwa ini berlaku apabila tab baharu hendak ditunjukkan (dan dengan itu tab aktif sebelumnya akan disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk 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.targetdan event.relatedTargetuntuk menyasarkan tab aktif sebelumnya dan tab aktif baharu, masing-masing. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})