Source

Ilista ang grupo

Ang mga grupo sa lista usa ka flexible ug kusgan nga sangkap alang sa pagpakita sa usa ka serye sa sulud. Usba ug i-extend kini aron masuportahan ang bisan unsang sulud sa sulod.

Panguna nga pananglitan

Ang labing sukaranan nga grupo sa lista mao ang usa ka dili han-ay nga lista nga adunay mga butang sa lista ug ang tukma nga mga klase. Pagtukod niini uban sa mga kapilian nga nagsunod, o sa imong kaugalingon nga CSS kung gikinahanglan.

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

Aktibo nga mga butang

Idugang .activesa a .list-group-itemaron ipakita ang kasamtangan nga aktibo nga pagpili.

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

Mga butang nga nabaldado

Idugang .disabledsa usa .list-group-itemaron kini makita nga disabled. Timan-i nga ang pipila ka mga elemento nga adunay .disabledkinahanglan usab nga naandan nga JavaScript aron hingpit nga ma-disable ang ilang mga panghitabo sa pag-klik (pananglitan, mga link).

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

Mga link ug mga buton

Gamita <a>ang s o <button>s sa paghimo og aksyon nga listahan nga mga butang sa grupo nga adunay hover, disabled, ug aktibo nga estado pinaagi sa pagdugang .list-group-item-action. Among gilain kining mga pseudo-class aron maseguro nga ang mga grupo sa listahan nga hinimo sa dili interactive nga mga elemento (sama <li>sa s o <div>s) dili makahatag og click o tap affordance.

Siguroha nga dili gamiton ang mga standard nga .btnklase dinhi .

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

Uban <button>sa s, mahimo usab nimo gamiton ang disabledhiyas imbes nga .disabledklase. Ikasubo, <a>s wala mosuporta sa disabled attribute.

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

Flush

Idugang .list-group-flusharon tangtangon ang pipila ka mga utlanan ug mga lingin nga mga kanto aron ma-render ang mga butang sa lista sa grupo nga magkagidlay sa usa ka sudlanan sa ginikanan (pananglitan, mga kard).

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

Pahigda

Idugang .list-group-horizontalaron usbon ang layout sa listahan sa mga butang sa grupo gikan sa bertikal ngadto sa pinahigda sa tanang breakpoints. Sa laing bahin, pagpili og usa ka responsive nga variant .list-group-horizontal-{sm|md|lg|xl}aron paghimo sa usa ka listahan nga grupo nga pinahigda sugod sa breakpoint's min-width. Sa pagkakaron ang pinahigda nga listahan nga mga grupo dili mahimong ikombinar sa mga flush list nga mga grupo.

ProTip: Gusto sa parehas nga gilapdon nga mga butang sa lista sa grupo kung pinahigda? Idugang .flex-fillsa matag listahan nga butang sa grupo.

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

Mga klase sa konteksto

Gamita ang mga klase sa konteksto sa pag-istilo sa mga butang sa listahan nga adunay stateful nga background ug kolor.

Dapibus ac facilisis sa
Usa ka yano nga nag-unang butang nga lista sa grupo
Usa ka yano nga sekondaryang listahan sa grupo nga butang
Usa ka yano nga lista sa kalampusan nga butang sa grupo
Usa ka yano nga butang sa lista sa peligro nga grupo
Usa ka yano nga lista sa pasidaan nga butang sa grupo
Usa ka yano nga butang sa lista sa impormasyon nga grupo
Usa ka yano nga light list nga butang sa grupo
Usa ka yano nga mangitngit nga butang nga lista sa grupo

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

Ang mga klase sa konteksto nagtrabaho usab sa .list-group-item-action. Matikdi ang pagdugang sa mga estilo sa hover dinhi nga wala sa miaging pananglitan. Gisuportahan usab ang .activeestado; gamita kini aron ipakita ang usa ka aktibo nga pagpili sa usa ka butang sa grupo sa listahan sa konteksto.

Dapibus ac facilisis sa Usa ka yano nga nag-unang butang nga lista sa grupo Usa ka yano nga sekondaryang listahan sa grupo nga butang Usa ka yano nga lista sa kalampusan nga butang sa grupo Usa ka yano nga butang sa lista sa peligro nga grupo Usa ka yano nga lista sa pasidaan nga butang sa grupo Usa ka yano nga butang sa lista sa impormasyon nga grupo Usa ka yano nga light list nga butang sa grupo Usa ka yano nga mangitngit nga butang nga lista sa grupo

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

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .sr-onlyklase.

Uban sa mga badge

Idugang ang mga badge sa bisan unsang butang sa lista sa grupo aron ipakita ang wala pa mabasa nga mga ihap, kalihokan, ug uban pa sa tabang sa pipila ka mga utilities .

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

Custom nga sulod

Idugang ang halos bisan unsang HTML sa sulod, bisan sa mga grupo nga nalambigit sa listahan sama sa ubos, uban sa tabang sa flexbox utilities .

Ilista ang ulohan nga butang sa grupo

3 ka adlaw ang milabay

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

Donec id elit non mi porta.

Ilista ang ulohan nga butang sa grupo

3 ka adlaw ang milabay

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

Donec id elit non mi porta.

Ilista ang ulohan nga butang sa grupo

3 ka adlaw ang milabay

Donec id elit non mi porta gravida ug 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>

Panggawi sa JavaScript

Gamita ang tab nga JavaScript plugin—ilakip kini sa tagsa-tagsa o pinaagi sa gihugpong bootstrap.jsnga payl—aron i-extend ang among listahan nga grupo aron makahimo og tabable pane sa lokal nga content.

Balay Profile Mga mensahe Mga setting

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

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>

Paggamit sa mga hiyas sa datos

Mahimo nimong i-aktibo ang usa ka nabigasyon sa lista sa grupo nga wala nagsulat bisan unsang JavaScript pinaagi lamang sa pagpiho data-toggle="list"o sa usa ka elemento. Gamita kini nga mga hiyas sa datos sa .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>

Pinaagi sa JavaScript

I-enable ang tabbable list item pinaagi sa JavaScript (matag list item kinahanglan nga i-activate sa tagsa-tagsa):

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

Mahimo nimong ma-aktibo ang indibidwal nga butang sa lista sa daghang mga paagi:

$('#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

Pagkawala nga epekto

Aron mawala ang mga tab panel, idugang .fadeang matag .tab-pane. Ang una nga tab pane kinahanglan usab .shownga maghimo sa una nga sulud nga makita.

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

Pamaagi

$().tab

Nag-aktibo sa usa ka elemento sa lista nga butang ug sulud sa sulud. Ang tab kinahanglan adunay usa data-targeto usa ka hreftarget sa usa ka sudlanan nga node sa 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('ipakita')

Gipili ang gihatag nga butang sa lista ug gipakita ang kauban nga pane niini. Ang bisan unsang ubang butang sa lista nga napili kaniadto mahimong dili mapili ug ang kauban nga pane niini gitago. Mibalik sa nagtawag sa wala pa ipakita ang tab pane (pananglitan, sa wala pa shown.bs.tabmahitabo ang panghitabo).

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

Mga panghitabo

Kung nagpakita ug bag-ong tab, ang mga panghitabo mobuto sa mosunod nga han-ay:

hide.bs.tab(sa kasamtangan nga aktibo nga tab)
show.bs.tab(sa tab nga ipakita)
hidden.bs.tab(sa miaging aktibo nga tab, parehas sa alang sa hide.bs.tabpanghitabo)
shown.bs.tab(sa bag-ong-aktibo nga bag-o lang gipakita nga tab, parehas sa alang sa show.bs.tabpanghitabo)

Kung walay tab nga aktibo na, ang hide.bs.tabug ang hidden.bs.tabmga panghitabo dili ipabuto.

Uri sa panghitabo	Deskripsyon
show.bs.tab	Kini nga panghitabo nagdilaab sa tab show, apan sa wala pa ipakita ang bag-ong tab. Gamita `event.target`ug `event.relatedTarget`i-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
gipakita.bs.tab	Kini nga panghitabo nagdilaab sa tab show pagkahuman gipakita ang usa ka tab. Gamita `event.target`ug `event.relatedTarget`i-target ang aktibo nga tab ug ang miaging aktibo nga tab (kung naa) matag usa.
hide.bs.tab	Kini nga panghitabo mobuto kung ang usa ka bag-ong tab ipakita (ug sa ingon ang miaging aktibo nga tab kinahanglan itago). Gamita `event.target`ug `event.relatedTarget`i-target ang kasamtangan nga aktibo nga tab ug ang bag-o nga dili madugay nga mahimong aktibo nga tab, matag usa.
tago.bs.tab	Kini nga panghitabo nagdilaab human ang usa ka bag-ong tab gipakita (ug sa ingon ang miaging aktibo nga tab gitago). Gamita `event.target`ug `event.relatedTarget`i-target ang miaging aktibo nga tab ug ang bag-ong aktibo nga tab, matag usa.

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