Groupe de listes
Les groupes de listes sont un composant flexible et puissant pour afficher une série de contenus. Modifiez-les et étendez-les pour prendre en charge à peu près n'importe quel contenu.
Exemple de base
Le groupe de liste le plus basique est une liste non ordonnée avec des éléments de liste et les classes appropriées. Développez-le avec les options qui suivent, ou avec votre propre CSS si nécessaire.
- Cras justo odio
- Dapibus ac facilisis à
- Morbi leo risus
- Porta ac consectetur ac
- Vestibule à 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>
Éléments actifs
Ajouter .active
à a .list-group-item
pour indiquer la sélection active actuelle.
- Cras justo odio
- Dapibus ac facilisis à
- Morbi leo risus
- Porta ac consectetur ac
- Vestibule à 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>
Articles désactivés
Ajouter .disabled
à un .list-group-item
pour le faire apparaître désactivé. Notez que certains éléments avec .disabled
nécessiteront également un JavaScript personnalisé pour désactiver complètement leurs événements de clic (par exemple, les liens).
- Cras justo odio
- Dapibus ac facilisis à
- Morbi leo risus
- Porta ac consectetur ac
- Vestibule à 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>
Liens et boutons
Utilisez <a>
s ou <button>
s pour créer des éléments de groupe de liste exploitables avec des états survolés, désactivés et actifs en ajoutant .list-group-item-action
. Nous séparons ces pseudo-classes pour nous assurer que les groupes de listes constitués d'éléments non interactifs (comme <li>
s ou <div>
s) ne fournissent pas d'offre de clic ou de tapotement.
Assurez-vous de ne pas utiliser les .btn
classes standard ici .
<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>
Avec <button>
s, vous pouvez également utiliser l' disabled
attribut au lieu de la .disabled
classe. Malheureusement, <a>
s ne prend pas en charge l'attribut disabled.
<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>
Affleurer
Ajoutez .list-group-flush
pour supprimer certaines bordures et coins arrondis afin de rendre les éléments de groupe de liste bord à bord dans un conteneur parent (par exemple, des cartes).
- Cras justo odio
- Dapibus ac facilisis à
- Morbi leo risus
- Porta ac consectetur ac
- Vestibule à 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>
Horizontal
Ajouter .list-group-horizontal
pour modifier la disposition des éléments de groupe de liste de vertical à horizontal sur tous les points d'arrêt. Vous pouvez également choisir une variante réactive .list-group-horizontal-{sm|md|lg|xl}
pour créer un groupe de listes horizontal à partir de ce point d'arrêt min-width
. Actuellement , les groupes de listes horizontales ne peuvent pas être combinés avec des groupes de listes affleurantes.
Astuce de pro : Vous voulez des éléments de groupe de liste de largeur égale lorsqu'ils sont horizontaux ? Ajouter .flex-fill
à chaque élément de groupe de liste.
- Cras justo odio
- Dapibus ac facilisis à
- 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 à
- 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 à
- 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 à
- 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 à
- 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>
Classes contextuelles
Utilisez des classes contextuelles pour styliser les éléments de liste avec un arrière-plan et une couleur avec état.
- Dapibus ac facilisis à
- Un élément de groupe de liste primaire simple
- Un simple élément de groupe de liste secondaire
- Un simple élément de groupe de liste de réussite
- Un simple élément de groupe de la liste des dangers
- Un élément de groupe de liste d'avertissement simple
- Un élément de groupe de liste d'informations simple
- Un simple élément de groupe de liste de lumière
- Un simple élément de groupe de liste noire
<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>
Les classes contextuelles fonctionnent également avec .list-group-item-action
. Notez l'ajout des styles de survol ici non présents dans l'exemple précédent. L'état est également pris en charge .active
; l'appliquer pour indiquer une sélection active sur un élément de groupe de liste contextuelle.
<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>
Donner du sens aux technologies d'assistance
L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations désignées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .sr-only
classe.
Avec insignes
Ajoutez des badges à n'importe quel élément de groupe de liste pour afficher le nombre de non lus, l'activité, etc. à l'aide de certains utilitaires .
- Cras justo odio14
- Dapibus ac facilisis à2
- 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>
Contenu personnalisé
Ajoutez presque n'importe quel code HTML à l'intérieur, même pour les groupes de listes liées comme celui ci-dessous, à l'aide des utilitaires flexbox .
En-tête d'élément de groupe de liste
Il ya 3 joursDonec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.
Donec id elit non mi porta.En-tête d'élément de groupe de liste
Il ya 3 joursDonec id elit non mi porta gravida et eget metus. Mécène sed diam eget risus varius blandit.
Donec id elit non mi porta.En-tête d'élément de groupe de liste
Il ya 3 joursDonec id elit non mi porta gravida et eget metus. Mécène 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>
Comportement JavaScript
Utilisez le plug-in JavaScript tab - incluez-le individuellement ou via le bootstrap.js
fichier compilé - pour étendre notre groupe de listes afin de créer des volets tabulables de contenu local.
<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>
Utilisation des attributs de données
Vous pouvez activer une navigation de groupe de liste sans écrire de JavaScript en spécifiant simplement data-toggle="list"
ou sur un élément. Utilisez ces attributs de données sur .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
Activer l'élément de liste tabulable via JavaScript (chaque élément de liste doit être activé individuellement) :
$('#myList a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
Vous pouvez activer un élément de liste individuel de plusieurs manières :
$('#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
Effet fondu
Pour faire apparaître le panneau des onglets, ajoutez .fade
à chacun .tab-pane
. Le premier volet d'onglet doit également .show
rendre visible le contenu initial.
<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>
Méthodes
$().tab
Active un élément d'élément de liste et un conteneur de contenu. L'onglet doit avoir un data-target
ou un href
ciblant un nœud de conteneur dans le 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('montrer')
Sélectionne l'élément de liste donné et affiche son volet associé. Tout autre élément de liste précédemment sélectionné devient désélectionné et son volet associé est masqué. Revient à l'appelant avant que le volet d'onglet ne soit réellement affiché (par exemple, avant que l' shown.bs.tab
événement ne se produise).
$('#someListItem').tab('show')
Événements
Lors de l'affichage d'un nouvel onglet, les événements se déclenchent dans l'ordre suivant :
hide.bs.tab
(sur l'onglet actuellement actif)show.bs.tab
(sur l'onglet à afficher)hidden.bs.tab
(sur l'onglet actif précédent, le même que pour l'hide.bs.tab
événement)shown.bs.tab
(sur l'onglet nouvellement actif qui vient d'être affiché, le même que pour l'show.bs.tab
événement)
Si aucun onglet n'était déjà actif, les événements hide.bs.tab
et hidden.bs.tab
ne seront pas déclenchés.
Type d'événement | La description |
---|---|
show.bs.tab | Cet événement se déclenche lors de l'affichage de l'onglet, mais avant l'affichage du nouvel onglet. Utilisez event.target et event.relatedTarget pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible). |
montré.bs.tab | Cet événement se déclenche lors de l'affichage d'un onglet après l'affichage d'un onglet. Utilisez event.target et event.relatedTarget pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible). |
hide.bs.tab | Cet événement se déclenche lorsqu'un nouvel onglet doit être affiché (et donc l'onglet actif précédent doit être masqué). Utilisez event.target et event.relatedTarget pour cibler respectivement l'onglet actif actuel et le nouvel onglet qui sera bientôt actif. |
onglet.bs.caché | Cet événement se déclenche après l'affichage d'un nouvel onglet (et donc l'onglet actif précédent est masqué). Utilisez event.target et event.relatedTarget pour cibler respectivement l'onglet actif précédent et le nouvel onglet actif. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})