لیست های واکنشگرا
لیست ساده
کلاس w3-ul برای نمایش یک لیست ساده استفاده میشود:
- جیل
- ایو
- آدام
لیست border دار
کلاس w3-border یک border اطراف لیست اضافه میکند:
- جیل
- ایو
- آدام
مثال
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
سربرگ لیست
یک مثال که چگونگی افزودن سربرگ درون آیتم لیست را نشان میدهد، در زیر آمده است :
-
نام ها
- جیل
- ایو
- آدام
مثال
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
لیست کارت مانند
کلاس های w3-card-number برای نمایش لیست های کارت مانند، استفاده میشود :
- جیل
- ایو
- آدام
مثال
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
لیست وسط چین
کلاس w3-center میتواند برای وسط چین کردن آیتم های لیست استفاده شود:
- جیل
- ایو
- آدام
مثال
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
لیست های رنگی
کلاس w3-color برای افزودن رنگ به لیست استفاده میشود:
- جیل
- ایو
- آدام
آیتم های لیست رنگی
کلاس w3-color برای افزودن رنگ به آیتم های لیست استفاده میشود:
- جیل
- ایو
- آدام
مثال
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
لیست با قابلیت Hover
کلاس w3-hoverable برای افزودن رنگ پس زمینه به هرآیتم لیست ، زمانی که موس روی آن میرود استفاده میشود:
- lجیل
- ایو
- آدام
مثال
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
اگر شما بخواهید یک رنگ تغییر پذیر با حرکت موس تعریف کنید،کلاس هایw3-hover-color را به هر عنصر <li> بیافزایید :
- جیل
- ایو
- آدام
مثال
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
آیتم های لیست با قابلیت بسته شدن
مثال
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">×</span>
</li>
نکته : ماهیت × در HTML برای آیکون مربوط به دکمه های بستن نسبت به کلمه X بهتر است.
لیست ها با Padding
کلاس w3-padding-number برای افزودن padding به آیتم های لیست استفاده میشود:
- جیل
- ایو
- آدام
- جیل
- ایو
- آدام
مثال
<li class="w3-padding-16">Jill</li>
<li class="w3-padding-16">Eve</li>
<li class="w3-padding-16">Adam</li>
</ul>
لیست نمادی
مثال
<li class="w3-padding-16">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-padding">×</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>
لیست خیلی کوچک
کلاس w3-tiny یک لیست خیلی کوچک نمایش میدهد:
- جیل
- ایو
- آدام
لیست کوچک
کلاس w3-small یک لیست کوچک نمایش میدهد:
- جیل
- ایو
- آدام
لیست بزرگ
کلاس w3-large یک لیست بزرگ را نمایش می دهد
- جیل
- ایو
- آدام
لیست خیلی بزرگ
کلاس w3-largeیک لیست خیلی بزرگ نمایش میدهد:
- جیل
- ایو
- آدام
مثال
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
لیست خیلی خیلی بزرگ
کلاس w3-xxlarge یک لیست خیلی خیلی بزرگ را نمایش میدهد:
- جیل
- ایو
- آدام
مثال
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
لیست بزرگ (سه برابر بزرگ شده)
کلاس w3-xxxlargeیک لیست بزرگ (سه برابر بزرگ شده) را نمایش میدهد:
- جیل
- ایو
- آدام
مثال
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
لیست عظیم
کلاس w3-jumbo یک لیست بصورت عظیم نمایش می دهد:
- جیل
- ایو
- آدام
- نوشته شده توسط زهرا داوودی
- بازدید: 4199