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.
- Un obiect
- Un al doilea articol
- Un al treilea articol
- Un al patrulea articol
- Și un al cincilea
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Elemente active
Adăugați .active
la a .list-group-item
pentru a indica selecția activă curentă.
- Un articol activ
- Un al doilea articol
- Un al treilea articol
- Un al patrulea articol
- Și un al cincilea
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</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).
- Un articol dezactivat
- Un al doilea articol
- Un al treilea articol
- Un al patrulea articol
- Și un al cincilea
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</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" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</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" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</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).
- Un obiect
- Un al doilea articol
- Un al treilea articol
- Un al patrulea articol
- Și un al cincilea
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</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ă.
- Un obiect
- Un al doilea articol
- Un al treilea articol
- Un obiect
- Un al doilea articol
- Un al treilea articol
- Un obiect
- Un al doilea articol
- Un al treilea articol
- Un obiect
- Un al doilea articol
- Un al treilea articol
- Un obiect
- Un al doilea articol
- Un al treilea articol
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Clasele contextuale
Utilizați clase contextuale pentru a stila elementele listei cu un fundal și o culoare cu stare.
- Un element simplu de grup de listă implicit
- 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">A simple default list group item</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">A simple default list group item</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 semnificație 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 indicate 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 .
- Un articol din listă14
- Un al doilea articol din listă2
- Un al treilea element din listă1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
Conținut personalizat
Adăugați aproape orice cod 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 zileUn conținut de substituent într-un paragraf.
Și niște litere mici.Listează titlul articolului de grup
acum 3 zileUn conținut de substituent într-un paragraf.
Și niște litere mici dezactivate.Listează titlul articolului de grup
acum 3 zileUn conținut de substituent într-un paragraf.
Și niște litere mici dezactivate.<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">Some placeholder content in a paragraph.</p>
<small>And some small print.</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">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</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">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</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
.
<div role="tabpanel">
<!-- 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>
</div>
Prin JavaScript
Activați elementul din listă cu tabele prin JavaScript (fiecare element din listă trebuie activat individual):
$('#myList a').on('click', function (event) {
event.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ă')
Selectează elementul din listă dat și arată panoul asociat acestuia. Orice alt element din listă care a fost selectat anterior devine neselectat și panoul asociat este ascuns. Revine la apelant înainte ca panoul de file să fie afișat efectiv (de exemplu, înainte de apariția shown.bs.tab
evenimentului).
$('#someListItem').tab('show')
Evenimente
Când se afișează o filă nouă, evenimentele se declanșează în următoarea ordine:
hide.bs.tab
(în fila activă curentă)show.bs.tab
(în fila de afișat)hidden.bs.tab
(pe fila activă anterioară, aceeași ca pentruhide.bs.tab
eveniment)shown.bs.tab
(în fila nou-activă tocmai afișată, aceeași ca și pentrushow.bs.tab
eveniment)
Dacă nicio filă nu a fost deja activă, evenimentele hide.bs.tab
și hidden.bs.tab
nu vor fi declanșate.
Tip de eveniment | Descriere |
---|---|
arată.bs.tab | Acest eveniment se declanșează în afișarea filelor, dar înainte ca noua filă să fie afișată. Utilizați event.target și event.relatedTarget pentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă). |
afișat.bs.tab | Acest eveniment se declanșează în afișarea filelor după ce a fost afișată o filă. Utilizați event.target și event.relatedTarget pentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă). |
ascunde.bs.tab | Acest eveniment se declanșează atunci când trebuie afișată o filă nouă (și astfel fila activă anterioară trebuie să fie ascunsă). Utilizați event.target și event.relatedTarget pentru a viza fila activă curentă și, respectiv, noua filă care va fi activă în curând. |
ascuns.bs.tab | Acest eveniment se declanșează după ce este afișată o nouă filă (și astfel fila activă anterioară este ascunsă). Utilizați event.target și event.relatedTarget pentru a viza fila activă anterioară și, respectiv, noua filă activă. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})