قوائم W3.CSS
القائمة الأساسية
تُستخدم فئة w3-ul لعرض قائمة أساسية:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة بحدود
تضيف فئة w3-border حدًا حول القائمة:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
رأس القائمة
مثال على كيفية إضافة عنصر عنوان داخل عنصر القائمة:
الأسماء
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة كبطاقة
يمكن استخدام فئات رقم بطاقة w3 لعرض قائمة كبطاقة:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة مركزية
يمكن استخدام فئة مركز w3 لتوسيط عناصر القائمة في قائمة:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة ملونة
يمكن استخدام فئات الألوان w3- لإضافة لون إلى القائمة:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
عنصر قائمة ملون
يمكن استخدام فئات الألوان w3- لإضافة لون إلى عنصر القائمة:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة تحوم
تضيف فئة w3-hoverable لون خلفية رمادية لكل عنصر قائمة عند تمرير الماوس فوقه:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
إذا كنت تريد لونًا محددًا للتمرير ، فأضف أيًا من فئات ألوان w3-hover- لكل عنصر <li>:
- جيل
- حواء
- آدم
مثال
<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>
عنصر قائمة يمكن إغلاقه
انقر فوق "x" لإغلاق / إخفاء عنصر قائمة:
- جيل
- آدم
- حواء
مثال
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
نصيحة: HTML & times؛ الكيان هو الرمز المفضل لأزرار الإغلاق (بدلاً من الحرف "X").
قائمة بالحشو
يمكن استخدام فئات w3-padding لإضافة حشوة لعناصر القائمة:
- جيل
- حواء
- آدم
- جيل
- حواء
- آدم
مثال
<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>
قائمة الصور الرمزية
مثال
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</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>
تلميح: سوف تتعلم المزيد عن فئات w3-bar في فصول W3.CSS Bars و W3.CSS Navigation .
عرض القائمة
عرض القوائم 100٪ بشكل افتراضي. استخدم خاصية العرض لتغيير هذا.
مثال
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
30٪ عرض:
- جيل
- آدم
عرض 50٪:
- جيل
- آدم
عرض 80٪:
- جيل
- آدم
قائمة صغيرة
استخدم فئة w3-tiny لعرض قائمة صغيرة:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة صغيرة
استخدم فئة w3-small لعرض قائمة صغيرة:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة كبيرة
استخدم فئة w3-large لعرض قائمة كبيرة:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة XLarge
استخدم فئة w3-xlarge لعرض قائمة كبيرة جدًا:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة XXLarge
استخدم فئة w3-xxlarge لعرض قائمة XXLarge:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXX قائمة كبيرة
استخدم فئة w3-xxxlarge لعرض قائمة XXXLarge:
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
قائمة جامبو
استخدم فئة w3-jumbo لعرض قائمة ضخمة من "الجامبو":
- جيل
- حواء
- آدم
مثال
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>