HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Listes W3.CSS

❮ Précédent Suivant ❯
  • ×
    Mike
    Concepteur Web
  • ×
    Soutien
    de Julie
  • ×
    Jeanne
    Comptable

Liste de base

La classe w3-ul est utilisée pour afficher une liste de base :

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Liste bordée

La classe w3-border ajoute une bordure autour de la liste :

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

En-tête de liste

Un exemple de la façon d'ajouter un élément d'en-tête à l'intérieur de l'élément de liste :

  • Noms

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Liste sous forme de carte

Les classes w3-card- number peuvent être utilisées pour afficher une liste sous forme de carte :

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-card-4" style="width:50%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Liste centrée

La classe w3-center peut être utilisée pour centrer les éléments de liste dans une liste :

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Liste colorée

Les classes w3- color permettent d'ajouter une couleur à la liste :

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Élément de liste coloré

Les classes w3- color peuvent être utilisées pour ajouter une couleur à l'élément de liste :

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Liste flottante

La classe w3-hoverable ajoute une couleur de fond grise à chaque élément de la liste au passage de la souris :

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Si vous voulez une couleur de survol spécifique, ajoutez l'une des classes w3-hover- color à chaque élément <li> :

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul">
  <li class="w3-hover-red">Jill</li>
  <li class="w3-hover-blue">Eve</li>
  <li class="w3-hover-green">Adam</li>
</ul>

Élément de liste fermable

Cliquez sur le "x" pour fermer/masquer un élément de la liste :

  • Julie×
  • Adam×
  • Veille×

Exemple

<li class="w3-display-container">Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-button w3-display-right">&times;</span>
</li>

Astuce : Le code HTML × entity est l'icône préférée pour les boutons de fermeture (plutôt que la lettre "X").

Liste avec remplissage

Les classes w3-padding peuvent être utilisées pour ajouter un rembourrage aux éléments de la liste : 

  • Julie
  • Veille
  • Adam
  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul">
  <li class="w3-padding-small">Jill</li>
  <li class="w3-padding-small">Eve</li>
  <li class="w3-padding-small">Adam</li>
</ul>

Liste d'avatars

  • ×
    Mike
    Concepteur Web
  • ×
    Soutien
    de Julie
  • ×
    Jeanne
    Comptable

Exemple

<li class="w3-bar">
  <span onclick="this.parentElement.style.display='none'"
  class="w3-bar-item w3-button w3-xlarge w3-right">&times;</span>
  <img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
  <div class="w3-bar-item">
    <span class="w3-large">Mike</span><br>
    <span>Web Designer</span>
  </div>
</li>

Conseil : vous en apprendrez plus sur les classes w3-bar dans nos chapitres Barres W3.CSS et Navigation W3.CSS .

Largeur de la liste

Les listes ont une largeur de 100 % par défaut. Utilisez la propriété width pour changer cela.

Exemple

<ul class="w3-ul" style="width:30%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

30 % de largeur :

  • Julie
  • Adam

50 % de largeur :

  • Julie
  • Adam

80% largeur :

  • Julie
  • Adam

Petite liste

Utilisez la classe w3-tiny pour afficher une petite liste : 

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Petite liste

Utilisez la classe w3-small pour afficher une petite liste :  

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Grande liste

Utilisez la classe w3-large pour afficher une grande liste : 

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Liste XLarge

Utilisez la classe w3-xlarge pour afficher une très grande liste :  

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Très grande liste

Utilisez la classe w3-xxlarge pour afficher une liste XXLarge :  

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

XXXGrande liste

Utilisez la classe w3-xxxlarge pour afficher une liste XXXLarge :  

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

Liste géante

Utilisez la classe w3-jumbo pour afficher une énorme liste "jumbo":  

  • Julie
  • Veille
  • Adam

Exemple

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>

❮ Précédent Suivant ❯