in English

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>

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 .

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

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

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

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

  1. hide.bs.tab(ing tab aktif saiki)
  2. show.bs.tab(ing tab sing bakal ditampilake)
  3. hidden.bs.tab(ing tab aktif sadurunge, padha karo hide.bs.tabacara kasebut)
  4. 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.targetlan event.relatedTargetkanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
ditampilake.bs.tab Acara iki murub ing tab show sawise tab ditampilake. Gunakake event.targetlan event.relatedTargetkanggo 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.targetlan event.relatedTargetkanggo 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.targetlan event.relatedTargetkanggo 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
})