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

W3.CSS- lijsten

❮ Vorig Volgende ❯
  • ×
    Mike
    webdesigner
  • ×
    Jill-
    ondersteuning
  • ×
    Jane
    Accountant

Basislijst

De klasse w3-ul wordt gebruikt om een ​​basislijst weer te geven:

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Begrensde lijst

De klasse w3-border voegt een rand toe rond de lijst:

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Lijstkoptekst

Een voorbeeld van het toevoegen van een kopelement in het lijstitem:

  • namen

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Lijst als een kaart

De w3- kaartnummerklassen kunnen worden gebruikt om een ​​lijst als kaart weer te geven:

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Gecentreerde lijst

De klasse w3-center kan worden gebruikt om de lijstitems in een lijst te centreren:

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Gekleurde Lijst

De w3 -kleurklassen kunnen worden gebruikt om een ​​kleur aan de lijst toe te voegen:

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Gekleurd lijstitem

De w3 -kleurklassen kunnen worden gebruikt om een ​​kleur aan het lijstitem toe te voegen:

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Zweefbare lijst

De klasse w3-hoverable voegt een grijze achtergrondkleur toe aan elk lijstitem bij muisaanwijzer:

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Als je een specifieke hover-kleur wilt, voeg dan een van de w3-hover- color - klassen toe aan elk <li>-element:

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Afsluitbaar lijstitem

Klik op de "x" om een ​​lijstitem te sluiten/verbergen:

  • Jill×
  • Adam×
  • Vooravond×

Voorbeeld

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

Tip: De HTML × entiteit is het voorkeurspictogram voor sluitknoppen (in plaats van de letter "X").

Lijst met opvulling

De w3-padding- klassen kunnen worden gebruikt om opvulling toe te voegen aan lijstitems: 

  • Jill
  • Vooravond
  • Adam
  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Avatarlijst

  • ×
    Mike
    webdesigner
  • ×
    Jill-
    ondersteuning
  • ×
    Jane
    Accountant

Voorbeeld

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

Tip: je leert meer over de w3-bar-klassen in onze hoofdstukken W3.CSS -balken en W3.CSS-navigatie .

Lijstbreedte

Lijsten hebben standaard een breedte van 100%. Gebruik de eigenschap width om dit te wijzigen.

Voorbeeld

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

30% breedte:

  • Jill
  • Adam

50% breedte:

  • Jill
  • Adam

80% breedte:

  • Jill
  • Adam

Kleine lijst

Gebruik de klasse w3-tiny om een ​​kleine lijst weer te geven: 

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Kleine lijst

Gebruik de klasse w3-small om een ​​kleine lijst weer te geven:  

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Grote lijst

Gebruik de klasse w3-large om een ​​grote lijst weer te geven: 

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

XLgrote lijst

Gebruik de klasse w3-xlarge om een ​​extra grote lijst weer te geven:  

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

XXLgrote lijst

Gebruik de klasse w3-xxlarge om een ​​XXLarge-lijst weer te geven:  

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

XXXGrote lijst

Gebruik de klasse w3-xxxlarge om een ​​XXXLarge-lijst weer te geven:  

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

Jumbo-lijst

Gebruik de klasse w3-jumbo om een ​​enorme "jumbo"-lijst weer te geven:  

  • Jill
  • Vooravond
  • Adam

Voorbeeld

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

❮ Vorig Volgende ❯