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 .

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

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.

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

Daptar judul item grup
3 poé katukang

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

Donec id elit non mi porta.
Daptar judul item grup
3 poé katukang

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

Donec id elit non mi porta.
Daptar judul item grup
3 poé katukang

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

Donec id elit non 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>

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.

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>

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