Source

Gruppo elenco

I gruppi di elenchi sono un componente flessibile e potente per la visualizzazione di una serie di contenuti. Modificali ed estendili per supportare praticamente qualsiasi contenuto all'interno.

Esempio di base

Il gruppo di elenchi più semplice è un elenco non ordinato con voci di elenco e le classi appropriate. Costruisci su di esso con le opzioni che seguono o con il tuo CSS, se necessario.

  • Cras solo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibolo all'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>

Articoli attivi

Aggiungi .activead a .list-group-itemper indicare la selezione attiva corrente.

  • Cras solo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibolo all'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>

Articoli disabilitati

Aggiungi .disableda .list-group-itemper farlo apparire disabilitato. Nota che alcuni elementi con .disabledrichiederanno anche JavaScript personalizzato per disabilitare completamente i loro eventi di clic (ad esempio, i collegamenti).

  • Cras solo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibolo all'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>

Utilizzare <a>s o <button>s per creare elementi di gruppo di elenchi utilizzabili con stati al passaggio del mouse, disabilitato e attivo aggiungendo .list-group-item-action. Separiamo queste pseudo-classi per garantire che i gruppi di elenchi costituiti da elementi non interattivi (come <li>s o <div>s) non forniscano un'accessibilità al clic o al tocco.

Assicurati di non utilizzare le .btnclassi standard qui .

Cras solo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibolo all'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">Vestibulum at eros</a>
</div>

Con <button>s, puoi anche utilizzare l' disabledattributo invece della .disabledclasse. Purtroppo, <a>s non supporta l'attributo disabilitato.

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

Sciacquone

Aggiungi .list-group-flushper rimuovere alcuni bordi e angoli arrotondati per rendere gli elementi del gruppo elenco da bordo a bordo in un contenitore principale (ad esempio, schede).

  • Cras solo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibolo all'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>

Classi contestuali

Usa le classi contestuali per applicare uno stile agli elementi dell'elenco con uno sfondo e un colore con stato.

  • Dapibus ac facilisis in
  • Un semplice elemento del gruppo dell'elenco principale
  • Un semplice elemento di gruppo di un elenco secondario
  • Un semplice elemento del gruppo dell'elenco di successo
  • Un semplice elemento di gruppo dell'elenco dei pericoli
  • Un semplice elemento di gruppo di un elenco di avvisi
  • Un semplice elemento di gruppo dell'elenco di informazioni
  • Un semplice elemento del gruppo di elenchi di luci
  • Un semplice elemento di un gruppo di dark list
<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>

Le classi contestuali funzionano anche con .list-group-item-action. Notare l'aggiunta degli stili al passaggio del mouse qui non presenti nell'esempio precedente. Anche lo stato è supportato .active; applicarlo per indicare una selezione attiva su un elemento del gruppo elenco contestuale.

Dapibus ac facilisis in Un semplice elemento del gruppo dell'elenco principale Un semplice elemento di gruppo di un elenco secondario Un semplice elemento del gruppo dell'elenco di successo Un semplice elemento di gruppo dell'elenco dei pericoli Un semplice elemento di gruppo di un elenco di avvisi Un semplice elemento di gruppo dell'elenco di informazioni Un semplice elemento del gruppo di elenchi di luci Un semplice elemento di un gruppo di dark list 
<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>
Trasmettere significato alle tecnologie assistive

L'uso del colore per aggiungere significato fornisce solo un'indicazione visiva, che non verrà trasmessa agli utenti di tecnologie assistive, come i lettori di schermo. Assicurati che le informazioni denotate dal colore siano ovvie dal contenuto stesso (ad esempio il testo visibile), o siano incluse attraverso mezzi alternativi, come testo aggiuntivo nascosto con la .sr-onlyclasse.

Con distintivi

Aggiungi badge a qualsiasi elemento del gruppo di elenchi per mostrare conteggi, attività e altro non letti con l'aiuto di alcune utilità .

  • Cras solo 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>

Contenuti personalizzati

Aggiungi quasi qualsiasi codice HTML all'interno, anche per gruppi di elenchi collegati come quello qui sotto, con l'aiuto delle utility flexbox .

Elenca l'intestazione dell'elemento del gruppo
3 giorni fa

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

Donec id elit non mi porta.
Elenca l'intestazione dell'elemento del gruppo
3 giorni fa

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

Donec id elit non mi porta.
Elenca l'intestazione dell'elemento del gruppo
3 giorni fa

Donec id elit non mi porta gravida at eget metus. Mecenate 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>

Comportamento JavaScript

Usa il plug-in JavaScript della scheda, includilo individualmente o tramite il file compilato bootstrap.js, per estendere il nostro gruppo di elenchi per creare riquadri tabbable di contenuto locale.

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>

Utilizzo degli attributi dei dati

Puoi attivare una navigazione a gruppi di liste senza scrivere alcun JavaScript semplicemente specificando data-toggle="list"o su un elemento. Usa questi attributi di dati su .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>

Tramite JavaScript

Abilita elemento dell'elenco tabable tramite JavaScript (ogni elemento dell'elenco deve essere attivato singolarmente):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

È possibile attivare singole voci di elenco in diversi modi:

$('#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

Effetto dissolvenza

Per fare in modo che il pannello delle schede si sbiadisca, aggiungi .fadea ciascuno .tab-pane. Il primo riquadro delle schede deve anche .showrendere visibile il contenuto 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>

Metodi

$().tab

Attiva un elemento di un elemento dell'elenco e un contenitore di contenuto. La scheda dovrebbe avere a data-targeto un hrefnodo di destinazione del contenitore nel 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')

Seleziona l'elemento dell'elenco specificato e mostra il riquadro associato. Qualsiasi altro elemento dell'elenco precedentemente selezionato viene deselezionato e il riquadro associato viene nascosto. Ritorna al chiamante prima che il riquadro delle schede sia stato effettivamente mostrato (ad esempio, prima shown.bs.tabche si verifichi l'evento).

$('#someListItem').tab('show')

Eventi

Quando viene visualizzata una nuova scheda, gli eventi si attivano nel seguente ordine:

  1. hide.bs.tab(nella scheda attiva corrente)
  2. show.bs.tab(nella scheda da mostrare)
  3. hidden.bs.tab(nella scheda attiva precedente, la stessa hide.bs.tabdell'evento)
  4. shown.bs.tab(nella scheda appena mostrata appena attiva, la stessa show.bs.tabdell'evento)

Se nessuna scheda era già attiva, gli eventi hide.bs.tabe hidden.bs.tabnon verranno attivati.

Tipo di evento Descrizione
show.bs.tab Questo evento si attiva alla visualizzazione della scheda, ma prima che venga mostrata la nuova scheda. Utilizzare event.targete event.relatedTargetper indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
mostrato.bs.tab Questo evento si attiva alla visualizzazione delle schede dopo che è stata mostrata una scheda. Utilizzare event.targete event.relatedTargetper indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
nascondi.bs.tab Questo evento si attiva quando deve essere visualizzata una nuova scheda (e quindi la scheda attiva precedente deve essere nascosta). Utilizzare event.targete event.relatedTargetper scegliere come target rispettivamente la scheda attiva corrente e la nuova scheda che sarà presto attiva.
scheda.bs.nascosta Questo evento si attiva dopo che viene mostrata una nuova scheda (e quindi la scheda attiva precedente viene nascosta). Utilizzare event.targete event.relatedTargetper indirizzare rispettivamente la scheda attiva precedente e la nuova scheda attiva. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})