Dhaptar klompok

Grup dhaptar minangka komponen sing fleksibel lan kuat kanggo nampilake seri konten. Ngowahi lan ngluwihi kanggo ndhukung meh wae isi ing.

Tuladha dhasar

Klompok dhaptar sing paling dhasar yaiku dhaptar tanpa urutan karo item dhaptar lan kelas sing cocog. Mbangun ing karo opsi sing tindakake, utawa karo CSS dhewe yen perlu.

Item
Item kapindho
Item katelu
Item kaping papat
Lan sing kaping lima

<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

Tambah .activemenyang a .list-group-itemkanggo nuduhake pilihan aktif saiki.

Item sing aktif
Item kapindho
Item katelu
Item kaping papat
Lan sing kaping lima

<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 dipatèni

Tambah .disabledmenyang a .list-group-itemsupaya katon dipatèni. Elinga yen sawetara unsur .disableduga mbutuhake JavaScript khusus kanggo mateni kabeh acara klik (contone, pranala).

A item dipatèni
Item kapindho
Item katelu
Item kaping papat
Lan sing kaping lima

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

Link lan tombol

Gunakake <a>s utawa <button>s kanggo nggawe item klompok dhaptar sing bisa ditindakake kanthi status hover, mateni, lan aktif kanthi nambahake .list-group-item-action. Kita misahake kelas pseudo iki kanggo mesthekake klompok dhaptar sing digawe saka unsur non-interaktif (kaya <li>s utawa <div>s) ora nyedhiyakake kemampuan klik utawa tunyuk.

Priksa manawa sampeyan ora nggunakake kelas standar ing .btnkene .

Item link saiki Item link kapindho Item link katelu Item link kaping papat A item link dipatèni

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

Kanthi <button>s, sampeyan uga bisa nggunakake disabledatribut tinimbang .disabledkelas. Susah, <a>s ora ndhukung atribut dipatèni.

<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

Tambah .list-group-flushkanggo mbusak sawetara wates lan sudhut dibunderaké kanggo nerjemahake dhaftar item klompok pinggiran-kanggo-pinggiran ing wadhah induk (contone, kertu).

Item
Item kapindho
Item katelu
Item kaping papat
Lan sing kaping lima

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

Horisontal

Tambah .list-group-horizontalkanggo ngganti tata letak item klompok dhaptar saka vertikal menyang horisontal ing kabeh breakpoints. Utawa, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl}kanggo nggawe grup dhaptar horisontal diwiwiti saka breakpoint kasebut min-width. Saiki grup dhaptar horisontal ora bisa digabung karo grup dhaptar siram.

ProTip: Pengin item grup dhaptar sing padha lebar nalika horisontal? Tambah .flex-fillmenyang saben item klompok dhaptar.

Item
Item kapindho
Item katelu

Item
Item kapindho
Item katelu

Item
Item kapindho
Item katelu

Item
Item kapindho
Item katelu

Item
Item kapindho
Item katelu

<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

Gunakake kelas kontekstual kanggo gaya item dhaptar kanthi latar mburi stateful lan werna.

Item klompok dhaptar standar sing prasaja
Item klompok dhaptar utama sing prasaja
Item klompok dhaptar sekunder sing prasaja
Item klompok dhaptar sukses sing prasaja
Item klompok dhaptar bebaya sing prasaja
Item klompok dhaptar bebaya sing prasaja
A item klompok dhaptar info prasaja
Item klompok dhaptar cahya sing prasaja
A item klompok dhaftar peteng prasaja

<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 uga bisa digunakake karo .list-group-item-action. Elinga tambahan gaya hover ing kene ora ana ing conto sadurunge. Uga didhukung yaiku .activenegara; aplikasi iku kanggo nunjukaké pilihan aktif ing item klompok dhaftar kontekstual.

Item klompok dhaptar standar sing prasaja Item klompok dhaptar utama sing prasaja Item klompok dhaptar sekunder sing prasaja Item klompok dhaptar sukses sing prasaja Item klompok dhaptar bebaya sing prasaja Item klompok dhaptar bebaya sing prasaja A item klompok dhaptar info prasaja Item klompok dhaptar cahya sing prasaja A item klompok dhaftar peteng prasaja

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

Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.

Kanthi lencana

Tambah lencana menyang item klompok dhaptar kanggo nuduhake jumlah sing durung diwaca, kegiatan, lan liya-liyane kanthi bantuan sawetara utilitas .

A item dhaptar14
Item dhaptar kapindho2
Item dhaptar katelu1

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

Konten khusus

Tambahake meh kabeh HTML ing, sanajan kanggo grup dhaptar sing disambung kaya ing ngisor iki, kanthi bantuan flexbox utilities .

Dhaptar judhul item klompok

3 dina kepungkur

Sawetara isi placeholder ing paragraf.

Lan sawetara print cilik.

Dhaptar judhul item klompok

3 dina kepungkur

Sawetara isi placeholder ing paragraf.

Lan sawetara print cilik bisu.

Dhaptar judhul item klompok

3 dina kepungkur

Sawetara isi placeholder ing paragraf.

Lan sawetara print cilik bisu.

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

Prilaku JavaScript

Gunakake plugin JavaScript tab-kalebu kanthi individu utawa liwat bootstrap.jsfile sing dikompilasi-kanggo nggedhekake grup dhaptar kita kanggo nggawe panel tabable isi lokal.

Ngarep Profile Pesen Setelan

Sawetara isi placeholder ing paragraf sing ana hubungane karo "Omah". Lan sawetara isi liyane, digunakake kene mung kanggo pad metu lan isi panel tab iki. Ing produksi, sampeyan bakal duwe konten sing luwih nyata ing kene. Lan ora mung teks. Bisa wae, tenan. Teks, gambar, formulir.

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>

Nggunakake atribut data

Sampeyan bisa ngaktifake pandhu arah klompok dhaptar tanpa nulis JavaScript kanthi mung nemtokake data-toggle="list"utawa ing unsur. Gunakake atribut data iki ing .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>

Liwat JavaScript

Aktifake item dhaptar tab liwat JavaScript (saben item dhaptar kudu diaktifake kanthi individu):

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

Sampeyan bisa ngaktifake item dhaptar individu kanthi sawetara 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

Efek luntur

Kanggo nggawe panel tab luntur, tambahake .fadesaben .tab-pane. Panel tab pisanan uga kudu .shownggawe konten awal katon.

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

Metode

$().tab

Ngaktifake unsur item dhaptar lan wadhah konten. Tab kudu duwe data-targetutawa hrefnargetake simpul wadhah ing 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')

Milih item dhaptar sing diwenehake lan nuduhake panel sing gegandhengan. Item dhaptar liyane sing sadurunge dipilih dadi ora dipilih lan panel sing gegandhengan didhelikake. Bali menyang panelpon sadurunge panel tab wis bener ditampilake (contone, sadurunge shown.bs.tabacara kedadeyan).

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

Acara

Nalika nuduhake tab anyar, acara kasebut murub kanthi urutan ing ngisor iki:

hide.bs.tab(ing tab aktif saiki)
show.bs.tab(ing tab sing bakal ditampilake)
hidden.bs.tab(ing tab aktif sadurunge, padha karo hide.bs.tabacara kasebut)
shown.bs.tab(ing tab sing mentas aktif ditampilake, padha karo show.bs.tabacara kasebut)

Yen ora ana tab sing wis aktif, acara hide.bs.tablan hidden.bs.tabora bakal dipecat.

Jenis acara	Katrangan
show.bs.tab	Acara iki murub ing tab show, nanging sadurunge tab anyar wis ditampilake. Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
ditampilake.bs.tab	Acara iki murub ing tab show sawise tab ditampilake. Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
hide.bs.tab	Acara iki murub nalika tab anyar bakal ditampilake (lan kanthi mangkono tab aktif sadurunge bakal didhelikake). Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif saiki lan tab anyar sing bakal aktif.
hidden.bs.tab	Acara iki murub sawise tab anyar ditampilake (lan kanthi mangkono tab aktif sadurunge didhelikake). Gunakake `event.target`lan `event.relatedTarget`kanggo target tab aktif sadurunge lan tab aktif anyar, mungguh.

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