JdB.CSS propose plusieurs classes pour créer et styliser des listes. Que ce soit pour des menus, des listes de tâches, ou des contenus organisés, vous pouvez créer les styles adaptés à votre design.
Créez des listes simples avec ou sans puces en utilisant les balises <ul> et <ol> standards (sans les classe de liste JdB.CSS).
<ul> <li>Premier élément de la liste</li> <li>Deuxième élément de la liste</li> <li>Troisième élément de la liste</li> </ul> <ol> <li>Premier élément de la liste</li> <li>Deuxième élément de la liste</li> <li>Troisième élément de la liste</li> </ol>
Utilisez la classe jdb-ul pour créer des listes stylisées sans puces, avec un espacement cohérent et un séparateur entre chaque ligne.
<ul class="jdb-ul"> <li>Élément de liste stylisé</li> <li>Deuxième élément</li> <li>Troisième élément</li> <li>Quatrième élément</li> </ul>
Ajoutez des bordures à vos listes pour une meilleure séparation visuelle des éléments.
<ul class="jdb-ul jdb-border"> <li class="jdb-padding">Élément avec bordure et padding</li> <li class="jdb-padding">Deuxième élément</li> <li class="jdb-padding">Troisième élément</li> </ul>
Appliquez des couleurs de fond à vos listes pour les mettre en évidence.
<ul class="jdb-ul jdb-pale-blue"> <li class="jdb-border-white">Information importante</li> <li class="jdb-border-white jdb-pale-yellow">Deuxième information</li> <li class="jdb-padding">Dernière information</li> </ul>
Ajoutez un effet au survol pour rendre vos listes interactives.
<ul class="jdb-ul jdb-hoverable jdb-card-2"> <li>Premier élément cliquable</li> <li>Deuxième élément cliquable</li> <li>Troisième élément cliquable</li> <li>Quatrième élément cliquable</li> </ul>
Enrichissez vos listes avec des icônes pour plus de clarté visuelle. Cette demo utilise les icons Font Awesome.
<ul class="jdb-ul"> <li><i class="fa fa-check jdb-text-green jdb-margin-right"></i> Tâche terminée</li> <li><i class="fa fa-check jdb-text-green jdb-margin-right"></i> Objectif atteint</li> <li><i class="fa fa-spinner jdb-text-blue jdb-margin-right"></i> En cours</li> <li><i class="fa fa-times jdb-text-red jdb-margin-right"></i> Échec</li> </ul>
Ajoutez des badges pour afficher des informations complémentaires ou des compteurs.
<ul class="jdb-ul jdb-card-2">
<li>
Messages
<span class="jdb-badge jdb-red jdb-right">3</span>
</li>
<li>
Notifications
<span class="jdb-badge jdb-blue jdb-right">12</span>
</li>
</ul>Créez des listes dont les éléments peuvent être fermés avec un bouton.
<ul class="jdb-ul jdb-border">
<li class="jdb-display-container">
Élément supprimable
<span class="jdb-button jdb-display-right jdb-red">✕</span>
</li>
<li class="jdb-display-container">
Deuxième élément supprimable
<span class="jdb-button jdb-display-right jdb-red">✕</span>
</li>
</ul>Centrez le contenu de vos listes pour un affichage équilibré.
<ul class="jdb-ul jdb-card-2 jdb-center"> <li>Élément centré</li> <li>Deuxième élément centré</li> <li>Troisième élément centré</li> <li>Quatrième élément centré</li> </ul>
Créez des listes qui s'adaptent aux différentes tailles d'écran.
<ul class="jdb-ul jdb-responsive">
<li>
<div class="jdb-row">
<div class="jdb-col l3 m4 s12"><b>Nom :</b></div>
<div class="jdb-col l9 m8 s12">Marie Dupont</div>
</div>
</li>
<li>
<div class="jdb-row">
<div class="jdb-col l3 m4 s12"><b>Email :</b></div>
<div class="jdb-col l9 m8 s12">marie.dupont@example.com</div>
</div>
</li>
</ul>La classe jdb-striped alterne les couleurs de fond des éléments de la liste pour faciliter la lecture.
<ul class="jdb-ul jdb-striped"> <li>Premier élément avec effet rayé</li> <li>Deuxième élément avec effet rayé</li> <li>Troisième élément avec effet rayé</li> <li>Quatrième élément avec effet rayé</li> <li>Cinquième élément avec effet rayé</li> </ul>
La classe jdb-ul-all ajoute des bordures autour de tous les éléments de la liste, créant une séparation visuelle complète. Combinez avec jdb-card pour un effet encore plus marqué.
jdb-ul-alljdb-ul-all et carte<ul class="jdb-ul-all"> <li>Premier élément entouré</li> <li>Deuxième élément entouré</li> <li>Troisième élément entouré</li> <li>Quatrième élément entouré</li> </ul> <ul class="jdb-ul-all jdb-card-2"> <li>Élément avec bordure et ombre</li> <li>Deuxième élément stylisé</li> <li>Troisième élément stylisé</li> </ul>