Source

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.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum à l'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>

Articuli attivi

Aghjunghjite .activeà a .list-group-itemper indicà a selezzione attiva attuale.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum à l'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>

Articuli disabilitati

Aghjunghjite .disabledà a .list-group-itemper fà chì pare micca disattivatu. Innota chì certi elementi cù .disabledancu avè bisognu di JavaScript persunalizatu per disattivà cumplettamente i so eventi di clic (per esempiu, ligami).

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum à l'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>

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ì .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum à l'eros

<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>

Cù <button>s, pudete puru aduprà l' disabledattributu invece di a .disabledclassa. 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">
    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>

Flush

Aghjunghjite .list-group-flushper caccià alcuni cunfini è anguli arrotondati per rende l'articuli di u gruppu di lista bordu à bordu in un cuntainer parente (per esempiu, carte).

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum à l'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>

Orizzontale

Aghjunghjite .list-group-horizontalper 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.

Cras justo odio
Dapibus ac facilisis 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 facilisis 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 facilisis 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 facilisis 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 facilisis 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>

Classi contestuale

Aduprate classi cuntestuali per stilà l'articuli di lista cù un fondu statutu è culore.

Dapibus ac facilisis in
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">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>

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 .activestatu; applicà per indicà una selezzione attiva nantu à un articulu di gruppu di lista contextuale.

Dapibus ac facilisis in 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

<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>

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-onlyclasse.

Cù badges

Aghjunghjite badge à qualsiasi articulu di u gruppu di lista per mostrà cunti micca letti, attività è più cù l'aiutu di alcune utilità .

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>

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à

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

Lista di l'elementu di u gruppu

3 ghjorni fà

Donec id elit non mi porta gravida at eget metus. Mecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

Lista di l'elementu di u gruppu

3 ghjorni fà

Donec 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>

Cumportamentu JavaScript

Aduprate u plugin JavaScript di tabulazione - includenu individualmente o attraversu u bootstrap.jsschedariu compilatu - per allargà u nostru gruppu di lista per creà pannelli tabulabili di cuntenutu locale.

A casa Prufilu Missaghji Settings

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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.

<!-- 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>

Via JavaScript

Habilita l'elementu di lista tabulabile via JavaScript (ogni articulu di lista deve esse attivatu individualmente):

$('#myList a').on('click', function (e) {
  e.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 .showfà 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-targeto un hreftargeting 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.tabavvenimentu 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.tabavvenimentu)
shown.bs.tab(nantu à a tabulazione appena attivata appena mostrata, u listessu cum'è per l' show.bs.tabavvenimentu)

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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})