in English

Daptar grup

Daptar grup mangrupakeun komponén fléksibel tur kuat pikeun mintonkeun runtuyan eusi. Robah sareng manjangkeunana pikeun ngadukung naon waé eusi anu aya.

conto dasar

Grup daptar paling dasar mangrupa daptar unordered kalawan daptar item jeung kelas ditangtoskeun. Ngawangun kana éta kalayan pilihan anu nuturkeun, atanapi nganggo CSS anjeun nyalira upami diperyogikeun.

Hiji barang
Barang kadua
Item katilu
Item kaopat
Sareng anu kalima

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

Tambahkeun .activeka a .list-group-itempikeun nunjukkeun pilihan aktip ayeuna.

Hiji item aktip
Barang kadua
Item katilu
Item kaopat
Sareng anu kalima

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

Tambahkeun .disabledka a .list-group-itemsangkan eta némbongan ditumpurkeun. Catet yén sababaraha elemen .disabledogé bakal meryogikeun JavaScript khusus pikeun nganonaktipkeun acara klikna (contona, tautan).

Hiji item ditumpurkeun
Barang kadua
Item katilu
Item kaopat
Sareng anu kalima

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

Tumbu sarta tombol

Anggo <a>s atanapi <button>s pikeun nyiptakeun item grup daptar anu tiasa dipilampah kalayan kaayaan hover, ditumpurkeun, sareng aktip ku cara nambahkeun .list-group-item-action. Urang misahkeun pseudo-kelas ieu pikeun mastikeun grup daptar dijieunna tina elemen non-interaktif (kawas <li>s atawa <div>s) teu nyadiakeun hiji klik atawa ketok affordance.

Pastikeun pikeun henteu nganggo kelas standar .btndi dieu .

Item link ayeuna Hiji item link kadua Hiji item link katilu Hiji item link kaopat Hiji item link ditumpurkeun

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

Kalayan <button>s, anjeun ogé tiasa ngamangpaatkeun disabledatribut tinimbang .disabledkelas. Sedih, <a>s teu ngarojong atribut ditumpurkeun.

<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

Tambahkeun .list-group-flushpikeun miceun sababaraha wates jeung juru rounded pikeun nyieun daptar item grup ujung-ka-ujung dina wadah indungna (misalna kartu).

Hiji barang
Barang kadua
Item katilu
Item kaopat
Sareng anu kalima

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

Horizontal

Tambahkeun .list-group-horizontalpikeun ngarobah tata perenah daptar item grup tina vertikal ka horizontal sakuliah sakabéh breakpoints. Alternatipna, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl}pikeun nyieun grup daptar horizontal dimimitian dina breakpoint éta min-width. Ayeuna grup daptar horizontal teu bisa digabungkeun jeung grup daptar siram.

ProTip: Hoyong item grup daptar lebar sarua nalika horizontal? Tambahkeun .flex-fillka unggal item grup daptar.

Hiji barang
Barang kadua
Item katilu

Hiji barang
Barang kadua
Item katilu

Hiji barang
Barang kadua
Item katilu

Hiji barang
Barang kadua
Item katilu

Hiji barang
Barang kadua
Item katilu

<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

Anggo kelas kontekstual pikeun ngagayakeun daptar barang kalayan latar sareng warna anu stateful.

Hiji item grup daptar standar basajan
Hiji item grup daptar primér basajan
Item grup daptar sekundér basajan
Hiji item grup daptar kasuksésan basajan
Hiji item grup bahaya basajan
Hiji daptar warning item group basajan
Hiji item grup daptar info basajan
Hiji item grup daptar lampu basajan
Hiji item grup daptar poék basajan

<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 ogé dianggo sareng .list-group-item-action. Catet tambahan gaya hover di dieu henteu aya dina conto sateuacana. Ogé dirojong nyaéta .activenagara; Larapkeunana pikeun nunjukkeun pilihan aktip dina item grup daptar kontekstual.

Hiji item grup daptar standar basajan Hiji item grup daptar primér basajan Item grup daptar sekundér basajan Hiji item grup daptar kasuksésan basajan Hiji item grup bahaya basajan Hiji daptar warning item group basajan Hiji item grup daptar info basajan Hiji item grup daptar lampu basajan Hiji item grup daptar poék basajan

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

Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .sr-onlykelas.

Kalawan badges

Tambihkeun lencana kana item grup daptar naon waé pikeun nunjukkeun jumlah anu henteu dibaca, kagiatan, sareng seueur deui kalayan bantosan sababaraha utilitas .

Hiji item daptar14
Hiji item daptar kadua2
Item daptar katilu1

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

eusi custom

Tambahkeun ampir sagala HTML dina, sanajan keur grup daptar numbu kawas hiji di handap, kalayan bantuan flexbox utiliti .

Daptar judul item grup

3 poé katukang

Sababaraha eusi pananda tempat dina paragraf.

Jeung sababaraha print leutik.

Daptar judul item grup

3 poé katukang

Sababaraha eusi pananda tempat dina paragraf.

Jeung sababaraha muted print leutik.

Daptar judul item grup

3 poé katukang

Sababaraha eusi pananda tempat dina paragraf.

Jeung sababaraha muted print leutik.

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

kabiasaan JavaScript

Anggo plugin tab JavaScript-kalebetkeun éta nyalira atanapi ngalangkungan bootstrap.jsfile anu disusun-pikeun manjangkeun grup daptar kami pikeun nyiptakeun panel tabable tina eusi lokal.

Imah Propil Talatah Setélan

Sababaraha eusi pananda tempat dina paragraf anu aya hubunganana sareng "Imah". Jeung sababaraha eusi deui, dipaké di dieu ngan pikeun Pad kaluar sarta eusian panel tab ieu. Dina produksi, anjeun écés bakal gaduh eusi langkung nyata di dieu. Jeung teu ngan téks. Bisa jadi nanaon, bener. Téks, 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>

Ngagunakeun atribut data

Anjeun tiasa ngaktipkeun navigasi grup daptar tanpa nulis JavaScript ku saukur nangtukeun data-toggle="list"atawa dina unsur. Paké atribut data ieu dina .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>

Ngaliwatan JavaScript

Aktipkeun item daptar tabbable via JavaScript (unggal daptar item kudu diaktipkeun individual):

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

Anjeun tiasa ngaktipkeun item daptar individu ku sababaraha 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

Pangaruh luntur

Pikeun nyieun panel tab luntur, tambahkeun .fadeka unggal .tab-pane. Panel tab munggaran ogé kedah .showngajantenkeun eusi awal katingali.

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

Métode

$().tab

Aktipkeun unsur daptar item sareng wadah eusi. Tab kedah gaduh data-targetatanapi hrefnargétkeun titik wadah dina 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 daptar anu dipasihkeun sareng nunjukkeun jandela anu aya hubunganana. Sakur item daptar sejenna nu saméméhna dipilih jadi teu dipilih jeung jandela pakait na disumputkeun. Mulih ka nu nelepon saméméh panel tab sabenerna geus ditémbongkeun (contona, saméméh shown.bs.tabacara lumangsung).

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

Kajadian

Nalika ningalikeun tab anyar, kajadian-kajadian hurung dina urutan ieu:

hide.bs.tab(dina tab aktip ayeuna)
show.bs.tab(dina tab anu bakal dipidangkeun)
hidden.bs.tab(dina tab aktip saméméhna, sarua jeung pikeun hide.bs.tabacara)
shown.bs.tab(dina tab anu nembé ditingalikeun, sami sareng show.bs.tabacara)

Upami teu aya tab anu parantos aktip, acara hide.bs.tabsareng hidden.bs.tabacara moal dipecat.

Jenis acara	Katerangan
show.bs.tab	Kajadian ieu hurung dina acara tab, tapi sateuacan tab anyar ditingalikeun. Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
ditémbongkeun.bs.tab	Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
hide.bs.tab	Kajadian ieu hurung nalika tab anyar bakal ditingalikeun (sahingga tab aktip saméméhna bakal disumputkeun). Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip anu ayeuna sareng tab anu énggal-énggal aktip, masing-masing.
disumputkeun.bs.tab	Kajadian ieu hurung saatos tab énggal ditampilkeun (sahingga tab aktip sateuacana disumputkeun). Anggo `event.target`sareng `event.relatedTarget`nargétkeun tab aktip sateuacana sareng tab aktip énggal, masing-masing.

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