Source

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.

  • Cras justo odio
  • Dapibus ac facilisis di
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum jeung 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 aktip

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

  • Cras justo odio
  • Dapibus ac facilisis di
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum jeung 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 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).

  • Cras justo odio
  • Dapibus ac facilisis di
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum jeung 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>

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 .

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

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

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

  • Cras justo odio
  • Dapibus ac facilisis di
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum jeung 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>

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.

  • Cras justo odio
  • Dapibus ac facilisis di
  • 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 di
  • 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 di
  • 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 di
  • 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 di
  • 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

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

  • Dapibus ac facilisis di
  • 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">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 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.

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

  • Cras justo odio14
  • Dapibus ac facilisis di2
  • 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>

eusi custom

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

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

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.

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

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

Ngaliwatan JavaScript

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

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

  1. hide.bs.tab(dina tab aktip ayeuna)
  2. show.bs.tab(dina tab anu bakal dipidangkeun)
  3. hidden.bs.tab(dina tab aktip saméméhna, sarua jeung pikeun hide.bs.tabacara)
  4. 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.targetsareng event.relatedTargetnargétkeun tab aktip sareng tab aktip sateuacana (upami sayogi).
ditémbongkeun.bs.tab Kajadian ieu hurung dina acara tab saatos tab dipintonkeun. Anggo event.targetsareng event.relatedTargetnargé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.targetsareng event.relatedTargetnargé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.targetsareng event.relatedTargetnargétkeun tab aktip sateuacana sareng tab aktip énggal, masing-masing.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})