Lista di gruppu
I gruppi di lista sò un cumpunente flexible è putente per vede una seria di cuntenutu. Mudificà è estendeli per sustene quasi ogni cuntenutu.
Esempiu basicu
U gruppu di lista più basica hè una lista senza ordine cù elementi di lista è e classi propiu. Custruite nantu à questu cù l'opzioni chì seguitanu, o cù u vostru propiu CSS cum'è necessariu.
- Un articulu
- Un secondu articulu
- Un terzu articulu
- Un quartu articulu
- È una quinta
<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>
Articuli attivi
Aghjunghjite .active
à a .list-group-item
per indicà a selezzione attiva attuale.
- Un articulu attivu
- Un secondu articulu
- Un terzu articulu
- Un quartu articulu
- È una quinta
<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>
Articuli disabilitati
Aghjunghjite .disabled
à a .list-group-item
per fà chì pare micca disattivatu. Innota chì certi elementi cù .disabled
ancu avè bisognu di JavaScript persunalizatu per disattivà cumplettamente i so eventi di clic (per esempiu, ligami).
- Un articulu disattivatu
- Un secondu articulu
- Un terzu articulu
- Un quartu articulu
- È una quinta
<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>
Ligami è buttoni
Aduprate <a>
s o <button>
s per creà elementi di gruppu di lista azzione cù stati hover, disattivati è attivi aghjunghjendu .list-group-item-action
. Separemu queste pseudo-classi per assicurà chì i gruppi di lista fatti di elementi non interattivi (cum'è <li>
s o <div>
s) ùn furnisce micca un clic o un toccu affordance.
Assicuratevi di ùn aduprà e classi standard.btn
quì .
<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>
Cù <button>
s, pudete puru aduprà l' disabled
attributu invece di a .disabled
classa. Sfortunatamente, <a>
s ùn sustene micca l'attributu disattivatu.
<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>
Flush
Aghjunghjite .list-group-flush
per caccià alcuni cunfini è anguli arrotondati per rende l'articuli di u gruppu di lista bordu à bordu in un cuntainer parente (per esempiu, carte).
- Un articulu
- Un secondu articulu
- Un terzu articulu
- Un quartu articulu
- È una quinta
<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>
Orizzontale
Aghjunghjite .list-group-horizontal
per cambià u layout di l'articuli di u gruppu di lista da verticale à horizontale in tutti i punti di rottura. In alternativa, sceglite una variante responsiva .list-group-horizontal-{sm|md|lg|xl}
per fà un gruppu di lista horizontale partendu da quellu breakpoint min-width
. Attualmente i gruppi di lista horizontale ùn ponu esse cumminati cù i gruppi di lista flush.
ProTip: Vulete elementi di u gruppu di liste di larghezza uguale quandu horizontale? Aghjunghjite .flex-fill
à ogni articulu di u gruppu di lista.
- Un articulu
- Un secondu articulu
- Un terzu articulu
- Un articulu
- Un secondu articulu
- Un terzu articulu
- Un articulu
- Un secondu articulu
- Un terzu articulu
- Un articulu
- Un secondu articulu
- Un terzu articulu
- Un articulu
- Un secondu articulu
- Un terzu articulu
<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>
Classi contestuale
Aduprate classi cuntestuali per stilà l'articuli di lista cù un fondu statutu è culore.
- Un elementu simplice di gruppu di lista predeterminatu
- Un elementu simplice di gruppu di lista primaria
- Un elementu simplice di gruppu di lista secundaria
- Un elementu simplice di gruppu di lista di successu
- Un elementu simplice di gruppu di lista di periculi
- Un elementu simplice di u gruppu di lista d'avvertimenti
- Un elementu simplice di gruppu di lista d'infurmazioni
- Un elementu simplice di gruppu di lista di luce
- Un elementu simplice di gruppu di lista scura
<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>
E classi contextuale travaglianu ancu cù .list-group-item-action
. Nota l'aghjunzione di i stili di hover quì micca prisenti in l'esempiu precedente. Hè ancu supportatu u .active
statu; applicà per indicà una selezzione attiva nantu à un articulu di gruppu di lista contextuale.
<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>
Trasmette u significatu à e tecnulugia assistive
Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .sr-only
classe.
Cù badges
Aghjunghjite badge à qualsiasi articulu di u gruppu di lista per mostrà cunti micca letti, attività è più cù l'aiutu di alcune utilità .
- Un articulu di lista14
- Un secondu articulu di lista2
- Un terzu articulu di lista1
<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>
Cuntinutu persunalizatu
Aghjunghjite quasi ogni HTML, ancu per i gruppi di lista ligata cum'è quellu sottu, cù l'aiutu di l'utilità flexbox .
Lista di l'elementu di u gruppu
3 ghjorni fàQualchese cuntenutu di placeholder in un paràgrafu.
È un pocu stampatu.Lista di l'elementu di u gruppu
3 ghjorni fàQualchese cuntenutu di placeholder in un paràgrafu.
È qualchì stampa chjuca mutita.Lista di l'elementu di u gruppu
3 ghjorni fàQualchese cuntenutu di placeholder in un paràgrafu.
È qualchì stampa chjuca mutita.<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>
Cumportamentu JavaScript
Aduprate u plugin JavaScript di tabulazione - includenu individualmente o attraversu u bootstrap.js
schedariu compilatu - per allargà u nostru gruppu di lista per creà pannelli tabulabili di cuntenutu locale.
<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>
Utilizà l'attributi di dati
Pudete attivà una navigazione di u gruppu di lista senza scrive JavaScript per solu specificà data-toggle="list"
o nantu à un elementu. Aduprate sti attributi di dati nantu à .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>
Via JavaScript
Habilita l'elementu di lista tabulabile via JavaScript (ogni articulu di lista deve esse attivatu individualmente):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Pudete attivà l'elementu di lista individuale in parechje manere:
$('#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
Effettu fade
Per fà chì u pannellu di tabulazioni si dissolve, aghjunghje .fade
à ognunu .tab-pane
. U primu pannellu di tabulazione deve ancu .show
fà vede u cuntenutu iniziale.
<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>
I metudi
$().tab
Attiva un elementu di l'elementu di lista è u cuntenutu di cuntenutu. A tabulazione deve avè un data-target
o un href
targeting un node di cuntainer in u 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('mostra')
Selezziunate l'elementu di lista datu è mostra u so pane assuciatu. Qualchese altru articulu di lista chì era sceltu prima ùn hè micca selezziunatu è u so pane assuciatu hè oculatu. Ritorna à u chjamante prima chì u pannellu di tabulazione hè statu veramente mostratu (per esempiu, prima chì l' shown.bs.tab
avvenimentu si faci).
$('#someListItem').tab('show')
Avvenimenti
Quandu mostra una nova tabulazione, l'avvenimenti sparanu in l'ordine seguente:
hide.bs.tab
(nantu à a tabulazione attiva attuale)show.bs.tab
(nantu à a tabulazione da vede)hidden.bs.tab
(nantu à a tabulazione attiva precedente, u listessu cum'è per l'hide.bs.tab
avvenimentu)shown.bs.tab
(nantu à a tabulazione appena attivata appena mostrata, a stessa chì per l'show.bs.tab
avvenimentu)
Se nessuna tabulazione era digià attiva, l' eventi hide.bs.tab
è hidden.bs.tab
ùn saranu micca sparati.
Tipu di avvenimentu | Descrizzione |
---|---|
mostra.bs.tab | Questu avvenimentu spara nantu à a tabulazione, ma prima chì a nova tabulazione hè stata mostrata. Aduprate event.target è event.relatedTarget per destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente. |
mostratu.bs.tab | Questu avvenimentu spara nantu à a tabulazione mostra dopu chì una tabulazione hè stata mostrata. Aduprate event.target è event.relatedTarget per destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente. |
nascondere.bs.tab | Questu avvenimentu spara quandu una nova tabulazione deve esse mostrata (è cusì a tabulazione attiva precedente deve esse oculata). Aduprate event.target è event.relatedTarget per destinà a tabulazione attiva attuale è a nova tabulazione attiva prestu, rispettivamente. |
hidden.bs.tab | Questu avvenimentu spara dopu chì una nova tabulazione hè mostrata (è cusì a tabulazione attiva precedente hè oculata). Aduprate event.target è event.relatedTarget per destinà a tabulazione attiva precedente è a nova tabulazione attiva, rispettivamente. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})