Lista grupului
Grupurile de liste sunt o componentă flexibilă și puternică pentru afișarea unei serii de conținut. Modificați-le și extindeți-le pentru a sprijini aproape orice conținut din interior.
Exemplu de bază
Cel mai elementar grup de liste este o listă neordonată cu elemente de listă și clasele adecvate. Construiți pe el cu opțiunile care urmează sau cu propriul dvs. CSS, după cum este necesar.
- Cras justo odio
- Dapibus ac facilitis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum la 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>
Elemente active
Adăugați .active
la a .list-group-item
pentru a indica selecția activă curentă.
- Cras justo odio
- Dapibus ac facilitis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum la 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>
Articole dezactivate
Adăugați .disabled
la a .list-group-item
pentru ca acesta să pară dezactivat. Rețineți că unele elemente cu .disabled
vor necesita, de asemenea, JavaScript personalizat pentru a dezactiva complet evenimentele de clic (de exemplu, linkuri).
- Cras justo odio
- Dapibus ac facilitis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum la 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>
Legături și butoane
Utilizați <a>
s sau <button>
s pentru a crea elemente de grup de listă acționabile cu stări de trecere, dezactivat și activ, adăugând .list-group-item-action
. Separăm aceste pseudo-clase pentru a ne asigura că grupurile de liste formate din elemente neinteractive (cum ar fi <li>
s sau <div>
s) nu oferă un clic sau atingere.
Asigurați-vă că nu utilizați clasele standard.btn
aici .
<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>
Cu <button>
s, puteți folosi și disabled
atributul în locul .disabled
clasei. Din păcate, <a>
s nu acceptă atributul dezactivat.
<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>
Culoare
Adăugați .list-group-flush
pentru a elimina unele margini și colțuri rotunjite pentru a reda elementele din grupul listei de la margine la margine într-un container părinte (de exemplu, carduri).
- Cras justo odio
- Dapibus ac facilitis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum la 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>
Orizontală
Adăugați .list-group-horizontal
pentru a modifica aspectul elementelor grupului de liste de la vertical la orizontal în toate punctele de întrerupere. Ca alternativă, alegeți o variantă receptivă .list-group-horizontal-{sm|md|lg|xl}
pentru a face un grup de liste orizontal, începând de la punctul de întrerupere respectiv min-width
. În prezent , grupurile de liste orizontale nu pot fi combinate cu grupurile de liste de culoare.
Sfat: doriți elemente de grup de listă cu lățime egală când sunt orizontale? Adăugați .flex-fill
la fiecare element de grup din listă.
- Cras justo odio
- Dapibus ac facilitis 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 facilitis 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 facilitis 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 facilitis 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 facilitis 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>
Clasele contextuale
Utilizați clase contextuale pentru a stila elementele listei cu un fundal și o culoare cu stare.
- Dapibus ac facilitis in
- Un element simplu de grup de listă primară
- Un simplu element secundar de grup de listă
- Un element simplu de grup din lista de succes
- Un element simplu de grup din lista de pericole
- Un element simplu de grup din lista de avertizare
- Un element simplu de grup din lista de informații
- Un simplu element de grup de listă luminoasă
- Un simplu element de grup din lista întunecată
<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>
Clasele contextuale funcționează și cu .list-group-item-action
. Rețineți că adăugarea stilurilor de hover aici nu este prezentă în exemplul anterior. De asemenea, este sprijinit .active
statul; aplicați-l pentru a indica o selecție activă pe un element de grup de listă contextuală.
<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>
Transmiterea sensului tehnologiilor de asistență
Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .sr-only
clasa.
Cu insigne
Adăugați insigne la orice element din grupul de listă pentru a afișa numărătoarele necitite, activitatea și multe altele, cu ajutorul unor utilitare .
- Cras justo odio14
- Dapibus ac facilitis 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>
Conținut personalizat
Adăugați aproape orice HTML în interior, chiar și pentru grupurile de liste legate, cum ar fi cel de mai jos, cu ajutorul utilitarelor flexbox .
Listează titlul articolului de grup
acum 3 zileDonec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Listează titlul articolului de grup
acum 3 zileDonec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Listează titlul articolului de grup
acum 3 zileDonec id elit non mi porta gravida at eget metus. Mecenas 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>
Comportamentul JavaScript
Utilizați pluginul JavaScript pentru filă - includeți-l individual sau prin bootstrap.js
fișierul compilat - pentru a extinde grupul nostru de listă pentru a crea panouri de conținut local cu tabele.
<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>
Utilizarea atributelor de date
Puteți activa o navigare în grup de listă fără a scrie JavaScript, prin simpla specificare data-toggle="list"
sau pe un element. Utilizați aceste atribute de date pe .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>
Prin JavaScript
Activați elementul din listă cu tabele prin JavaScript (fiecare element din listă trebuie activat individual):
$('#myList a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
Puteți activa un element individual din listă în mai multe moduri:
$('#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
Efect de estompare
Pentru a face ca panoul de file să dispară, adăugați .fade
la fiecare .tab-pane
. De asemenea, primul panou de file trebuie .show
să facă vizibil conținutul inițial.
<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>
Metode
$().tab
Activează un element de listă și un container de conținut. Tab ar trebui să aibă fie un, fie un data-target
nod href
de container în 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('arată')
Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (for example, before the shown.bs.tab
event occurs).
$('#someListItem').tab('show')
Events
When showing a new tab, the events fire in the following order:
hide.bs.tab
(on the current active tab)show.bs.tab
(on the to-be-shown tab)hidden.bs.tab
(on the previous active tab, the same one as for thehide.bs.tab
event)shown.bs.tab
(on the newly-active just-shown tab, the same one as for theshow.bs.tab
event)
If no tab was already active, the hide.bs.tab
and hidden.bs.tab
events will not be fired.
Event type | Description |
---|---|
show.bs.tab | This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
shown.bs.tab | This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
hide.bs.tab | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. |
hidden.bs.tab | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})