عرض قائمة
- ×
ميكروفون
مصمم على شبكة الإنترنت - ×
جيل
الدعم - ×
جين
محاسب
قائمة الأساسية
- جيل
- حواء
- آدم
قائمة يحدها
- جيل
- حواء
- آدم
قائمة رأس
أسماء
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
انها محاولة لنفسك » قائمة بمثابة بطاقة
- جيل
- حواء
- آدم
قائمة تتمحور
- جيل
- حواء
- آدم
قائمة الملونة
- جيل
- حواء
- آدم
قائمة الملونة البند
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
انها محاولة لنفسك » قائمة Hoverable
وتضيف فئة W3 hoverable لون الخلفية الرمادية إلى كل عنصر بالقائمة على الفأرة فوق:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
انها محاولة لنفسك » إذا كنت ترغب في لون تحوم محددة، إضافة أي من W3-تحوم الطبقات مع بعضها <li> والعنصر:
- جيل
- حواء
- آدم
قائمة محكمة السد
انقر على حرف "X" لإغلاق / إخفاء عنصر القائمة:
- جيل العاشر
- آدم س
- عشية العاشر
مثال
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
انها محاولة لنفسك » قائمة مبطن
- جيل
- حواء
- آدم
- جيل
- حواء
- آدم
مثال
<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>
انها محاولة لنفسك » قائمة الصور الرمزية
- س ميكروفون
مصمم على شبكة الإنترنت - س جيل
الدعم - س جين
محاسب
مثال
<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>
انها محاولة لنفسك » قائمة صغيرة
- جيل
- حواء
- آدم
قائمة صغيرة
- جيل
- حواء
- آدم
قائمة كبيرة
- جيل
- حواء
- آدم
قائمة حجم كبير جدا
- جيل
- حواء
- آدم
قائمة XXLarge
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
انها محاولة لنفسك » قائمة XXXLarge
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
انها محاولة لنفسك » قائمة جامبو
- جيل
- حواء
- آدم