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
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
Articoli disabilitati
Aggiungi .disableda a .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
Collegamenti e pulsanti
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 .
Con <button>s, puoi anche utilizzare l' disabledattributo invece della .disabledclasse. Purtroppo, <a>s non supporta l'attributo disabilitato.
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
Orizzontale
Aggiungi .list-group-horizontalper modificare il layout degli elementi del gruppo elenco da verticale a orizzontale su tutti i punti di interruzione. In alternativa, scegli una variante reattiva .list-group-horizontal-{sm|md|lg|xl}per rendere orizzontale un gruppo di elenchi a partire da quel punto di interruzione min-width. Attualmente i gruppi di elenchi orizzontali non possono essere combinati con i gruppi di elenchi a filo.
Suggerimento: desideri elementi del gruppo di elenchi di uguale larghezza quando sono orizzontali? Aggiungi .flex-filla ciascun elemento del gruppo di elenchi.
Cras solo odio
Dapibus ac facilisis in
Morbi leo risus
Cras solo odio
Dapibus ac facilisis in
Morbi leo risus
Cras solo odio
Dapibus ac facilisis in
Morbi leo risus
Cras solo odio
Dapibus ac facilisis in
Morbi leo risus
Cras solo odio
Dapibus ac facilisis in
Morbi leo risus
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
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.
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 es. 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 non letti, attività e altro con l'aiuto di alcune utilità .
Cras solo odio14
Dapibus ac facilisis in2
Morbi leo risus1
Contenuti personalizzati
Aggiungi quasi qualsiasi codice HTML all'interno, anche per gruppi di elenchi collegati come quello di seguito, con l'aiuto delle utilità flexbox .
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.
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.
Tramite JavaScript
Abilita elemento dell'elenco tabable tramite JavaScript (ogni elemento dell'elenco deve essere attivato singolarmente):
È possibile attivare singole voci di elenco in diversi modi:
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.
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.
.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).
Eventi
Quando viene visualizzata una nuova scheda, gli eventi si attivano nel seguente ordine:
hide.bs.tab(nella scheda attiva corrente)
show.bs.tab(nella scheda da mostrare)
hidden.bs.tab(nella scheda attiva precedente, la stessa hide.bs.tabdell'evento)
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.scheda.bs
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.