Source

Listahan ng pangkat

Ang mga pangkat ng listahan ay isang nababaluktot at makapangyarihang bahagi para sa pagpapakita ng isang serye ng nilalaman. Baguhin at palawigin ang mga ito upang suportahan ang halos anumang nilalaman sa loob.

Pangunahing halimbawa

Ang pinakapangunahing pangkat ng listahan ay isang hindi nakaayos na listahan na may mga listahan ng mga item at mga wastong klase. Buuin ito gamit ang mga sumusunod na opsyon, o gamit ang iyong sariling CSS kung kinakailangan.

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

Mga aktibong item

Idagdag .activesa a .list-group-itemupang isaad ang kasalukuyang aktibong pagpili.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at 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 item na hindi pinagana

Idagdag .disabledsa isang .list-group-itempara magmukhang hindi pinagana. Tandaan na ang ilang elementong may .disableday mangangailangan din ng custom na JavaScript upang ganap na hindi paganahin ang kanilang mga kaganapan sa pag-click (hal, mga link).

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at 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 at mga pindutan

Gumamit ng <a>s o <button>s upang lumikha ng mga naaaksyunan na item ng pangkat ng listahan na may hover, naka-disable, at mga aktibong estado sa pamamagitan ng pagdaragdag ng .list-group-item-action. Pinaghihiwalay namin ang mga pseudo-class na ito upang matiyak na ang mga pangkat ng listahan na gawa sa mga hindi interactive na elemento (tulad ng mga <li>s o <div>s) ay hindi nagbibigay ng isang click o tap affordance.

Tiyaking hindi gagamitin ang mga karaniwang .btnklase dito .

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

Sa <button>s, maaari mo ring gamitin ang disabledkatangian sa halip na ang .disabledklase. Nakalulungkot, <a>hindi sinusuportahan ng s ang hindi pinaganang katangian.

<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

Idagdag .list-group-flushupang alisin ang ilang mga hangganan at mga bilugan na sulok upang i-render ang mga item ng listahan ng pangkat na magkatabi sa isang parent na lalagyan (hal, mga card).

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

Pahalang

Idagdag .list-group-horizontalupang baguhin ang layout ng mga item ng pangkat ng listahan mula patayo patungo sa pahalang sa lahat ng breakpoint. Bilang kahalili, pumili ng tumutugong variant .list-group-horizontal-{sm|md|lg|xl}upang gawing pahalang ang isang pangkat ng listahan simula sa breakpoint na iyon min-width. Sa kasalukuyan , ang mga pahalang na pangkat ng listahan ay hindi maaaring isama sa mga flush na pangkat ng listahan.

ProTip: Gusto ng pantay na lapad ng mga item ng pangkat ng listahan kapag pahalang? Idagdag .flex-fillsa bawat item sa listahan ng pangkat.

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

Gumamit ng mga kontekstwal na klase upang i-istilo ang mga item sa listahan na may stateful na background at kulay.

Dapibus ac facilisis in
Isang simpleng pangunahing item ng pangkat ng listahan
Isang simpleng pangalawang item ng pangkat ng listahan
Isang simpleng item ng pangkat ng listahan ng tagumpay
Isang simpleng item ng pangkat ng listahan ng panganib
Isang simpleng item ng pangkat ng listahan ng babala
Isang simpleng item ng pangkat ng listahan ng impormasyon
Isang simpleng light list group item
Isang simpleng item ng dark list group

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

Gumagana rin ang mga klase sa konteksto ng .list-group-item-action. Pansinin ang pagdaragdag ng mga istilo ng hover dito na wala sa nakaraang halimbawa. Sinusuportahan din ang .activeestado; ilapat ito upang ipahiwatig ang isang aktibong pagpili sa isang item ng pangkat ng listahan ng konteksto.

Dapibus ac facilisis in Isang simpleng pangunahing item ng pangkat ng listahan Isang simpleng pangalawang item ng pangkat ng listahan Isang simpleng item ng pangkat ng listahan ng tagumpay Isang simpleng item ng pangkat ng listahan ng panganib Isang simpleng item ng pangkat ng listahan ng babala Isang simpleng item ng pangkat ng listahan ng impormasyon Isang simpleng light list group item Isang simpleng item ng dark list group

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

Naghahatid ng kahulugan sa mga pantulong na teknolohiya

Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .sr-onlyklase.

May mga badge

Magdagdag ng mga badge sa anumang item sa listahan ng pangkat upang ipakita ang mga hindi pa nababasang bilang, aktibidad, at higit pa sa tulong ng ilang mga utility .

Cras justo odio14
Dapibus ac facilisis in2
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 na nilalaman

Magdagdag ng halos anumang HTML sa loob, kahit para sa mga naka-link na grupo ng listahan tulad ng nasa ibaba, sa tulong ng mga flexbox utilities .

Ilista ang heading ng item ng pangkat

3 araw ang nakalipas

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

Donec id elit non mi porta.

Ilista ang heading ng item ng pangkat

3 araw ang nakalipas

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

Donec id elit non mi porta.

Ilista ang heading ng item ng pangkat

3 araw ang nakalipas

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

Pag-uugali ng JavaScript

Gamitin ang plugin ng tab na JavaScript—isama ito nang isa-isa o sa pamamagitan ng pinagsama bootstrap.js-samang file—upang palawigin ang aming pangkat ng listahan upang lumikha ng mga tabable na pane ng lokal na nilalaman.

Bahay Profile Mga mensahe Mga setting

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugit tempor. Voluptate deserunt sit sunt nisi aliqua fugit proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim 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>

Paggamit ng mga katangian ng data

Maaari mong i-activate ang isang nabigasyon ng pangkat ng listahan nang hindi nagsusulat ng anumang JavaScript sa pamamagitan lamang ng pagtukoy data-toggle="list"o sa isang elemento. Gamitin ang mga katangian ng data na ito 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>

Sa pamamagitan ng JavaScript

Paganahin ang item sa listahan ng tabable sa pamamagitan ng JavaScript (kailangang isa-isang isaaktibo ang bawat item sa listahan):

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

Maaari mong i-activate ang indibidwal na item sa listahan sa maraming paraan:

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

Fade effect

Upang gawing fade in ang panel ng mga tab, idagdag .fadesa bawat isa .tab-pane. Ang unang tab pane ay dapat ding .showgawin ang unang nilalaman na nakikita.

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

Paraan

$().tab

Nag-a-activate ng elemento ng item sa listahan at lalagyan ng nilalaman. Ang tab ay dapat may alinman sa isang data-targeto isang pag- hreftarget ng isang container 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('show')

Pinipili ang ibinigay na item sa listahan at ipinapakita ang nauugnay na pane nito. Ang anumang iba pang item sa listahan na dati nang napili ay hindi mapipili at ang nauugnay na pane nito ay nakatago. Bumabalik sa tumatawag bago aktwal na naipakita ang tab pane (halimbawa, bago shown.bs.tabmangyari ang kaganapan).

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

Mga kaganapan

Kapag nagpapakita ng bagong tab, gagana ang mga kaganapan sa sumusunod na pagkakasunud-sunod:

hide.bs.tab(sa kasalukuyang aktibong tab)
show.bs.tab(sa ipapakitang tab)
hidden.bs.tab(sa nakaraang aktibong tab, kapareho ng para sa hide.bs.tabkaganapan)
shown.bs.tab(sa bagong-aktibong kakapakitang tab, kapareho ng para sa show.bs.tabkaganapan)

Kung wala pang tab na aktibo, ang hide.bs.tabat mga hidden.bs.tabkaganapan ay hindi papaganahin.

Uri ng kaganapan	Paglalarawan
show.bs.tab	Ang kaganapang ito ay gumagana sa palabas sa tab, ngunit bago ipakita ang bagong tab. Gamitin `event.target`at `event.relatedTarget`i-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit.
ipinapakita.bs.tab	Ang kaganapang ito ay gagana sa palabas sa tab pagkatapos maipakita ang isang tab. Gamitin `event.target`at `event.relatedTarget`i-target ang aktibong tab at ang nakaraang aktibong tab (kung magagamit) ayon sa pagkakabanggit.
hide.bs.tab	Ang kaganapang ito ay gagana kapag ang isang bagong tab ay ipapakita (at sa gayon ang nakaraang aktibong tab ay itatago). Gamitin `event.target`at `event.relatedTarget`i-target ang kasalukuyang aktibong tab at ang bagong tab na malapit nang maging aktibo, ayon sa pagkakabanggit.
hidden.bs.tab	Ang kaganapang ito ay gagana pagkatapos ipakita ang isang bagong tab (at sa gayon ang nakaraang aktibong tab ay nakatago). Gamitin `event.target`at `event.relatedTarget`i-target ang nakaraang aktibong tab at ang bagong aktibong tab, ayon sa pagkakabanggit.

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