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.
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>
Idagdag .active
sa a .list-group-item
upang 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>
Idagdag .disabled
sa isang .list-group-item
para magmukhang hindi pinagana. Tandaan na ang ilang elemento na may .disabled
ay 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">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>
Gumamit ng <a>
s o <button>
s upang lumikha ng mga naaaksyunan na mga item ng pangkat ng listahan na may hover, naka-disable, at 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 .btn
klase dito .
<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">Vestibulum at eros</a>
</div>
Sa <button>
s, maaari mo ring gamitin ang disabled
katangian sa halip na ang .disabled
klase. 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>
Idagdag .list-group-flush
upang alisin ang ilang mga hangganan at mga bilugan na sulok upang mag-render ng mga item ng listahan ng pangkat na magkatabi sa isang lalagyan ng magulang (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>
Gumamit ng mga klase sa konteksto upang mag-istilo ng mga item sa listahan na may stateful na background at kulay.
- Dapibus ac facilisis in
- Ito ay isang pangunahing item ng pangkat ng listahan
- Ito ay isang pangalawang item ng pangkat ng listahan
- Isa itong item ng pangkat ng listahan ng tagumpay
- Isa itong danger list group item
- Isa itong babala sa pangkat na item
- Ito ay isang item ng pangkat ng listahan ng impormasyon
- Ito ay isang light list group item
- Ito ay isang madilim na listahan ng pangkat na item
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">This is a primary list group item</li>
<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
<li class="list-group-item list-group-item-success">This is a success list group item</li>
<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
<li class="list-group-item list-group-item-info">This is a info list group item</li>
<li class="list-group-item list-group-item-light">This is a light list group item</li>
<li class="list-group-item list-group-item-dark">This is a 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 .active
estado; ilapat ito upang ipahiwatig ang isang aktibong pagpili sa isang item ng pangkat ng listahan ng konteksto.
<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">This is a primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a 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-only
klase.
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>
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 nakalipasDonec 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 nakalipasDonec 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 nakalipasDonec 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 flex-column align-items-start 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 flex-column align-items-start">
<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 flex-column align-items-start">
<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>
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.
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
.
Paganahin ang item sa listahan ng tabable sa pamamagitan ng JavaScript (kailangang isa-isang isaaktibo ang bawat item sa listahan):
Maaari mong i-activate ang indibidwal na item sa listahan sa maraming paraan:
Upang gawing fade in ang panel ng mga tab, idagdag .fade
sa bawat isa .tab-pane
. Ang unang tab pane ay dapat ding .show
gawin ang unang nilalaman na nakikita.
Nag-a-activate ng elemento ng item sa listahan at lalagyan ng nilalaman. Ang tab ay dapat may alinman sa isang data-target
o isang pag- href
target ng isang container node sa DOM.
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.tab
mangyari ang 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 sahide.bs.tab
kaganapan)shown.bs.tab
(sa bagong-aktibong kakapakitang tab, kapareho ng para sashow.bs.tab
kaganapan)
Kung wala pang tab na aktibo, ang hide.bs.tab
at mga hidden.bs.tab
kaganapan ay hindi papaganahin.
Uri ng kaganapan | Paglalarawan |
---|---|
show.bs.tab | Ang kaganapang ito ay gagana 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. |