Lista e grupit
Grupet e listave janë një komponent fleksibël dhe i fuqishëm për shfaqjen e një sërë përmbajtjesh. Modifikoni dhe zgjeroni ato për të mbështetur pothuajse çdo përmbajtje brenda.
Grupi më themelor i listës është një listë e parregulluar me artikuj të listës dhe klasat e duhura. Ndërtoni mbi të me opsionet që vijojnë, ose me CSS-në tuaj sipas nevojës.
- Cras justo odio
- Lehtësimi i AC në
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum dhe 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>
Shto .active
në a .list-group-item
për të treguar përzgjedhjen aktuale aktive.
- Cras justo odio
- Lehtësimi i AC në
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum dhe 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>
Shto .disabled
në një .list-group-item
për ta bërë atë të duket e çaktivizuar. Vini re se disa elementë me .disabled
do të kërkojnë gjithashtu JavaScript të personalizuar për të çaktivizuar plotësisht ngjarjet e tyre të klikimeve (p.sh., lidhjet).
- Cras justo odio
- Lehtësimi i AC në
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum dhe 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>
Përdorni <a>
s ose <button>
s për të krijuar artikuj të grupit të listës vepruese me gjendje pezullimi, të paaftë dhe aktive duke shtuar .list-group-item-action
. Ne i ndajmë këto pseudo-klasa për të siguruar që grupet e listave të përbëra nga elementë jo ndërveprues (si <li>
s ose <div>
s) të mos ofrojnë një klikim ose trokitje të përballueshme.
Sigurohuni që të mos përdorni .btn
klasat standarde këtu .
<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>
Me <button>
s, ju gjithashtu mund të përdorni disabled
atributin në vend të .disabled
klasës. Mjerisht, <a>
nuk e mbështet atributin e çaktivizuar.
<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>
Shto .list-group-flush
për të hequr disa bordurë dhe qoshe të rrumbullakosura për t'i paraqitur artikujt e grupit të listës buzë në skaj në një kontejner prind (p.sh. kartat).
- Cras justo odio
- Lehtësimi i AC në
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum dhe 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>
Përdorni klasa kontekstuale për të stiluar artikujt e listës me një sfond dhe ngjyrë shtetërore.
- Lehtësimi i AC në
- Ky është një artikull kryesor i grupit të listës
- Ky është një artikull dytësor i grupit të listës
- Ky është një artikull grupi i listës së suksesit
- Ky është një artikull i grupit të listës së rrezikut
- Ky është një artikull grupi i listës paralajmëruese
- Ky është një artikull i grupit të listës së informacionit
- Ky është një artikull i grupit të listës së lehtë
- Ky është një artikull i grupit të listës së errët
<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>
Klasat kontekstuale punojnë gjithashtu me .list-group-item-action
. Vini re shtimin e stileve hover këtu që nuk janë të pranishëm në shembullin e mëparshëm. Gjithashtu mbështetet edhe .active
shteti; zbatojeni atë për të treguar një përzgjedhje aktive në një artikull të grupit të listës kontekstuale.
<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>
Përcjellja e kuptimit tek teknologjitë ndihmëse
Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-only
klasën.
Shtoni distinktivë në çdo artikull të grupit të listës për të shfaqur numërimin e palexuar, aktivitetin dhe më shumë me ndihmën e disa shërbimeve .
- Cras justo odio14
- Lehtësimi i AC në2
- 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>
Shtoni pothuajse çdo HTML brenda, edhe për grupet e listave të lidhura si ai më poshtë, me ndihmën e shërbimeve flexbox .
Lista e titullit të artikullit të grupit
3 dite mepareDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Lista e titullit të artikullit të grupit
3 dite mepareDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Lista e titullit të artikullit të grupit
3 dite mepareDonec 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>
Përdorni shtojcën JavaScript të skedës - përfshijeni atë individualisht ose përmes bootstrap.js
skedarit të përpiluar - për të zgjeruar grupin tonë të listës për të krijuar panele tabelash të përmbajtjes lokale.
Ju mund të aktivizoni navigimin e grupit të listës pa shkruar ndonjë JavaScript thjesht duke specifikuar data-toggle="list"
ose mbi një element. Përdorni këto atribute të dhënash në .list-group-item
.
Aktivizo artikullin e listës me tabela përmes JavaScript (çdo artikull i listës duhet të aktivizohet individualisht):
Ju mund të aktivizoni një artikull individual të listës në disa mënyra:
Për ta bërë panelin e skedave të zbehet, shtojeni .fade
në secilin .tab-pane
. Paneli i parë i skedës duhet gjithashtu .show
të bëjë të dukshme përmbajtjen fillestare.
Aktivizon një element të artikullit të listës dhe një kontenier përmbajtjeje. Skeda duhet të ketë një data-target
ose një href
nyje kontejneri në DOM.
Zgjedh artikullin e dhënë të listës dhe tregon panelin e lidhur me të. Çdo artikull tjetër i listës që është zgjedhur më parë bëhet i pazgjedhur dhe paneli i lidhur me të fshihet. Kthehet te thirrësi përpara se të shfaqet në të vërtetë paneli i skedës (për shembull, përpara se të shown.bs.tab
ndodhë ngjarja).
Kur shfaqet një skedë e re, ngjarjet shfaqen në rendin e mëposhtëm:
hide.bs.tab
(në skedën aktuale aktive)show.bs.tab
(në skedën që do të shfaqet)hidden.bs.tab
(në skedën e mëparshme aktive, e njëjta si përhide.bs.tab
ngjarjen)shown.bs.tab
(në skedën e saposhfaqur të sapoaktive, e njëjta si përshow.bs.tab
ngjarjen)
Nëse asnjë skedë nuk ishte tashmë aktive, hide.bs.tab
dhe hidden.bs.tab
ngjarjet nuk do të hapen.
Lloji i ngjarjes | Përshkrim |
---|---|
shfaq.bs.tab | Kjo ngjarje aktivizohet në shfaqjen e skedave, por përpara se të shfaqet skeda e re. Përdorni event.target dhe event.relatedTarget për të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet). |
treguar.bs.tab | Kjo ngjarje ndizet në shfaqjen e skedave pasi të jetë shfaqur një skedë. Përdorni event.target dhe event.relatedTarget për të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet). |
fsheh.bs.tab | Kjo ngjarje ndizet kur duhet të shfaqet një skedë e re (dhe kështu skeda e mëparshme aktive duhet të fshihet). Përdorni event.target dhe event.relatedTarget për të synuar përkatësisht skedën aktuale aktive dhe skedën e re që do të aktivizohet së shpejti. |
fshehur.bs.tab | Kjo ngjarje ndizet pasi shfaqet një skedë e re (dhe kështu skeda e mëparshme aktive fshihet). Përdorni event.target dhe event.relatedTarget për të synuar përkatësisht skedën e mëparshme aktive dhe skedën e re aktive. |