تخفیف ویژه ماه مبارک رمضان، فرصت یادگیری با 35٪ تخفیف (کد تخفیف: ramazan)

سبد خرید (0)

لیست های واکنشگرا


لیست ساده

کلاس  w3-ul برای نمایش یک لیست ساده استفاده میشود:

  • جیل 
  • ایو
  • آدام

مثال

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
خودتان امتحان کنيد »

لیست border دار

کلاس w3-border یک 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-card-number برای نمایش لیست های کارت مانند، استفاده میشود :

  • جیل
  • ایو
  • آدام

 

مثال

<ul class="w3-ul w3-card-4" style="width:50%">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
خودتان امتحان کنيد »

لیست وسط چین

کلاس  w3-center میتواند برای وسط چین کردن آیتم های لیست  استفاده  شود:

  • جیل
  • ایو
  • آدام

 

مثال

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
خودتان امتحان کنيد »

لیست های رنگی

کلاس w3-color  برای افزودن رنگ به لیست استفاده میشود:

  • جیل
  • ایو
  • آدام

 

مثال

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
خودتان امتحان کنيد »

آیتم های لیست رنگی

کلاس w3-color برای افزودن رنگ به آیتم های لیست استفاده میشود:

  • جیل
  • ایو
  • آدام

 

مثال

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
خودتان امتحان کنيد »

لیست با قابلیت Hover 

کلاس w3-hoverable برای افزودن رنگ پس زمینه به هرآیتم لیست ، زمانی که موس روی آن میرود  استفاده میشود:

  • lجیل
  • ایو
  • آدام

 

مثال

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
خودتان امتحان کنيد »

اگر شما بخواهید یک رنگ تغییر پذیر با حرکت موس تعریف کنید،کلاس هایw3-hover-color  را به هر عنصر <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>
خودتان امتحان کنيد »

آیتم های لیست با قابلیت بسته شدن

مثال

<li>Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-closebtn w3-margin-right w3-medium">&times;</span>
</li>
خودتان امتحان کنيد »

نکته : ماهیت  &times در HTML برای آیکون مربوط به دکمه های بستن نسبت به کلمه X  بهتر است.


لیست ها با  Padding

 کلاس  w3-padding-number برای افزودن padding  به آیتم های لیست استفاده میشود:

  • جیل
  • ایو
  • آدام
  • جیل
  • ایو
  • آدام

مثال

<ul class="w3-ul">
  <li class="w3-padding-16">Jill</li>
  <li class="w3-padding-16">Eve</li>
  <li class="w3-padding-16">Adam</li>
</ul>
خودتان امتحان کنيد »

 لیست نمادی

مثال

<ul class="w3-ul w3-card-4">
  <li class="w3-padding-16">
    <span onclick="this.parentElement.style.display='none'"
    class="w3-closebtn w3-padding">&times;</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 یک لیست خیلی کوچک نمایش میدهد:

  • جیل
  • ایو
  • آدام

 

مثال

<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>
خودتان امتحان کنيد »

لیست خیلی بزرگ 

کلاس w3-largeیک لیست خیلی بزرگ نمایش میدهد:

  • جیل
  • ایو
  • آدام

 

مثال

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
خودتان امتحان کنيد »

لیست خیلی خیلی بزرگ

کلاس w3-xxlarge یک لیست خیلی خیلی بزرگ  را نمایش میدهد:  

  • جیل
  • ایو
  • آدام

 

مثال

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
خودتان امتحان کنيد »

لیست بزرگ (سه برابر بزرگ شده)

کلاس w3-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>
خودتان امتحان کنيد »