Afișarea unei liste
- ×
Mike
Web designer - ×
Jill
A sustine - ×
Jane
Contabil
Lista de bază
- Jill
- ajun
- Adam
Listă marginita
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » Listă antet
Nume
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » Listă ca un card
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-card-4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » Listă Centrat
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » Lista de colorat
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » Listă colorat Postul
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » lista Hoverable
Clasa-W3 hoverable adaugă un fundal de culoare gri pentru fiecare element din listă cu mouse-ul:
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » Dacă doriți o culoare planare specifică, adăugați oricare dintre W3-hover-clase pentru fiecare <li> Element:
- Jill
- ajun
- Adam
lista poate fi închisă
Faceți clic pe litera "x" pentru a închide / ascunde un element din listă:
- Jill x
- Adam x
- Eva x
Exemplu
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Încearcă - l singur » Listă căptușită
- Jill
- ajun
- Adam
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul">
<li class="w3-padding-hor-16">Jill</li>
<li
class="w3-padding-hor-16">Eve</li>
<li class="w3-padding-hor-16">Adam</li>
</ul>
Încearcă - l singur » avatar Lista
- X Mike
Web designer - X Jill
A sustine - X Jane
Contabil
Exemplu
<ul class="w3-ul w3-card-4">
<li class="w3-padding-hor-16">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-padding">x</span>
<img src="img_avatar2.png"
class="w3-left w3-circle" style="width:60px">
<span
class="w3-xlarge">Mike</span><br>
<span>Web
Designer</span>
</li>
</ul>
Încearcă - l singur » Listă Tiny
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » Lista de mici
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » Listă mare
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » XLARGE Listă
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » XXLarge Listă
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » XXXLarge Listă
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur » Listă Jumbo
- Jill
- ajun
- Adam
Exemplu
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Încearcă - l singur »